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

2. 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

3. 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 )

4. 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

5. 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

6. 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

7. Abort ajax request from data store

Workaround: -

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

Reference: -

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

8. 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

9. 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

10. 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

11. 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

12. Change emptyMsg of a bottom toolbar

Workaround: -

Use :-

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

Reference: -

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

Selenium IDE Issues with ExtJS

Selenium IDE issues with ExtJS application

 

 

ExtJS automatically creates id’s for components if not provided by the developer. This id changes every time the component is created, so will not be the same for every user visit to the same page. We should define id explicitly for every ExtJS components which need be tested using Selenium.

 

Explicitly mention id config for components with which user can interact. e.g. form components, hyperlinks, images, buttons etc.

 

Some of the issue which you may encounter while testing your application with Selenium are as follows:-

 

 

1. Button component

 

Problem: Selenum IDE cannot record the exact button ID of the button component.

 

Solution:

1. Find the id of the button component manually (using firebug) and replace the default captured button id with it
2. We can also use xpath expression as target for this as – “//table[@id='buttonID']//button”

 

 

For this to work explicit id config must be provided for each required button component.

 

 

 

2. TabPanel component

 

Problem: Tab strip not detected properly in record mode.

 

 

Solution:

 

//div[@id='tabpanel_id']//ul/li[2]

Will select the second tab from the tab panel

 

Or if you are using tabpanel inside tabpane

 

//div[@id='outer_tabpanel_id']//div[@class='x-tab-strip-wrap'][1]/ul/li[2] will select the second tab for the outside tab panel.

 

3. Combo Box component

 

Problem: Selenium can not detect dropdown icon and list items

 

Solution: Need to override initList method of combo to modify following line to include ids in the list:-

 

this.innerList = this.list.createChild({cls:cls+'-inner', id:this.id+'-list'});

 

           

Record the test case for combo box now. The list item can be identified as: -

 

//div[@id='comboId-list']/div[2]

 

      Hear div[2] indicates second item in the list.

 

 

 

4. Grid Component - Row identification

 

Problem: Grid rows are not given unique identification by default. Thus Selenium cannot record the user inputs on grid row properly.

 

Solution: Use click command on following target elements

 

1. //div[@id=’GRID_ID']//div[@class='x-grid3-body']/div[2]

 

This will locate second row of the grid

 

 

2. //div[@id='GRID_ID']//div[@class='x-grid3-body']/div[2]//div[@class='x-grid3-row-expander']

 

This will locate the expander element for the second row of the grid

 

 

5. Window component

 

Problem: Close button id is auto generated

 

Solution: We can use xpath expression as //div[@id='windowId']//div[@class='x-tool x-tool-close']

 

 

6. Grid Component - Store loading

 

Problem: Determine when grid has finished loading its data.

 

Solution: Use command – waitForElementNotPresent

               and Target - //div[@id='gridId']//div[@class= 'ext-el-mask']

This works only when loadMask config of grid is set to true.

 

 

 

 

7. Date Field Component

 

Problem: Selenium IDE doesn’t detect user inputs on date field component properly

 

Solution: Use click commands on following html elements to simulate user click on Date field.

 

1. //input[@id='DATEFIELD_ID']/../img

 

2. //div[@class='x-layer x-menu x-menu-plain x-date-menu'][@style='position: absolute; z-index: 15000; visibility: visible; left: 587px; top: 105px;']//em[span=16]

 

 

 

 

 

 

 

Reference:-

 

http://seleniumhq.org/projects/core/reference.html

http://www.w3schools.com/XPath/xpath_syntax.asp