PDA

View Full Version : Ext.ux.ItemSelector safari/konqi compatibility issues



paran01d
10 Oct 2007, 4:55 PM
Hi All,
New to the forums and Ext but must say I am most impressed, thanks for the great work. Ran into some compatibility issues with the ItemSelector under konqui and safari today and thought id share my fixes for the greater good.

First off I found that plying the FromData and ToData fields with more than a few records causes both browsers to segfault !!!, so I wouldn't recommend doing it.

Upon replacing my code to use a JsonStore (which was good because I want to sort my Selects) I was presented with some Dom Exceptions, specifically DOM Exception 7. After much googling I tracked this down to be the table rendering code that ItemSelector uses. Apparently safari and konqi don't like innerHTML to be called on a <tbody> node. Therefore I have replaced the table code at the top of ItemSelector onRender method with code I borrowed from the Form button rendering in Form.js :)..

I also added some flags that decide whether or not to draw the action icons, as some of the features I didn't need.

Here is a diff, let me know if its useful and in the correct format etc:



328a329,337
>
> /** @cfg {String} drawUp decide whether to draw iconUp. */
> /** @cfg {String} drawDown decide whether to draw iconDown. */
> /** @cfg {String} drawLeft decide whether to draw iconLeft. */
> /** @cfg {String} drawRight decide whether to draw iconRight. */
> /** @cfg {String} drawTop decide whether to draw iconTop. */
> /** @cfg {String} drawBottom decide whether to draw iconBottom. */
>
>
346a356,362
> drawUp : true,
> drawDown : true,
> drawLeft : true,
> drawRight : true,
> drawTop : true,
> drawBottom : true,
>
367,370c383,392
< var table = ct.createChild({tag: 'table', cellpadding: 0, cellspacing: 0});
< this.el = table;
< var tr = table.createChild({tag: 'tr'});
< if (tr.dom.tagName.toUpperCase() == 'TBODY') { tr = tr.child('tr'); }
---
> ct = Ext.get(ct);
>
> var tb = ct.createChild({cls:'x-itemselect-ct', cn: {
> cls:"x-itemselect",
> html:'<table cellspacing="0" cellpadding="0"><tbody><tr></tr></tbody></table>'
> }});
> this.el = tb;
> var tr = tb.dom.getElementsByTagName('tr')[0];
>
> var td = Ext.get(tr.appendChild(document.createElement('td')));
372d393
< var td = Ext.get(tr.dom.appendChild(document.createElement('td')));
377c398
< td = Ext.get(tr.dom.appendChild(document.createElement('td')));
---
> td = Ext.get(tr.appendChild(document.createElement('td')));
379,380c400,403
< this.toTopIcon = td.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
< this.toTopIcon.on('click', this.toTop, this);
---
> if ( this.drawTop ) {
> this.toTopIcon = td.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
> this.toTopIcon.on('click', this.toTop, this);
> }
382,383c405,408
< this.upIcon = td.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
< this.upIcon.on('click', this.up, this);
---
> if ( this.drawUp ) {
> this.upIcon = td.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
> this.upIcon.on('click', this.up, this);
> }
385,386c410,413
< this.addIcon = td.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
< this.addIcon.on('click', this.fromTo, this);
---
> if ( this.drawRight ) {
> this.addIcon = td.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
> this.addIcon.on('click', this.fromTo, this);
> }
388,389c415,418
< this.removeIcon = td.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
< this.removeIcon.on('click', this.toFrom, this);
---
> if ( this.drawLeft ) {
> this.removeIcon = td.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
> this.removeIcon.on('click', this.toFrom, this);
> }
391,392c420,423
< this.downIcon = td.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
< this.downIcon.on('click', this.down, this);
---
> if ( this.drawDown ) {
> this.downIcon = td.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
> this.downIcon.on('click', this.down, this);
> }
394,395c425,428
< this.toBottomIcon = td.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
< this.toBottomIcon.on('click', this.toBottom, this);
---
> if ( this.drawBottom ) {
> this.toBottomIcon = td.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
> this.toBottomIcon.on('click', this.toBottom, this);
> }
397c430
< var td = Ext.get(tr.dom.appendChild(document.createElement('td')));
---
> var td = Ext.get(tr.appendChild(document.createElement('td')));
thanks for your time

paran01d
Developer Grox PTY LTD

p.s. Toby I'm from Sydney too if your at a perl mongers meeting any time ill buy you a beer for your trouble :)

tjstuart
10 Oct 2007, 7:42 PM
paran01d,

Thanks for that. I'll add your fixes and enhancements to the next release.

PS. Haven't touched perl for many years! Still remember all that regex stuff though which has proven very helpful recently.

Cheers

paran01d
11 Oct 2007, 4:26 PM
no worries mate. thanks for including them.

paran01d
Developer Grox PTY LTD