Results 1 to 3 of 3

Thread: multiSelect List - getting selected value ?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Answers
    2
    Vote Rating
    4
      0  

    Default 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'
                }

  3. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27
    Vote Rating
    2
      0  

    Default

    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.


    Screen shot 2011-10-08 at 10.36.45 PM.png


    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'
                }

  4. #3
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Answers
    2
    Vote Rating
    4
      0  

    Smile

    Holy mother of god. That worked! I was having scoping issues again!

    Thanks!!!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •