combobox setvalue() show valuefield but not displayfield.

[phpwebde]

I am working on an application where i use a grid and have a combobox outside the grid whose selections are based on the selected rows within the grid.
Basically the content of the combobox is dynamically updated based on the selection of rows.

1)when the application first load, Just selcet the grid item (2-- 12343ddw3e) or(1--12343),
the combobox Machine just show the value but not the displayField。but what I want is the displayfield is show and the the value is hidden.
1.png
2)when click the combobox，it show correctly。
2.png
3）and now ，select the grid item，the combox “Machine Type ” is show correctly.
3.png

4.png

//case_mtstore	Ext.define('case_mtData', {
		extend: 'Ext.data.Model',
		fields: ['name','id'] //modify
	});
	var case_mtstore = Ext.create('Ext.data.Store', {
			model: 'case_mtData',
			autoLoad: false,
			proxy: {
				type: 'jsonp',
        url: './phps/queryall-mt.php',
        reader: {
        	type: 'json',
        	root: 'data',
          totalProperty: 'totalCount'
        }
			}
	});

//cases_form_class	Ext.define('cases.Form', {
	    extend: 'Ext.form.Panel',
	    alias: 'widget.cases_form_class',
	    requires: ['Ext.form.field.Text'],	
	    initComponent: function(){
	    	this.addEvents('create');
	      Ext.apply(this, {
	      		activeRecord: null,
	       		//width: 600,
	       	  border: false,
		        bodyBorder: false,
		        bodyStyle:'padding:0 10px 0 0',
		        fieldDefaults: {
		        	labelAlign: 'left',
		        	labelWidth: 100,
		        	msgTarget: 'side'
		        },
	          items: [{
                xtype:'tabpanel',
		            plain:true,
		            layout:'fit',
		            activeTab: 0,
		            defaults:{bodyStyle:'padding:10px'},
		            items:[{
	                title:'Case Informations',
	                defaults: {width: 350},
	                defaultType: 'textfield',
	                items: [{
	                	xtype:          'combo',
										triggerAction:  'all',
										editable:       false,
										fieldLabel:     'Title',
										name:           'case_mt',
										displayField:   'name',
										valueField:     'id',
										queryMode:      'remote',
										store:          case_mtstore
                  }]
            		}]
	          }]
	        });
	        this.callParent();
	    }
	});

//cases_grid_class	Ext.define('cases.Grid', {
	    extend: 'Ext.grid.Panel',
	    alias: 'widget.cases_grid_class',
	    requires: [
	        'Ext.grid.plugin.CellEditing',
	        'Ext.form.field.Text',
	        'Ext.toolbar.TextItem'
	    ],
	    initComponent: function(){
	    	Ext.apply(this, {
	    		iconCls: 'icon-grid',
	    		frame: true,
	    		autoScroll:true,
					.... <other code>
					columns: [{
						text: 'ID',
						width: 100,
						sortable: true,
						dataIndex: 'id'//modify
					},{
						header: 'Title',
						flex: 1,
						sortable: true,
						dataIndex: 'case_title',
						field: {
							type: 'textfield'
						}
					}]
					});
					this.callParent();
					this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
			}
	});

var manage_cases_com = Ext.create('Ext.container.Container', {		padding: '0 0 0 0',
		autoScroll:true,
		renderTo: document.body,
		items: [{//cases_grid_panel
			itemId: 'cases_grid_panel',
			xtype: 'cases_grid_class',
			title: 'Cases Info Lists',
			autoScroll : true,
			height: 400,
			layout:'fit',
			store: cases_grid_store,
			listeners: {
				selectionchange: function(selModel, selected) {
					manage_cases_com.child('#cases_form_panel').setActiveRecord(selected[0] || null); <--
					                                        Here fired the setvalue function();
				}
			}
		},{//cases_form_panel
			itemId: 'cases_form_panel',
			padding: '0 10 0 0',
			xtype: 'cases_form_class',
			layout:'fit',
			listeners: {
				create: function(form, data){
					cases_grid_store.insert(0, data);
				}
			}
		}]
	});

[skirtle]

ExtJS version?

Bit of a wild guess, but it could be a types problem. Try forcing the id field to be a string in the field definitions on all your models/stores.

[phpwebde]

Thank you for your reply,
I think it's the store problem.

when the application load first time, the cast_mt store is not load,but if you click the combo button,
and the store is loading, and then it will work ok. but I don't know how to fire the click trigger to load the store on the application run first time.

combo.store.load() is not work,because the querymode is remote .

[skirtle]

Are you sure you want queryMode: 'remote'? It sounds to me like you want queryMode: 'local' on the combobox and autoLoad: true on the store.

The queryMode setting is about where data filtering occurs. You're using editable: false so you don't have any filtering.

More info:

http://skirtlesden.com/articles/extjs-comboboxes-part-2

[phpwebde]

Greatly appreciate.

if I change the store mode to local and autoload to true, There would be an error. So I have to use remote mode and autoload=>false。

Now I just trap in this condition:There is a grid ,and a form bind to it.
and the form contain a combox.

what i want is " when i click the grid item, the name show in the combo on the form,and i can edit it".

but if i don't click the combo box one time ,whatever how many times i click the grid item,
the name won't show but just the value .
unless I click the combox .

123.jpg




356.png

click the Grid Item,Machine Type is not showed correctly.
2.png
just after clicking the combox, everythins is work well.
124.png