Display a ComboBox with a Json

[kowsalya]

Hi Condor,

Thanks for the reply. I am trying to flaten the data . In the mean time, i am trying with having one different store for combo box and another main store for grid. But i am not able to access the combo box data.

Here is the grid's store and combo box store and grip implementation.

Ext.namespace('Ext.exampledata');
	
	Ext.exampledata.floorplan = [
	        ['0', 'UR-08/31/2007 26660-1'],
	        ['2', 'UR-08/31/2007 26660-2'],
	        ['3', 'UR-08/31/2007 26660-3'],
	        ['4', 'UR-08/31/2007 26660-4'],
	        ['5', 'UR-08/31/2007 26660-5']
        ];

	var fpStore = new Ext.data.SimpleStore({
		fields: ['fpid', 'floorplan'],
		data : Ext.exampledata.floorplan // from floorplandata.js
		})
		
	var myData = {		
		"results":[
			{"acct":2564,"acctName":"aab},				                          {"acct":25,"acctName":"CVSa" }
			]
	};	 
 
	var ds = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),		
		reader: new Ext.data.JsonReader({
		            root: 'results'		            
		        }, 
		[			
			{name: 'acct', type: 'int',mapping: 'acct'},
			{name: 'acctName',mapping: 'acctName'}			               ])
	});		
	ds.load();	
 	var colModel = new Ext.grid.ColumnModel([ 	
		{
			id:'acct',
			header: 'Acct#', 
			width: 60,
			sortable: true,
			resizable: true, 			
			dataIndex: 'acct'			
		},
		{
			header: 'Acct Name', 
			width: 160, 
			sortable: true, 
			resizable: true, 
			dataIndex: 'acctName',
			hideable: false
		},
		{
			header: 'Store#',
			width: 80,
			sortable: true,
			resizable: true,	
			align : 'right',
			editor: new Ext.form.ComboBox({
			            store:fpStore,        
			           displayField: 'fpid',
			           valueField: 'fplan',  
			mode:'local',  		
            		   typeAhead: true,
            		   displayField: 'fpAvailable',
            		   valueField:'fpid',
            		   triggerAction: 'all',
            		   applyTo: 'test_combo'
            		   lazyRender:true,
            		   listClass: 'x-combo-list-small'
            		}),            		
            		renderer:function(data){				
			return data+"<img src='../images/combo_arrow.jpg'/>"				}
		}
	]);			
	
	
	});

Here is the html code:
<div>
<input type="text" id="test_combo">
</div>

Pls help me with the possible solution to handle the situation

[Condor]

I woudn't use applyTo (so remove the HTML) and use:

Ext.namespace('Ext.exampledata');
Ext.exampledata.floorplan = [
	['0', 'UR-08/31/2007 26660-1'],
	['2', 'UR-08/31/2007 26660-2'],
	['3', 'UR-08/31/2007 26660-3'],
	['4', 'UR-08/31/2007 26660-4'],
	['5', 'UR-08/31/2007 26660-5']
];
var fpStore = new Ext.data.SimpleStore({
	id: 0, // <- needed for the renderer
	fields: ['fpid', 'floorplan'],
	data: Ext.exampledata.floorplan
});
var myData = {
	'results': [
		{'acct': 2564, 'acctName': 'aab},
		{'acct': 25, 'acctName': 'CVSa'}
	]
};
var ds = new Ext.data.Store({
	proxy: new Ext.data.MemoryProxy(myData),
	reader: new Ext.data.JsonReader({
		root: 'results'
	}, [
		{name: 'acct', type: 'int'},
		{name: 'acctName', mapping: 'acctName'},
		{name: 'fpid', type: 'int', defaultValue: null}, // <- you need an extra field
	])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([{
	id: 'acct',
	header: 'Acct#',
	width: 60,
	sortable: true,
	resizable: true,
	dataIndex: 'acct'
},{
	header: 'Acct Name',
	width: 160,
	sortable: true,
	resizable: true,
	dataIndex: 'acctName',
	hideable: false
},{
	header: 'Store#',
	width: 80,
	sortable: true,
	resizable: true,
	align: 'right',
	dataIndex: 'fpid', // <- added
	editor: new Ext.form.ComboBox({
		store: fpStore,
		displayField: 'floorplan', // <- use displayField/valueField from fpStore
		valueField: 'fpid',
		mode: 'local',
		typeAhead: true,
		triggerAction: 'all',
		lazyRender: true,
		listClass: 'x-combo-list-small'
	}),
	renderer: function(value, meta) {
		meta.css = 'some-class'; // <- use class with background image of arrow
		var rec = fpStore.getById(value); // <- find floorplan by id
		return rec ? rec.get('floorplan') : '';
	}
}]);

[kowsalya]

Hi Condor,
Its working fine.... thanks a lot. I have started to analyse teh ways to process the hierarchial data in grid. You have already suggested me to flatten the data or to use TreeSelector . I want to know 2 things on that front:
1) Can we use the Treeselector along with the grid
2)If so how to implement the tree selector in editor grid

And also I am not getting any clue, in the forum, for how to flatten out the data....Can you pls help me out to solve the problem in any of the 2 ways.

My json response is
[{"storeNum":639,"systemToken":null,"accountNum":101,"storeAddress":"",
"accountName":"CVS #639 ","accountType":0,
"availableFloorPlan":[
{
"fpVersionName":"",
"fpPhysicalPath":"",
"fpVersionStatus":"6",
"fpVersionID":326109
},

{"fpVersionName":"",
"fpPhysicalPath":"",
"fpVersionStatus":"6",
"fpVersionID":326096
},

{"fpVersionName":"",
"fpPhysicalPath":"",
"fpVersionStatus":"6",
"fpVersionID":326095
}
]
}]

My javascript code is

ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(gridData),
reader: new Ext.data.JsonReader(
{
root: 'AccountSearchDetails'
},
[
{name: 'acct', type: 'int',mapping:'accountNumber'},
{name: 'acctName',mapping: 'accountName'}
])
});

