Tuesday, June 9, 2009

ExtJS 2.0 development issues

Ext JS 2.0 development issues

  1. Increase Tab Strip size for Tab Panel

Workaround: -

Use tabStripInnerStyle config in the Tab panel. This is not a part of functionality ext js provide. So, I had to override few of its components methods to make this happen. Here is the override for it

/*

* Override to set Tab Strip Size

*/

Ext.TabPanel.override({

tabStripInnerStyle : '',

onRender : function(ct, position){

Ext.TabPanel.superclass.onRender.call(this, ct, position);

if(this.plain){

var pos = this.tabPosition == 'top' ? 'header' : 'footer';

this[pos].addClass('x-tab-panel-'+pos+'-plain');

}

var st = this[this.stripTarget];

this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{

tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});

this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'});

this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});

this.strip.createChild({cls:'x-clear'});

this.body.addClass('x-tab-panel-body-'+this.tabPosition);

if(!this.itemTpl){

var tt = new Ext.Template(

'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',

'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',

'<span style="{tabStripInnerStyle}" class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',

'</em></a></li>'

);// *** changed

tt.disableFormats = true;

tt.compile();

Ext.TabPanel.prototype.itemTpl = tt;

}

this.items.each(this.initTab, this);

},

// private

initTab : function(item, index){

var before = this.strip.dom.childNodes[index];

var cls = item.closable ? 'x-tab-strip-closable' : '';

if(item.disabled){

cls += ' x-item-disabled';

}

if(item.iconCls){

cls += ' x-tab-with-icon';

}

if(item.tabCls){

cls += ' ' + item.tabCls;

}

var p = {

id: this.id + this.idDelimiter + item.getItemId(),

text: item.title,

cls: cls,

iconCls: item.iconCls || '',

tabStripInnerStyle : this.tabStripInnerStyle // *** added

};

var el = before ?

this.itemTpl.insertBefore(before, p) :

this.itemTpl.append(this.strip, p);

Ext.fly(el).addClassOnOver('x-tab-strip-over');

if(item.tabTip){

Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;

}

item.on('disable', this.onItemDisabled, this);

item.on('enable', this.onItemEnabled, this);

item.on('titlechange', this.onItemTitleChanged, this);

item.on('beforeshow', this.onBeforeShowItem, this);

}

});

And then use the config as:-

tabStripInnerStyle “padding:5px”

Reference: -

http://extjs.com/forum/showthread.php?t=52131


  1. Paging toolbar don’t get updated if you remove a record from grid store

Workaround: -

This is again not a part of core functionality provided by Ext JS api. I created following override to make this happen.

Ext.data.Store.override({

removeCount :0,

remove : function(record){

var index = this.data.indexOf(record);

this.data.removeAt(index);

if(this.pruneModifiedRecords){

this.modified.remove(record);

}

if(this.snapshot){

this.snapshot.remove(record);

}

this.fireEvent("remove", this, record, index);

this.removeCount++;

},

getTotalCount : function(){

return this.totalLength ? (this.totalLength-this.removeCount): 0;

},

load : function(options){

options = options || {};

this.removeCount = 0;

if(this.fireEvent("beforeload", this, options) !== false){

this.storeOptions(options);

var p = Ext.apply(options.params || {}, this.baseParams);

if(this.sortInfo && this.remoteSort){

var pn = this.paramNames;

p[pn["sort"]] = this.sortInfo.field;

p[pn["dir"]] = this.sortInfo.direction;

}

this.proxy.load(p, this.reader, this.loadRecords, this, options);

return true;

} else {

return false;

}

},

});

Reference: -

http://extjs.com/forum/showthread.php?t=51790


  1. Visible row body in Grid Panel

Workaround: -

By default single row body is possible in each grid row, which can be show or hided by using enableRowBody config for grid view. Thus there’s only one <tr> element(row body) present by default. To add another <tr> element which is always visible to user, few methods from GridView class had to be overrided.

Here is the code for it:-

/**

* @cfg {Boolean} enableVisibleRowBody True to add a second TR element per row that can be used to provide a visible row body along with

* hidable row body (third tr element) that spans beneath the data row. - Author : ritesh

*/

