create multiselectfield

[zied jouini]

SALAM.
i try to create a mulit select field here is the code

{


xtype: "multiselectfield",
	
label: "Instution",
store: [
{ text : "One" ,   value : "1" },
{ text : "Two" ,   value : "2" },
{ text : "Three" , value : "3" }
],
displayField : "text",
							
valueField: "value",


name: "multiselect-picker",
itemType: "picker",
},

but it doesnt work.
how can i fix it?
thank you

[mitchellsimoens]

Try passing in a store instance to see if it will handle a store

[zied jouini]

itried like this

Ext.regApplication({
    name: 'App',
    launch: function()
    {
        alert("Yay, it's working!");


           
        
        Ext.regModel("Test", {
	fields : [
	
			{ name : "text",  type : "string" },
	
                        { name : "value", type : "string" }
]
});
		


       var store = new Ext.data.Store({
	model : "Test",
data  : [


{ text : "One" , value : "1" },
				
{ text : "Two" ,   value : "2" },
			
{ text : "Three" , value : "3" },
				
{ text : "Four" ,  value : "4" },
		
{ text : "Five" ,  value : "5" },
		
{ text : "Six" ,   value : "6" }
]
});
        




var onFieldChange = function(cmp, value) {
console.log(value);
}
		
var listeners = {
change: onFieldChange,
	selectionchange: onFieldChange
	};


   	     var form = new Ext.form.FormPanel({
    fullscreen: true,
   cls : 'form',
	scroll: 'vertical',
    items: [{
                xtype: 'passwordfield',
                name: 'password',
                label: 'Password',
                useClearIcon: true
            },
{
                xtype: 'selectfield',
                name: 'civilite',
                label: 'civilite',
                options: [
                {
                    text: 'Marie',
                    value: 'Marie'
                }, 
                {
                    text: 'Fiance',
                    value: 'Fiance'
                }, 
                {
                    text: 'celibataire',
                    value: 'celibataire'
                }
                         ]
},
{
                xtype: 'textareafield',
                name: 'bio',
                label: 'Bio'
            },
{
            xtype: 'fieldset',
            title: 'Favorite color',
            defaults: {
                xtype: 'radiofield',
                labelWidth: '35%'
            },
            items: [{
                name: 'color',
                value: 'red',
                label: 'Red'
            }, {
                name: 'color',
                label: 'Blue',
                value: 'blue'
            }, {
                name: 'color',
                label: 'Green',
                value: 'green'
            }, {
                name: 'color',
                label: 'Purple',
                value: 'purple'
            }]
},
{
                xtype: 'emailfield',
                name: 'email',
                label: 'Email',
                placeHolder: 'me@sencha.com',
                useClearIcon: true
            },
        {
            xtype: 'textfield',
            name : 'first',
            label: 'First name'
        },
        {
            xtype: 'textfield',
            name : 'last',
            label: 'Last name'
        },
        {
            xtype: 'numberfield',
            name : 'age',
            label: 'Age'
        },
{
                xtype: 'checkboxfield',
                name: 'cool',
                label: 'Cool'
            },
        {
            xtype: 'urlfield',
            name : 'url',
            placeHolder: 'http://sencha.com',
            label: 'Website'
        },
{
	xtype: "datepickerfield",
	name: "startDate",
	label: "Start Date",
	picker: { yearFrom: 1987, yearTo: 2020}  
},






{


xtype        : "multiselectfield",
				label        : "Picker**",


store        : store,
			
displayField : "text",
	
valueField   : "value",
	
name         : "multiselect-picker",
		
itemWidth    : 400,
	
itemType     : "picker",
						listeners    : listeners
},




{
	xtype: 'sliderfield',
	id: "thumb",
	label: "single thumb",
        listeners: {
delay: 500,
afterrender: function(){
var v=  Ext.getCmp('thumb').getValue();
Ext.getCmp('val').setValue(v);
}
}


},
{
            xtype: 'button',
            flex: 1,
            margin: 10,
            ui: 'round', text: 'Calculate', handler: function()
                   {
                      var v=  Ext.getCmp('thumb').getValue();
                      Ext.Msg.alert("Monthly",v);
                      Ext.getCmp('val').setValue(v);  
                   }
},
{
            xtype: 'textfield',
            id : 'val',
            label: 'valeur'    
},
{
            xtype: 'button',
            flex: 1,
            margin: 10,
            ui: 'round', text: 'Calculate2', handler: function()
                   {
                      var v=  Ext.getCmp('val').getValue();
                      Ext.getCmp('thumb').setValue(v);  
                   }
}
    ]
});
    }
});

the form work corectly without the multiselectfield, but when i add it the for don't work

[netresource]

change

itemType     : "picker",

to

itemType     : "list",

or

itemType     : "dataview",

[zied jouini]

thank you for your response.
i tried "list" and "dataview" but its the same thing.

[netresource]

try debug with Chrome developer tools and javascript console.