Problem with ComboBox and

**zagreberlin** · 19 Aug 2011 3:07 PM

Hi people,

why the following dont work with combobox?
If i put only the combox to the formPanel it works but when i put it to the fpItems variable it dont works.
I dont understand why.

Code:

/* on this way it doesnt work. it doesnt work only if the comboBox is in.
   If the combobox is not in it works */

var fpItems =[
	{		
		fieldLabel : 'Password',
		id		   : 'fieldLabel1',
		allowBlank : false,
		inputType  : 'password'	// Attribut auf passwort setzen
	},
	{
		fieldLabel : 'File',
		allowBlank : false,
		inputType  : 'file'
	},
	{	
		xtype 	   : 'textarea',
		fieldLabel : 'My TextArea',
		id         : 'fieldLabel MyTextArea',
		name 	   : 'myTextArea',
		anchor 	   : '100%',
		height     : 100
	},
	{
		xtype 			 : 'numberfield',
		fieldLabel 		 : 'Numbers only',
		allowBlank 		 : false,
		emptyText 		 : 'This field is empty!',
		decimalPrecision : 3,
		minValue 		 : 0.001,
		maxValue 		 : 2
	},
	{
		xtype 		 : 'combobox',
		fieldLabel   : 'Choose State',
	        store        : states,
	       queryMode    : 'local',
	       displayField : 'name',
	       valueField   : 'abbr'
	}
	];

        var fp = new Ext.form.FormPanel({		renderTo 	: Ext.getBody(),
		id          : 'MyFormPanel',
		fileUpload  : true,
		width 		: 400,
		height 		: 460,
		title 		: 'Exercising textfields',
		frame 		: true,
		bodyStyle 	: 'padding: 6px',
		labelWidth  : 126,
		defaultType : 'textfield',
		defaults 	: {
			msgTarget : 'side',	
			qtip	  : 'Min 3 or Max 7 chars',
			anchor 	  : '-20'
		},
		items : fpItems
	});

why it works on this way?

Code:

var comboBox = {
		xtype 		 : 'combobox',
		fieldLabel   : 'Choose State',
	    store        : states,
	    queryMode    : 'local',
	    displayField : 'name',
	    valueField   : 'abbr'
}

var fp = new Ext.form.FormPanel({
		renderTo 	: Ext.getBody(),
		id          : 'MyFormPanel',
		fileUpload  : true,
		width 		: 400,
		height 		: 460,
		title 		: 'Exercising textfields',
		frame 		: true,
		bodyStyle 	: 'padding: 6px',
		labelWidth  : 126,
		defaultType : 'textfield',
		defaults 	: {
			msgTarget : 'side',	
			qtip	  : 'Min 3 or Max 7 chars',
			anchor 	  : '-20'
		},
		items : combobox
	});

Please help!

**zagreberlin** · 20 Aug 2011 2:40 AM

nobody knows?

**aacoro** · 21 Aug 2011 8:03 AM

instead of

store : states,

please post sample data so the it is faster reproducable...
I do not see any weird things...

**christocracy** · 22 Aug 2011 4:50 AM

When you say "doesn't work", what exactly do you mean.

It's unclear if you mean "the combo doesn't render on-screen" or "when I click the combo, the list contains no items".

Perhaps a screenshot?

**aacoro** · 22 Aug 2011 12:13 PM

Step 1:

create a HTML page:

Code:

<html>
<head>
<title>Tespage</title>
    <link href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://docs.sencha.com/ext-js/4-0/extjs/bootstrap.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

Step 2:

create the test.js in the same folder and copy paste this inside test.js:

Code:

Ext.onReady(function () {
    console.log('Ext Js started succesfully.');


    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [{
            "abbr": "AL",
            "name": "Alabama"
        }, {
            "abbr": "AK",
            "name": "Alaska"
        }, {
            "abbr": "AZ",
            "name": "Arizona"
        }]
    });


    var fpItems = [{
        fieldLabel: 'Password',
        id: 'fieldLabel1',
        allowBlank: false,
        inputType: 'password'
    }, {
        fieldLabel: 'File',
        allowBlank: false,
        inputType: 'file'
    }, {
        xtype: 'textarea',
        fieldLabel: 'My TextArea',
        id: 'fieldLabel MyTextArea',
        name: 'myTextArea',
        anchor: '100%',
        height: 100
    }, {
        xtype: 'numberfield',
        fieldLabel: 'Numbers only',
        allowBlank: false,
        emptyText: 'This field is empty!',
        decimalPrecision: 3,
        minValue: 0.001,
        maxValue: 2
    }, {
        xtype: 'combobox',
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr'
    }];


    var fp = new Ext.form.FormPanel({
        renderTo: Ext.getBody(),
        id: 'MyFormPanel',
        fileUpload: true,
        width: 400,
        height: 460,
        title: 'Exercising textfields',
        frame: true,
        bodyStyle: 'padding: 6px',
        labelWidth: 126,
        defaultType: 'textfield',
        defaults: {
            msgTarget: 'side',
            qtip: 'Min 3 or Max 7 chars',
            anchor: '-20'
        },
        items: fpItems
    });




});

this works!

Pozdrav!

This my result:

ComboBox.png

**zagreberlin** · 1 Sep 2011 4:00 PM

thx aacoro!
the problem was that the states were under the combobox.

Problem with ComboBox and

Thread Tools

Search Thread

Display

Unanswered: Problem with ComboBox and

Unanswered: Problem with ComboBox and

Unclear

Unclear