multiSelect List - getting selected value ?

[bastard]

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:

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:

saveFileList({scope: BTApp.views.SelectFileList}),

Then I tried:
console.log(this.items); // this didn't work either

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

[NickT]

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

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

{                xtype:'myclass'
            }

[bastard]

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

Thanks!!!