Sencha Touch 2 - Setting a max date on a datepicker - sencha-touch

Does anyone have any idea's how to prevent a user picking a future date (greater than current date) on a datepicker field?
I know I can validate easily enough after the user clicks the done button on the picker and show them an alert message telling them they cannot pick a future date.
But it would be nice if there was some way to actually prevent the selection in the first place, such as disabling some of the slot values from selection. I'm not so sure this can be done, maybe validation is the only way?

As I dont have enough reputation so I need to add my comments as an answer.
You have two ways to do this.
Listen to the change event and hide the donebutton if the date is greater than max date.
Override the Ext.picker.Date and hide the date values in the picker itself which are greater than max date at the initialization time.
2nd option is a bit complex but worth it if this feature is most important.

You can at the very least limit the yearFrom and yearTo this is however only available as a documented config in the Ext.picker.Date class which is actually the underlying class that gets called when creating an Ext.field.DatePickerinstance.
You can set options for the Ext.picker.Date by passing in the options to the picker property of the field
http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.field.DatePicker-cfg-picker
e.g.
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'datepickerfield',
label: 'Birthday',
name: 'birthday',
value: new Date(),
picker:{
yearFrom:2000,
yearTo:2020
}
}]
}]
});

Related

dojox.grid.EnhancedGrid losing focus

I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/

Datatables column visibility invisibility retained

I have these five fields ID, Name, Address, Phone and Fax displaying on the datatable. I am using Column Visibility Feature and by default, I am displaying first four columns. Suppose, I make Fax column Visible and Phone Column Invisible. Now, if I refresh the page, I see the same four columns again. My question is, can we Retain this visibility / invisibility ?
Thanks.
Refresh the page? Do you mean redraw the datatables page? (e.g. by clicking a column header to sort or clicking 'next' in the datatable?)
If so, are you using javascript/jquery to modify the visibility of your elements?
Doing so will work initially - but because datatables doesn't 'know' that jquery has modified the element, when it redraws the table (in a new order, or on a new page or whatever) it will revert your changes to whatever state it understands the table to be in.
To make your changes persist over redraws, you need to use the datatables api - so that datatables knows what you're doing. like this:
var mytable= $('#mytable').DataTable();
mytable.column( 0 ).visible( false );
however IF you want these changes to persist between refreshes of the webpage in the browser, then you need to set up sessions, or store these configurations in a database.
Then every time the page in requested, you check that data, and you can decide dynamically onload how to initialise your datatable:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ userHiddenColumn ] }
] } );
} );

Disable Validation in Dojo datetextbox

Is there a way to turn off or disable client site validation in dojo's form widget datetextbox. I would like users to be able to type the date in if they want and support most common date formats
Your question is not quite clear at "disable client site validation". If I understand you correct, you are asking to be able input any value manually and also be able to use date dropdown pickup.
There is an _isInvalidDate method you can try to overwrite like:
new DateTextBox({
value: "31-DEC-2009",
name: "oracle",
_isInvalidDate: function(){return false;}
onChange: function(v){ }
}, "oracle");
Since this is an internal(private) method, it is not suggested but may work.
There is another method you can feel free to overwrite to use your own validation Regexp in constrints:
validator: function(/*anything*/ value, /*__Constraints*/ constraints){

Limit rows on auto growing text area (Sencha Touch)

I have the following snippet of code for auto expanding the textarea in sencha touch. I need to cap it out at a set number of rows.
Any ideas?
http://www.senchafiddle.com/#Q9gjN
Wouldn't this be great if it were a nice, easy to use property.
At first I thought it would be the maxRows property but this is just the number of rows to display before the vertical scrollbar appears.
It may be that the only way would be a complicated solution such as this: http://www.codeproject.com/Articles/56392/How-to-Limit-the-Number-of-Lines-and-Characters-in
or
Limiting number of lines in textarea
EDIT: I needed to cap the number of rows in an address to 5 lines.
One approach could be to listen to the keyup event on the textareafield, check for the 'Enter' key and then revert back to previous input.
The approach I have taken is just to add validation to the model, which works great.
{ type: 'format', field: 'Address', message: 'Address cannot be more than 5 lines.', matcher: /^([^\r\n]{0,50}(\r?\n|$)){5}$/ }
The regex restricts saving a record to the store that has more than 5 lines, of more than 50 chars.

How to freeze/lock a single row in an ExtJs grid?

I want to be able to freeze/lock the last row in my grid so that it is always visible at the bottom while scrolling vertically, just like it is possible to do so for columns eg: http://docs.sencha.com/ext-js/4-1/#!/example/grid/locking-grid.html. Is there a way to do so in Ext?Id appreciate any help.
In the grid config, where you specify the plugin
features: [{
ftype: 'summary',
dock: 'top'
}]
I might came here in a huge delay, but after I couldn't find anything online I thought it could be good if I posted my findings..
As of extjs4.2 a config option named 'dock' does the job. So: dock: 'bottom' would be perfect for this, same goes for 'top'!