[3.x] Ext.ux.ItemSelectorEx

[sormy]

I have created Ext.ux.ItemSelector analog but with better rendering layout and it is working better as field. Ext.ux.ItemSelectorEx support anchor layout, one store with available variants, value describe selected items, filters for both sides and key navigation.

[mathos]

This is VERY NICE !!!!
I did a few modifications, icons, and JSON store for not only the From but also the To selector.
Also I used multiSelect: true instead of singleSelect: true, and I have done some coloring (light-red-ish BG on FROM and light-green-ish BG on To listview's) and a colored border around it. The icons were different.

This was, other than the modifications, a real timesaver and just provided almost what I needed.

THANKS!!!!!

[valani]

Thanks for posting this. It worked right away in my complex panel setup.

[Cédric VIDREQUIN]

Hello,

I discovered this pluggin and it is great !

How can I programatically set the selected items into my script ?

I tried to use setValue() but it is not defined ?

[Cédric VIDREQUIN]

I found a way to set the expected values :
1) I added an 'id' property to the itemSelector object :

mySelector = new Ext.form.FormPanel({
         title: 'Title',
         items:[{
          id: 'mySelector',
       xtype: "itemselectorex",
       name: 'itemselector', 
       imagesDir: getServerURL() + '/resources/images/', 
       anchor: '90%',
       store: myListStore,
       valueField: 'id', 
       displayField: 'title'
      }]
     });

2) I use the id to find the expected component :

Ext.getCmp('mySelector').setValue('toto,tata, tutu, titi');

[Cédric VIDREQUIN]

Hello all,

I have another problem, this pluggin words perfect with FF but it fails with IE8

Erreur d'exécution inconnue (~ "Unknown execution error" in EN)
extensible-all-debug.js line 651 character 13

Here is a snippets of the code arround the given line :

// This heinous override is required to fix IE9's removal of createContextualFragment.
// Unfortunately since DomHelper is a singleton there's not much of a way around it.
Ext.apply(Ext.DomHelper,
function(){
 (...)
    pub = {
(...)
        /**
         * Creates new DOM element(s) and overwrites the contents of el with them.
         * @param {Mixed} el The context element
         * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
         * @param {Boolean} returnElement (optional) true to return a Ext.Element
         * @return {HTMLElement/Ext.Element} The new node
         */
        overwrite : function(el, o, returnElement){
            el = Ext.getDom(el);
            el.innerHTML = createHtml(o);
          return returnElement ? Ext.get(el.firstChild) : el.firstChild;
        },        createHtml : createHtml
    };
    return pub;
}());

It seems that the "createHtml()" function works but that the result cannot be put into el.innerHTML ...

Does anyone have an idea please ?


EDIT : I found the reason why it failed by myself ! I was adding the ItemSelector into a FormPanel like in the example ... but this FormPanel wass added into a form ... and a form into a form is bad !

Maybe it will help someone else ...

[trvd1707]

This extension is great, but I'm also having a problem in IE6. It fails on the onRender function:

    onRender: function()
    {
        Ext.ux.form.ItemSelectorEx.superclass.onRender.apply(this, arguments);            
        
        var hiddenTag = {tag: "input", type: "hidden", value: this.value || "", name: this.name || Ext.id()};
        this.hiddenField = this.el.createChild(hiddenTag);
        
        this.cmp.on('render', this.onValueSetReady, this);
        
        this.on('render', function(){
            this.cmp.setWidth(this.getWidth());
            this.cmp.setHeight(this.getHeight());
            this.cmp.render(this.el);// <==== this line fails
            
            this.el.on("click", this.toolsClickHandler, this);
            this.on("resize", function(){
                this.cmp.setWidth(this.getWidth());
                this.cmp.setHeight(this.getHeight());
            }, this);     
            
            this.initDD();
        }, this);
    },

When Ext is rendering the this.el, it calls this function in ext-all-debug.js library with w==0, which makes sw on line 27580 equals to a negative number so invalid.

    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 + 'px';
                hd.style.width = sw + 'px';
            }else{

Any one can help with a fix?

Thanks,
Teresa

[sormy]

I have no problems with IE6.
Can you provide simple example how to repeat problem?

[trvd1707]

Here is the example. I'm using ExtJS 3.2.1

Ext.onReady(function (){    Ext.ux.form.ItemSelectorEx.prototype.imagesDir = './images';
    alert("starting itemSelectorEx test");
    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',
            autowidth:true,
            buttonAlign:'center',
            border: false,
            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] | 0;
                             selectedUsers[i]=myArray[index-1][1];
                         }


                         alert("Selected USERS:"+ selectedUsers);
                         
                         shareWindow.close();
                     }
                 }
             }],
            items:[{xtype:'label',text:"Select users"}
            ,{
                    //fieldLabel: 'Item Selector',
                    xtype: "itemselectorex",
                    id:'list-users',
                    store: myArray,
                    width:250,
                    name: 'itemselector1'
                }]
        };


    var shareWindow = new Ext.Window({
        title: 'Share report:',
        autoHeight:true,
        width:300,
        items:shareReportCard
    });


    shareWindow.show();


});

The html file I used:

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reporting Portal</title>


    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="css/ux-all.css" />
    <link rel="stylesheet" type="text/css" id="style" href="css/xtheme-gray.css" />
    <!-- overrides to base library -->
    <link rel="stylesheet" type="text/css" href="css/menus.css" />
    <link rel="stylesheet" type="text/css" href="css/local.css" />
    <link rel="stylesheet" type="text/css" href="css/Portal.css" />
    <link rel="stylesheet" type="text/css" href="css/GroupTab.css" />
    
    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="css/sample.css" />
    <link rel="stylesheet" type="text/css" href="css/multigrid.css" />
    <link rel="stylesheet" type="text/css" href="css/MultiSelect.css" />
    <link rel="stylesheet" type="text/css" href="css/Ext.ux.form.ItemSelectorEx.css" />
    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="./lib/adapter/ext-base-debug.js"></script>


    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="./lib/ext-all-debug.js"></script>
        
    <!-- extensions -->
    <script type="text/javascript" src="lib/ux/MultiSelect.js"></script>
    <script type="text/javascript" src="lib/ux/Ext.ux.form.ItemSelectorEx.js"></script>    
     
          
    <!-- Components -->
    <script type="text/javascript">
       Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
    </script>
        
    <script type="text/javascript" src="testItemSelectorEx.js"></script>


</head>
<body>    
<h1> This is Index 2 </h1>
</body>
</html>

[trvd1707]

If I add the following to ext-all-debug.js under line 27578:

if (Ext.isIE) {
     sw = sw>0?sw:0;
}

It works but the sizing calculation is not right. Resizing the window will eventually show the itemSelectorEx component.