1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    16
    Vote Rating
    0
    sormy is on a distinguished road

      0  

    Default [3.x] Ext.ux.ItemSelectorEx

    [3.x] Ext.ux.ItemSelectorEx


    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.
    Attached Images
    Attached Files

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13
    Vote Rating
    0
    mathos is on a distinguished road

      0  

    Default


    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!!!!!

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    1
    Vote Rating
    0
    valani is on a distinguished road

      0  

    Default Great implementation

    Great implementation


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

  4. #4
    Sencha User Cédric VIDREQUIN's Avatar
    Join Date
    May 2011
    Posts
    12
    Vote Rating
    0
    Cédric VIDREQUIN is on a distinguished road

      0  

    Question Question about setValue()

    Question about setValue()


    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 ?

  5. #5
    Sencha User Cédric VIDREQUIN's Avatar
    Join Date
    May 2011
    Posts
    12
    Vote Rating
    0
    Cédric VIDREQUIN is on a distinguished road

      0  

    Lightbulb


    I found a way to set the expected values :
    1) I added an 'id' property to the itemSelector object :
    Code:
    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 :
    Code:
    Ext.getCmp('mySelector').setValue('toto,tata, tutu, titi');

  6. #6
    Sencha User Cédric VIDREQUIN's Avatar
    Join Date
    May 2011
    Posts
    12
    Vote Rating
    0
    Cédric VIDREQUIN is on a distinguished road

      0  

    Question Trouble with IE8

    Trouble with IE8


    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 :
    Code:
    // 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 ...
    Last edited by Cédric VIDREQUIN; 25 Oct 2011 at 11:57 PM. Reason: I found the solution by myself

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    17
    Vote Rating
    0
    trvd1707 is on a distinguished road

      0  

    Default


    This extension is great, but I'm also having a problem in IE6. It fails on the onRender function:
    Code:
        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.

    Code:
        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

  8. #8
    Sencha User
    Join Date
    Jul 2009
    Posts
    16
    Vote Rating
    0
    sormy is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    17
    Vote Rating
    0
    trvd1707 is on a distinguished road

      0  

    Default


    Here is the example. I'm using ExtJS 3.2.1

    Code:
    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:
    Code:
    <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>
    Last edited by trvd1707; 1 Nov 2011 at 11:23 AM. Reason: typo on buttonAlign

  10. #10
    Sencha User
    Join Date
    Jun 2011
    Posts
    17
    Vote Rating
    0
    trvd1707 is on a distinguished road

      0  

    Default


    If I add the following to ext-all-debug.js under line 27578:
    Code:
    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.