Ext.grid.GridView.override({

initTemplates : function(){

var ts = this.templates || {};

if(!ts.master){

ts.master = new Ext.Template(

'<div class="x-grid3" hidefocus="true">',

'<div class="x-grid3-viewport">',

'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',

'<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',

"</div>",

'<div class="x-grid3-resize-marker">&#160;</div>',

'<div class="x-grid3-resize-proxy">&#160;</div>',

"</div>"

);

}

if(!ts.header){

ts.header = new Ext.Template(

'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',

'<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',

"</table>"

);

}

if(!ts.hcell){

ts.hcell = new Ext.Template(

'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',

'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',

"</div></td>"

);

}

if(!ts.body){

ts.body = new Ext.Template('{rows}');

}

if(!ts.row){

ts.row = new Ext.Template(

'<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',

'<tbody><tr>{cells}</tr>',

(this.enableVisibleRowBody ? '<tr id="testingrowbody"><td colspan="{cols}" >{visibleBody}</td></tr>' : ''),

(this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),

'</tbody></table></div>'

);

}

if(!ts.cell){

ts.cell = new Ext.Template(

'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',

'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',

"</td>"

);

}

for(var k in ts){

var t = ts[k];

if(t && typeof t.compile == 'function' && !t.compiled){

t.disableFormats = true;

t.compile();

}

}

this.templates = ts;

this.tdClass = 'x-grid3-cell';

this.cellSelector = 'td.x-grid3-cell';

this.hdCls = 'x-grid3-hd';

this.rowSelector = 'div.x-grid3-row';

this.colRe = new RegExp("x-grid3-td-([^\\s]+)", "");

}

});

Now you can set enableVisibleRowBody along with enableRowBody to have another visible row for each grid row.

You will also have to set visibleBody value similar to body in getRowClass method ( this method need to override in case of expander )

  1. Text Field getting validated for blank space

Workaround: -

Use undocumented stripCharsRe config in textfield as –

stripCharsRe:/(^\s+$)/g

Reference: -

http://extjs.com/forum/showthread.php?t=54225

  1. Grid doesn’t show the mask while loading

Workaround: -

Use the following listener in the grid config :-

listeners :{

render : function(comp){

comp.getStore().load.defer(20,comp.getStore());

}

}

Reference: -

http://extjs.com/forum/showthread.php?t=50130

  1. Combobox inner list not aligning list items propertly

Workaround: -

This was a bug in Ext API. The solution is the following override :-

Ext.Component.override({

initState : function(config){

if(Ext.state.Manager){

var id = this.getStateId();

if(id){

var state = Ext.state.Manager.get(id);

if(state){

if(this.fireEvent('beforestaterestore', this, state) !== false){

this.applyState(state);

this.fireEvent('staterestore', this, state);

}

}

}

}

},

saveState : function(){

if(Ext.state.Manager){

var id = this.getStateId();

if(id){

var state = this.getState();

if(this.fireEvent('beforestatesave', this, state) !== false){

Ext.state.Manager.set(id, state);

this.fireEvent('statesave', this, state);

}

}

}

},

getStateId : function(){

return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);

}

});

Reference: -

http://extjs.com/forum/showthread.php?p=225278#post225278

  1. Abort ajax request from data store

Workaround: -

Use Ext.Ajax.abort(store.proxy.activeRequest);

Reference: -

http://extjs.com/forum/showthread.php?t=46514

  1. Combo box problem with getValues() and getValue()

Workaround: -

Use hiddenId config to set hidden form field and then use the same to call getValues()

Reference: -

http://extjs.com/forum/showthread.php?t=41522

  1. Optimize loading of my ExtJS Appliction

Workaround: -

  1. JSMin
  2. GZip
  3. Concatenated JS, CSS files into single one
  4. Use client side caching i.e. set EXPIRE header to all static content
  5. Use server side caching for dynamic pages
  6. Use CDN ifpossible
  7. Use CSS Sprites wherever possible
  8. Optimize images i.e. reduce colors, use PNG
  9. Lazy loading wherever possible

Reference: -

http://extjs.com/forum/showthread.php?t=50816

  1. Show tool tips for every item of Ext ComboBox

Workaround: -

Use :-

tpl: '<tpl for="."><div class="x-combo-list-item" ext:qtip="{tip}">{text}</div></tpl>'

Reference: -

http://extjs.com/forum/showthread.php?t=49612

  1. Change Font size of Combo box list

Workaround: -

Use :-

listClass: ‘my-combo-lst’ in Combo box config.

And put following line in your css file :-

.my-combo-lst .x-combo-list-item{font-size:10px;}

Reference: -

http://extjs.com/forum/showthread.php?t=50144

  1. Change emptyMsg of a bottom toolbar

Workaround: -

Use :-

grid.getBottomToolbar().displayEl.update('');

Reference: -

http://extjs.com/forum/showthread.php?t=49158


No comments:

Post a Comment

Was the information useful?

Followers