Threaded View

  1. #1
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Vote Rating
    4
    Answers
    2
    bastard is on a distinguished road

      0  

    Default Answered: multiSelect List - getting selected value ?

    Answered: multiSelect List - getting selected value ?


    I am trying to grab the elements selected from a multiselect list. Dunno where I am failing!

    The List(BTApp.views.SelectFileList) is an item in a Ext.Panel. The Panel also contains a toolbar with a "save" button. What I am trying to do is create a multiSelect Ext.List which the user can tap on all the elements he chooses and then hit save. I'm trying to capture the elements selected by the user using the getSelectedNodes() function. For some reason, I cannot seem to grab this info. No matter what I try, I get an undefined in Chrome's console.


    Here is the entire code:
    Code:
    BTApp.views.SelectFileList = new Ext.extend(Ext.List, {
    	id: 'SelectFileList',
        multiSelect: true,
        simpleSelect: true,
        grouped: true,
        store: BTApp.stores.ListStore,
        fullscreen: true,
        itemTpl: [
                    '<span class="x-list-label">{fileName}</span>',
                    '<span class="x-list-selected"></span>'
        ],
    });
    Ext.reg('SelectFileList', BTApp.views.SelectFileList);
    
    
    
    BTApp.views.SelectFilePanel = new Ext.extend(Ext.Panel, {
    	id: 'SelectFilePanel',
    	scope: this,
    
    	initComponent : function() {
    		this.items = this.buildItems();
    		this.dockedItems = this.buildDockedItems();
    		BTApp.views.SelectFilePanel.superclass.initComponent.call(this, arguments);
    	},
    	layout: {
    		type: 'vbox',
    		align: 'stretch',
    		pack: 'justify',
    	},
    	defaults:{
    		width: '100%',
    	},
    	buildItems: function(){
    		
    		return [
    			BTApp.views.SelectFileList,
    		];
    	},
    	buildDockedItems : function(){
    		return {
    			xtype : 'toolbar',
    			dock  : 'top',
    			cls: 'big-text',
    			title : i18n.SelectFiles[i18n.language],
    			items : [
    				{
    					xtype: 'spacer',
    				},
    				{
    					xtype: 'button',
    					text: 'save',
    					handler: saveFileList,
    					
    				},
    			],
    		};
    	},
    	saveFileList: function(){
    		console.log(BTApp.views.SelectFileList.getSelectedNodes()) // PROBLEM HERE!!!!
    	}
    	
    
    });
    Ext.reg('SelectFilePanel', BTApp.views.SelectFilePanel);

    I tried changing the handler line to:


    Code:
    saveFileList({scope: BTApp.views.SelectFileList}),
    Then I tried:
    console.log(this.items); // this didn't work either

    How do I grab the elements selected ??????

  2. This is sort of an amalgamation of another sample i was putting together, but it demonstrates what you are asking. The floating panel are the divs selected after clicking your save button.


    Attachment 28579


    Code:
    Ext.namespace('Ext.ux');
    
    Ext.ux.MyClass = Ext.extend(Ext.Panel, {
        id: 'SelectFilePanel',
        scope: this,
    
    
        initComponent : function() {
            this.items = [
                {
                    xtype:'list',
                    multiSelect: true,
                    simpleSelect: true,
                    store: new Ext.data.Store({
                        model: 'sportModel',
                        data: [
                            { sportName: "Basketball (Boys)"},
                            { sportName: "Golf (Boys)"},
                            { sportName: "Soccer (Boys)"},
                            { sportName: "Tennis (Boys)"},
                            { sportName: "Cheer"},
                            { sportName: "Cross Country"},
                            { sportName: "Football)"},
                            { sportName: "Basketball (Girls)"},
                            { sportName: "Golf (Girls)"},
                            { sportName: "Soccer (Girls)"},
                            { sportName: "Tennis (Girls)"},
                            { sportName: "Softball"},
                            { sportName: "Volleyball"},
                            { sportName: "Wrestling"},
                            { sportName: "Track"}
                        ]
                    }),
                    fullscreen: true,
                    itemTpl: [
                        '<span class="x-list-label">{sportName}</span>',
                        '<span class="x-list-selected"></span>'
                    ]
                }
            ];
            this.dockedItems = this.buildDockedItems();
            Ext.ux.MyClass.superclass.initComponent.call(this, arguments);
        },
        layout: {
            type: 'vbox',
            align: 'stretch',
            pack: 'justify'
        },
        defaults:{
            width: '100%'
        },
        buildDockedItems : function() {
            return {
                xtype : 'toolbar',
                dock  : 'top',
                cls: 'big-text',
                title : 'Select Files',
                items : [
                    {
                        xtype: 'spacer'
                    },
                    {
                        xtype: 'button',
                        text: 'save',
                        scope:this,
                        handler: this.saveFileList
    
    
                    }
                ]
            };
        },
        saveFileList: function() {
            var nodes = this.items.items[0].getSelectedNodes();
            var panelContent =  '';
            for(var i = 0; i < nodes.length; i++){
                panelContent+= nodes[i].outerHTML;
            }
    
    
            var pnl = new Ext.Panel({
                    floating: true,
                    scroll:'vertical',
                    width: 500,
                    height: 400,
                    centered: true,
                    modal: true,
                    hideMode: 'close',
                    hideOnMaskTap: false,
                    layout: 'fit',
                    html: panelContent,
                    showAnimation: {
                        type: 'pop',
                        duration: 250
                    }
            });
    
    
                pnl.show();
        }
    
    
    
    
    });
    Ext.reg('myclass', Ext.ux.MyClass);

    after having defined the extension class, drop this into one of your panels
    Code:
    {                xtype:'myclass'
                }

Thread Participants: 1

Tags for this Thread