var colModel = new Ext.grid.ColumnModel([{
id: 'acct',
header: 'Acct#',
width: 60,
sortable: true,
resizable: true,
dataIndex: 'acct'
},{
header: 'Acct Name',
width: 160,
sortable: true,
resizable: true,
dataIndex: 'acctName',
hideable: false
},{
header: 'Store#',
width: 80,
sortable: true,
resizable: true,
align: 'right',
dataIndex: 'fpVersionID', // <- added
editor: new Ext.form.ComboBox({
displayField: 'fpVersionStatus',
valueField: 'fpVersionID',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
listClass: 'x-combo-list-small'
}),
renderer: function(value, meta) {
meta.css = 'some-class'; // <- use class with background image of arrow
var rec = ds .getById(value);
return rec ? rec.get('fpVersionStatus') : '';
}
}]);

[Condor]

You'll have to override the readRecords method of the JsonStore.

I'm not quite sure on how to read your JSON data:
Do you want a store with fields storeNum, systemToken, accountNum, storeAddress, accountName, accountType, fpVersionName, fpPhysicalPath, fpVersionStatus and fpVersionID?

[kowsalya]

yes but i need fpVersionName, fpPhysicalPath, fpVersionStatus and fpVersionID for my combo box.

My complete json data for the grid with 3 rows :
[{"storeNum":039,"systemToken":null,"accountNum":001,"storeAddress":"",
"accountName":"kkk #639 ","accountType":0,
"availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVers
ionID":326085},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fp
VersionID":326084},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6"
,"fpVersionID":326083}]},
{"storeNum":040,"systemToken":null,"accountNum":021,"storeAddress":"",
"accountName":"bbb #639 ","accountType":0,
"availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVers
ionID":326085},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fp
VersionID":326084},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6"
,"fpVersionID":326083}]},
{"storeNum":041,"systemToken":null,"accountNum":022,"storeAddress":"",
"accountName":"bbb #639 ","accountType":0,
"availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVers
ionID":326085},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fp
VersionID":326084},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6"
,"fpVersionID":326083}]}
]

[Condor]

So you want your record to hold storeNum, systemToken, accountNum, storeAddress, accountName and accountType (and availableFloorPlan for use in combobox).

And for which field do you need the availableFloorPlan? Shouldn't there be a selectedFloorplan field?

ps. This isn't hierarchical data after all. Your JSON just has an field that holds an object instead of a simple type.

[kowsalya]

oh really i am relieved on hearing that its not a hierrachial data. How do i get the individual fields from the object. Actually at the start, even before trying anything to flatten out the data, i tried to retrieve the fpversionid from the availableFloorPlan object by the following code:

ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(gridData),
reader: new Ext.data.JsonReader(
{
root: 'AccountSearchDetails'
},
[
{name: 'acct', type: 'int',mapping:'accountNumber'},
{name: 'acctName',mapping: 'accountName'},
{name: 'fpAvailable', mapping: 'fpAvailable'}
])
});

