[3.x] Ext.ux.ItemSelectorEx

[trvd1707]

BTW I removed all the extra css from index.html, leaving just the bare minimum for the component to work and I still get the error.
Thanks for any help on that. I would like to be able to deploy without changes to ext-all.js if possible.

[sormy]

I have no errors in IE6 on Ext 3.3.1
but I have error in resize when decreasing width of window.
It seems like IE6 HBOX layout problem. I have no idea how to fix it. I recommend you to try found solution for IE6 HBOX on this forum.

[trvd1707]

I went step by step, putting some alert around the code and I got to the problem. It is the layout:'fit' that is causing the code to crash when it is rendering the list views on the itemSelectorEx component.

For now,as a workaround, everywhere you have layout:'fit' I replaced by layout:Ext.isIE?'auto':'fit'.

This allows the list views to render in IE, but they don't have a vertical scroll bar.

Any idea on how to fix it?

Thanks,
Teresa

[sormy]

ExtJS doesn't have auto layout.
There are problems with vbox/hbox layouts in IE6 with ExtJS 3.3.1 (incorrect absolute positioning)
But it's not fatal, because problem occurred only if you decrease size of window (in ExtJS 3.3.1).
Did you try ExtJS 3.3.1 or ExtJS 3.4.0 ?
If you product will work on closed network i recommend you to install google chrome frame for very conservative users.

[trvd1707]

I got the 'auto' layout from the documentation. It's the default layout. Unfortunately I have no choice on the version of ExtJS to use or the browser. My client mandates ExtJS 3.2.1 and browser IE6

[sormy]

Your example on steroids:
window size decreasing not working in IE6

    Ext.override(Ext.list.ListView, {
        // private
        onResize : function(w, h){
            var bd = this.innerBody.dom;
            var hd = this.innerHd.dom;
            if(!bd){
                return;
            }
            var bdp = bd.parentNode;
            if(Ext.isNumber(w)){
                var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
                if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
                     bd.style.width = (sw < 0 ? 0 : sw) + 'px'; // patch
                     hd.style.width = (sw < 0 ? 0 : sw) + 'px'; // patch
                }else{
                    bd.style.width = w + 'px';
                    hd.style.width = w + 'px';
                    setTimeout(function(){
                        if((bdp.offsetWidth - bdp.clientWidth) > 10){
                            bd.style.width = sw + 'px';
                            hd.style.width = sw + 'px';
                        }
                    }, 10);
                }
            }
            if(Ext.isNumber(h)){
                bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
            }
        }
    });
    
    Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
       
    Ext.onReady(function (){    
        Ext.ux.form.ItemSelectorEx.prototype.imagesDir = './images';
        
        var myArray = [
            [1, 'value1'],
            [2, 'value2'],
            [3, 'value3'],
            [4, 'value4'],
            [5, 'value5'],
            [6, 'value6'],
            [7, 'value7'],
            [8, 'value8'],
            [9, 'value9'],
            [10, 'value10'],
            [11, 'value11'],
            [12, 'value12']
        ];
        
        var shareReportCard = {
            xtype: 'form',
            buttonAlign: 'center',
            labelAlign: 'top',
            border: false,
            padding: 10,
            buttons:[
                {
                    xtype:'button',
                    text:"OK",
                    listeners:{
                         click: function(b,e){                         
                             var list = Ext.getCmp('list-users').getValue();
                             var selectedUsers = list.split(',');
                             var totalSelected = selectedUsers.length;
                             for (var i=0; i<totalSelected; ++i){
                                 var index = selectedUsers[i] || 1;
                                 selectedUsers[i]=myArray[index-1][1];
                             }


                             alert("Selected USERS:"+ selectedUsers);
                             
                             shareWindow.close();
                         }
                    }
                }
            ],
            items: [
                {
                    fieldLabel: 'Item Selector',
                    xtype: "itemselectorex",
                    id:'list-users',
                    store: myArray,
                    anchor: '100% 100%',
                    name: 'itemselector1'
                }
            ]
        };


        var shareWindow = new Ext.Window({
            title: 'Share report:',
            layout: 'fit',
            width: 400,
            height: 400,
            resizable: !Ext.isIE,
            items:shareReportCard
        });


        shareWindow.show();
    }); 

[trvd1707]

Thank you! It worked. I didn't know we could override Ext methods like this. And it is even showing the scroll bar on the list view now. I have to make the layout:'fit' on the window.

[AnuDhiman]

As the page loads..all the controls except Itemselector displays..
& when i set the compatibility icon in address bar..it gets shown..
dont know why this is happening...


please help

Thanx