PDA

View Full Version : How To Make ArrayStore Filter Data Depending On Combobox Selection?



saadkhan
28 Feb 2010, 11:56 AM
I have an ArrayStore named 'megaStore' which has around 25 fields in it....I have attached a combobox and a listview ith it. Combobox of mine shows only 4 fields of 'megaStore' and listview needs to show all of the fields in it. Now, I want to show all fields in my listview when I change selection in combobox (with reference to VehicleId field of store), as both components are sharing same arraystore.

Please guide me how to show only data referenced by VehicleId in array store? I am using XTemplate in listView. Here is the Data I am getting from Server:


{
"success": true,
"data":
{
"a665650a-e800-4547-8f81-7f231d26f93c":
{
"VehicleId": "a665650a-e800-4547-8f81-7f231d26f93c",
"VehicleName": "sad",
"VehicleYearModel": "asdasd",
"VehicleColor": "ew",
"VehicleEngineNumber": null,
"VehicleChassisNumber": "qweqw",
"VehicleSpeedLimit": 213123,
"VehicleNumber": "333333333"
},
"b955650a-e800-4547-8f81-7f231d26f95d":
{
"VehicleId": "a665650a-e800-4547-8f81-7f231d26f93c",
"VehicleName": "sad",
"VehicleYearModel": "asdasd",
"VehicleColor": "ew",
"VehicleEngineNumber": null,
"VehicleChassisNumber": "qweqw",
"VehicleSpeedLimit": 213123,
"VehicleNumber": "333333333"
}
}
}

(Code in bold is the VehicleId)

Here is my code:



var megaStore = new Ext.data.ArrayStore({
fields: [
'VehicleId',
'VehicleNumber',
'CustomerName',
'DeviceType',
'CustomerFatherName',
'CustomerMotherMaidenName',
'CustomerCNIC',
'CustomerAddress',
'CustomerOfficeAddress',
.
.
.
.
]
});


var detailListView = new Ext.Panel({
id: 'detailListView',
collapsible:true,
layout:'fit',
title:'Details',
items:
[
new Ext.list.ListView({
store: megaStore,
disableHeaders: true,
hideHeaders: true,
reserveScrollOffset: true,
tpl: new Ext.XTemplate(
'<tpl for="rows">',
'<div class="search-item">',
'<span><b>{CustomerName}</b></span><br />',
'<span>{CustomerFatherName}</span><br />',
'<span>{CustomerMotherMaidenName}</span><br />',
'<span>{VehicleId}</span>',
'</div>',
'</tpl>'
),
columns:
[
{id: 'vehicleId', header: "VehicleId", dataIndex: 'VehicleId'},
{id: 'customerName', header: "CustomerName", dataIndex: 'CustomerName'},
{id: 'customerFatherName', header: "CustomerFatherName", dataIndex: 'CustomerFatherName'},
{id: 'customerMotherMaidenName', header: "CustomerMotherMaidenName", dataIndex: 'CustomerMotherMaidenName'}
]
})
]
});


Now I want show only this data in listview if combobox selected item id is 'a665650a-e800-4547-8f81-7f231d26f93c' :


"a665650a-e800-4547-8f81-7f231d26f93c":
{
"VehicleId": "a665650a-e800-4547-8f81-7f231d26f93c",
"VehicleName": "sad",
"VehicleYearModel": "asdasd",
"VehicleColor": "ew",
"VehicleEngineNumber": null,
"VehicleChassisNumber": "qweqw",
"VehicleSpeedLimit": 213123,
"VehicleNumber": "333333333"
}

BlueCamel
28 Feb 2010, 9:13 PM
Basically you want to add a listener to the combo for the 'change' event. Using the newValue param passed into the event, get a reference to your store using Ext.StoreMgr.get() and apply a store filter to show only the records you want:


// combo is a reference to the combobox field
combo.on('change', function(combo, newValue, oldValue){
// assumes you set the id 'megaStore' on the store
var store = Ext.StorgMgr.get('megaStore');
store.filter('VehicleId', newValue);
});

This is the general direction for you, though the code will need to be adjusted and tested depending on the rest of your store and application config.

saadkhan
1 Mar 2010, 12:39 AM
// combo is a reference to the combobox field
combo.on('change', function(combo, newValue, oldValue){
// assumes you set the id 'megaStore' on the store
var store = Ext.StorgMgr.get('megaStore');
store.filter('VehicleId', newValue);
});

I have done what you said....But initially i want a listview of mine to be defined without store (without any data to show), and on selection/change in combobox value only it should be assigned with some store!

My Listview is giving me 'undefined is null or not an object' when I dont assign any store initially. How to prevent it?

saadkhan
1 Mar 2010, 12:50 AM
Oh I have done it......:)
I simply put
store: [] in listview definition....thanks