var colModel = new Ext.grid.ColumnModel([{
id: 'acct',
header: 'Acct#',
width: 60,
sortable: true,
resizable: true,
dataIndex: 'acct'
},{
header: 'Acct Name',
width: 160,
sortable: true,
resizable: true,
dataIndex: 'acctName',
hideable: false
},{
header: 'Floor Plans Available',
width: 180,
sortable: false,
resizable: true,
align: 'right',
dataIndex: 'fpAvailable',
editor: new Ext.form.ComboBox({
displayField: 'fpVersionStatus',
valueField: 'fpVersionID',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
listClass: 'x-combo-list-small'
}),
renderer: function(value, meta) {
meta.css = 'some-class'; // <- use class with background image of arrow
var rec = ds .getById(value);
return rec ? rec.get('fpVersionStatus') : '';
}
}]);


My complete json data for the grid with 3 rows :
[{"storeNum":039,"systemToken":null,"accountNum":001,"storeAddress":"",
"accountName":"kkk #639 ","accountType":0,
"availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersion Status":"7","fpVers
ionID":326085},{"fpVersionName":"","fpPhysicalPath ":"","fpVersionStatus":"6","fp
VersionID":326084},{"fpVersionName":"","fpPhysical Path":"","fpVersionStatus":"6"
,"fpVersionID":326083}]},
{"storeNum":040,"systemToken":null,"accountNum":02 1,"storeAddress":"",
"accountName":"bbb #639 ","accountType":0,
"availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersion Status":"7","fpVers
ionID":326085},{"fpVersionName":"","fpPhysicalPath ":"","fpVersionStatus":"6","fp
VersionID":326084},{"fpVersionName":"","fpPhysical Path":"","fpVersionStatus":"6"
,"fpVersionID":326083}]},
{"storeNum":041,"systemToken":null,"accountNum":02 2,"storeAddress":"",
"accountName":"bbb #639 ","accountType":0,
"availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersion Status":"7","fpVers
ionID":326085},{"fpVersionName":"","fpPhysicalPath ":"","fpVersionStatus":"6","fp
VersionID":326084},{"fpVersionName":"","fpPhysical Path":"","fpVersionStatus":"6"
,"fpVersionID":326083}]}
]

[Condor]

I think you want something like this:

var gridData = {"AccountSearchDetails": [
	{"storeNum":039,"systemToken":null,"accountNum":001,"storeAddress":"","accountName":"kkk #639","accountType":0,"availableFloorPlan":[
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVersionID":326085},
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326084},
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326083}]},
	{"storeNum":040,"systemToken":null,"accountNum":021,"storeAddress":"","accountName":"bbb #639","accountType":0,"availableFloorPlan":[
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVersionID":326085},
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326084},
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326083}]},
	{"storeNum":041,"systemToken":null,"accountNum":022,"storeAddress":"","accountName":"bbb #639","accountType":0,"availableFloorPlan":[
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVersionID":326085},
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326084},
		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326083}]}
]};

var ds = new Ext.data.JsonStore({
	data: gridData,
	root: 'AccountSearchDetails',
	fields: [
		{name: 'acct', type: 'int', mapping: 'accountNum'},
		{name: 'acctName', mapping: 'accountName'},
		{name: 'fpVersionID', defaultValue: null}, // <- need field to hold current floorplan
		{name: 'fpAvailable', mapping: 'availableFloorPlan'}
	]
});

var comboStore = new Ext.data.JsonStore({
	id: 'fpVersionID',
	data: [],
	fields: ['fpVersionStatus', 'fpVersionID']
});

var colModel = new Ext.grid.ColumnModel([{
	id: 'acct',
	header: 'Acct#',
	width: 60,
	sortable: true,
	resizable: true,
	dataIndex: 'acct'
},{
	header: 'Acct Name',
	width: 160,
	sortable: true,
	resizable: true,
	dataIndex: 'acctName',
	hideable: false
},{
	header: 'Floor Plans Available',
	width: 180,
	sortable: false,
	resizable: true,
	align: 'right',
	dataIndex: 'fpVersionID',
	editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
		store: comboStore,
		mode: 'local',
		displayField: 'fpVersionStatus',
		valueField: 'fpVersionID',
		typeAhead: true,
		triggerAction: 'all',
		lazyRender: true,
		listClass: 'x-combo-list-small'
	}), {
		listeners: {
			beforestartedit: function(editor) {
				editor.field.store.loadData(editor.record.get('fpAvailable'));
			}
		}
	}),
	renderer: function(value) {
		var record = comboStore.getById(value);
		return record ? record.get('fpVersionStatus') : '';
	}
}]);