Ext.ux.Multiselect/ItemSelector [v2.2]

[dHANEESH]

Hi all,

i just want to one thing that how can we implement "Select All" option in multiselect.
Please help...

Thanks in advance
dhaneesh

[NoahK17]

So have we figured out how to "keep selections" as you click around WITHOUT holding down CTRL or SHIFT yet?

Does anyone have a simple override? I can't believe this wasn't a config toggle from the beginning.

[talshadar]

****SOLVED****

I had a spelling error when including the css (MultiSelect.css instead of Multiselect.css) and that fixed it.

****SOLVED****


I'm implementing the itemselector for the selection of users and having used it before I know there's a solution to the problem I'm having but I can't see it. I create the form, create the itemselector, then add it to the form and render the form - exactly as your example has it. But no matter what I do - it stacks the 2 selection boxes vertical instead of beside each other. It doesn't matter what size I make the form. Any suggestions would be awesome.

frmActionItem = new Ext.form.Form({id:"actionItemForm",width:1100, labelWidth:100, style:"margin:10px;"});
                
frmActionItem.column({width:1100,style:"margin-left:10px;", clear:false});

    var itemSelector = new Ext.ux.ItemSelector({
         
         name              : 'itemselector',
         fieldLabel        : 'ItemSelector',
         dataFields        : ['code', 'desc'],
         fromData          : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
         toData            : [['6', 'Six']],
         msWidth           : 150,
         msHeight          : 150,
         valueField        : 'code',
         displayField      : 'desc',
         drawLeftIcon      : true,
         drawRightIcon     : true,
         imagePath         : "images",
         enableClear       : true         
    });

        frmActionItem.fieldset(
            {legend:"Action Item:", id:"fsActionItem"},
            itemSelector
        );

        frmActionItem.render(actionItemTab.el);

[talshadar]

A weird problem. I have been testing the ItemSelector in firefox and everything works like a dream. I open the same page in IE - and though the selectors show up - there is no data. There are no errors, just no data. Any suggestions? See me above post for code example. With a change - using data stores instead of hard coded data.

         fromStore         : dsEmailUserList,
         toStore           : dsEmailRecipients,

        dsEmailUserList = new Ext.ux.DynamicJsonStore({});
        dsEmailRecipients = new Ext.ux.DynamicJsonStore({});

[NoahK17]

Hi all,

i just want to one thing that how can we implement "Select All" option in multiselect.
Please help...

Thanks in advance
dhaneesh

Yes, please. What's the easiest way to "select all"?

[talshadar]

I'm posting the code I'm using. The issue is that firefox displays everything without a problem but in IE 6 the data isn't loading. I don't get any errors, it just doesn't load anything. I'm hoping I'm just missing something stupid.

Another really odd thing - the multiselect works fine - I've replaced the itemSelect with the multiselect and it works without issue. Weird.

    var dsEmailRecipients, dsEmailUserList;

        dsEmailUserList = new Ext.ux.DynamicJsonStore({});
        dsEmailRecipients = new Ext.ux.DynamicJsonStore({});

        frmActionItem = new Ext.form.Form({id:"actionItemForm",width:600, labelWidth:100});

    itemSelector = new Ext.ux.ItemSelector({
         name              : 'itemselector',
         fieldLabel        : 'Email Recipients',
         fromStore         : dsEmailUserList,
         toStore           : dsEmailRecipients,
         dataFields        : ['Name', 'EmailAddress'],
         valueField        : 'EmailAddress',
         displayField      : 'Name',
         msWidth           : 150,
         msHeight          : 150,
         drawLeftIcon      : true,
         drawRightIcon     : true,
         drawUpIcon        : false,
         drawDownIcon        : false,
         drawTopIcon        : false,
         drawBotIcon        : false,
         imagePath         : "images",
         enableClear       : true,
         delimiter         : "|"
    });


        frmActionItem.fieldset(
            {id:"fsEmailRecipients", hideMode:"visibility", hideLabel:true},
            itemSelector
            //btnEmailTest
        );

        ActionsList_CPC.ActionsListEdit.GetEmailRecipients(getEmailRecipients_Callback, Ext.util.errorHandler);

The ActionsList_CPC.ActionsListEdit.GetEmailRecipients is a CSharp function that returns a datatable of results to the getEmailRecipients_Callback function.

    function getEmailRecipients_Callback(response)
    {
        if (response.rows)
        {
            dsEmailUserList.loadData(response.rows);            
        }
    }

[tjstuart]

Are you 100% certain that IE is not loading the data? Try alerting some store elements after load. I recall problems with IE where you need to set zoom=1 on outer containers if things aren't displaying.

Also, are you using the the Ext1.x version?

[ndtreviv]

I'm getting the same issue. If I load the Multiselect as part of a fieldset, which is in turn part of a form into an Ext JS window, there is a load order problem with IE which means that the Store records never get rendered into the multiselect box GUI element.

I've tracked this through the code and found that it goes all the way back into the DataView element that part of the Multiselect setup extends from.

I've found that if I do a render listener, and then set a timeout of about 2-3 seconds, setting the store at the end of the timeout, the records get rendered.

I am finding that this is also an issue with ComoBox.

Here's some test-harness code for you to prove that it is reproducible:

wintest.html:

<html>
<head>
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="expires" content="Mon, 19 Jan 2009 10:7:44 GMT">
<style type='text/css'>
    @import url("/uib/widgets/CategoryManager/resources/css/ext-all.css");
    @import url("/uib/widgets/CategoryManager/resources/css/xtheme-uib.css");
    @import url("/uib/widgets/CategoryManager/styles/Multiselect.css");
    @import url("/uib/widgets/CategoryManager/styles/styles.css");
</style>

</style>
    <script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/ext/ext-base.js"></script>
     <script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/ext/ext-all-debug.js"></script>
    <script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/Portal.js"></script>
     <script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/DDView.js"></script>
     <script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/ItemSelector.js"></script>
     <script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/MultiSelect.js"></script>
<script language="javascript" type="text/javascript">
    Ext.ns("UIB.widget.CategoryManager");
        
    var doEdit = function(){
        UIB.widget.CategoryManager.EditDetailsWindow = new Ext.Window({
               title: 'Edit Category Details',
            width:700,
            height:500,
            shadow:true,
            autoScroll: true,
            modal : true,
            plain : true,
            autoLoad: 'winnode_edit.html?id=701843774741116732&ct=UIB.widget.CategoryManager.EditDetailsWindow&_t=' + new Date(),
            scripts: true,
            x: 0,
            y: 0
           });
         UIB.widget.CategoryManager.EditDetailsWindow.show();
    }

</script>
</head>
<body>
    <div id='cat-man-ct'><input type='button' value='Do Edit' onclick='doEdit()'></div>
</body>
</html> 

winnode_edit.html:

<script language="javascript" type="text/javascript">
    Ext.ns('UIB');
    Ext.ns('UIB.widget');
    Ext.ns('UIB.widget.CategoryManager');

    UIB.widget.CategoryManager.DatabaseListStore = new Ext.data.SimpleStore({
        data : [['One', 'One'],['Two', 'Two'],['Three', 'Three']],
        fields: ['id', 'name'],
        id: 0
    })
    
    UIB.widget.CategoryManager.EditCatForm = new Ext.form.FormPanel({
        url: 'node_update.jsp',
        shim: 'false',
        bodyStyle: {padding:5},
        bodyBorder: false,
        items: [
            new Ext.form.FieldSet({
                bodyStyle: {marginBottom: 150},
                title: "Search Details",
                items: [
                    new Ext.form.TextField({
                        name:"name",
                        fieldLabel: "Search Name",
                        allowBlank: false,
                        value: "Test"
                    }),
                    new Ext.form.ComboBox({
                        name:"language",
                        fieldLabel: "Language",
                        store: new Ext.data.SimpleStore({
                            data: [['English','English'],['French', 'French']],
                            id: 0,
                            fields: ['id', 'name']
                        }),
                        displayField: 'name',
                        mode: 'local',
                        triggerAction: 'all',
                        editable: false,
                        value: "English"
                    }),
                    new Ext.form.NumberField({
                        name:"drenumresults",
                        fieldLabel: "Results per page",
                        allowBlank: false,
                        value: 10,
                        maxLength: 3,
                        width: 30,
                        value: 10
                    }),
                    new Ext.form.NumberField({
                        name:"dreminscore",
                        fieldLabel: "Minimum relevance",
                        allowBlank: false,
                        value: 40,
                        maxLength: 3,
                        width: 30,
                        value: 40
                    }),
                    new Ext.ux.Multiselect({
                        name:  'databases',
                        fieldLabel:  'Databases',
                        store: UIB.widget.CategoryManager.DatabaseListStore,
                        valueField:  'id',
                        displayField:  'name',
                        width:150,
                        height:150,
                        allowBlank:  true,
                        listeners: {
                            scope: this,
                            render: function(c){
                                //Uncomment out commented code below to see store load working:
                                //setTimeout(function(){
                                    var d = 'One,Two';
                                //    Ext.getCmp(c.id).view.setStore(UIB.widget.CategoryManager.DatabaseListStore);
                                    c.setValue(d);                                
                                //}, 3000);
                            }
                        }
                    }),
                    new Ext.form.Hidden({
                        name: "catid",
                        value: "701843774741116732"
                    }),
                    new Ext.form.Hidden({
                        name: "type",
                        value: "agt"
                    })
                ]
            })
        ]
    });

    UIB.widget.CategoryManager.EditDetailsWindow.add(UIB.widget.CategoryManager.EditCatForm);
    UIB.widget.CategoryManager.EditDetailsWindow.doLayout();
</script> 

Can anyone offer advice on solving this issue? I don't want to have to put timeouts on setting field stores - it's not good practice.

Added:
It may be worth mentioning that if I remove all the form fields above the Multiselect, it renders without issue first time, without timeout. Also, if I leave the form fields above it IN the code, but put the whole lot in the FormPanel element instead of the FieldSet element, it also renders without needing the timeout.
This would tell me that it's definitely a render->availability issue with IE7.

Any help appreciated.
Cheers,
ndtreviv

[mike1993]

ndtreviv,

MS listeners: render - load your store.
Store listeners: load( or add) - set your MS item

[mike1993]

Could anyone post 2.2 source code. Download link does not work.

Big thanks!