How to convert textfield to date picker ExtJs 3 (update on ExtJS 4)

• Tweet

• Tweet

Its really that simple with ExtJS 3 but in ExtJS 4 the case is otherwise.

Alright I will show you how this is done below, but first up I would like to tell you that there is a good book on ExtJS which I highly recommend.

This book is on the right hand side of this post. This book covers lot of basic to pro stuff and you will find it really handy.

So now that I have told you about a really good book its time to get back to the point.

Sencha has changed a lot of stuff from Extjs 3 to Extjs 4. So lets concentrate on Extjs 3 for the time being.

lets first of all see how to do this in ExtJS 3.x

say you have a text field as below

<input type="text" id="date_picker" />

I will add another property to the above textfield as shown below

<input type="text" id="date_picker" rel="dpicker" />
 

This is done just to get hold of this element and other similar one on the same page

ExtJS code looks like this

var textBoxes = Ext.DomQuery.select("input[rel=dpicker]");
Ext.each(textBoxes, function(item, id, all){
new Ext.form.DateField({
allowBlank : true,
applyTo: item,// most important bit, what essentially is happening here is probably the HTML code is getting replaced by the one created by ExtJS
format:'Y-m-d',
editable:false, // set this to true if user would like to edit the date directly
width:140
});
});

So the code above will work through all the input text fields where it is able to find “rel” attribute with value of “dpicker“

So the above code works (hopefully )

With Ext JS 4 applyTo property has been removed and as of writing I am not aware if similar thing can be without modifying some core Ext JS files which off course I would not like to do.

You must read this http://www.sencha.com/forum/showthread.php?158065-add-applyTo-to-Ext-4.1

For a container based content usage contentEl serves great. This config option is used to take an existing HTML element and place it in the layout element of a new ExtJS component.

I hope this helps

If there is an update that you are aware of, help the community by sharing.

Cheers

 

How to convert textfield to date picker ExtJs 3 (update on ExtJS 4), 4.0 out of 5 based on 1 rating