extjs Adding html to panel

After struggling to check why is my panel no reflecting,

i realised ive forgotten to call doLayout in the end.

To add a html to a extpanel,

Ext.getCmp("panelid").add( {

type: "panel",

html: "some html here"

});

Ext.getCmp("panelid").doLayout();

To remove all html content in a panel:

Ext.getCmp("panelid").removeAll();

//only works in 2.2.1 all later

ExtJS datefield

Here is an example of a date field in extjs:

Ext.onReady(function(){

fieldname = new Ext.form.DateField({

dateFormat: 'd-m-Y', //display format

value: "2010-01-01",

selectOnFocus:true,

minValue: '2010-01-01', //optional start limit

maxValue:'2010-12-31', // optional end limit

applyTo: 'frmMyDate',

});

});

MODx 2 Datetime field

Here is an example of a datetime field in modx 2 [revo] manager:

Ext.onReady(function(){

fieldname = new Ext.ux.form.DateTime({

dateFormat: 'd-m-Y', //display format

hiddenFormat:'Y-m-d H:i:s', //actual data format

value: "2010-01-01 01:00:00",

selectOnFocus:true,

applyTo: 'frmMyDate',

});

});

If you use xtype, its named "xdatetime"

ExtJS Get form input field handy tips

Getting the field by name:

var inputfield = target.getForm().findField("fieldname");

Hiding a field:

target.getForm().hideField(inputfield);

Showing a field

target.getForm().showField(inputfield);

ExtJS dateformat

To render the date format of a date column within a grid, we will need to setup the fields for the grid correctly in the config.

field: [{name: 'fieldname'}, {name:'createdon', type='date', dateFormat=''}]

dateFormat options:

• m/d/Y or Y-m-d H:i:s
• timestamp: Unixtime
• time: (TODO)

To render to your own date format on the grid:

columns: [ {id:'createdon',header: _("createdon"), width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('d M Y'), dataIndex: 'createdon'}

]

Reference on more dateformat:

• http://dev.sencha.com/deploy/ext/docs/output/Date.html

ExtJS

Extjs was extended from originally the open source version of YUI.

I find that, due to lack of easy google search on documentation / tutorial on extjs (or maybe because im not good at looking for extjs keywords), i find it quite difficult to pick it up.

I've found an example for jQuery lover:

jQuery examples:

jQuery("#my_field_id") or $("#my_field_id")

ExtJS:

Ext.get("my_field_id"); // return single element with id

Ext.select("#my_field_id div span a");// return array, alike jQuery selector

I've found a good basic tutorial here:

http://www.ajaxray.com/blog/2009/04/05/extjs-quick-start-guide-for-jquery-developers-javascript-howto/

extJS on Chrome vs Firefox

The new modx 2 seems to be using extJS as their manager panel javascript ui.

Its a heavy framework, but proof to be quite handy.

But running on firefox is quite a problem.

As the longer you are using it, you will realise the memory slowly hike up, and you might be ending up having the entire browser slower and slower.

While in chrome, it works pretty smooth the entire time. So far havent notice any significant memory hiking. And performance changes have never been felt.

And comparing both chrome and firefox performance, chrome works faster in rendering the ui.

Version compared:

Firefox 3.6

Chrome 6.0