Results 1 to 4 of 4

Thread: How To Make ArrayStore Filter Data Depending On Combobox Selection?

  1. #1

    Default How To Make ArrayStore Filter Data Depending On Combobox Selection?

    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:

    Code:
    {
      "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:

    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' :

    Code:
    "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"
        }

  2. #2
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206

    Default

    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:

    Code:
    // 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.

  3. #3

    Default

    Code:
    // 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?

  4. #4

    Default

    Oh I have done it......
    I simply put
    Code:
    store: []
    in listview definition....thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •