ExtJS: Load Grid From Another Grid

May 23rd, 2011 by aditia rahman / 10 Comments  

     

About last week I got a question from a friend in ExtJS subject, like this pst title said he asking how to load a grid from another grid, which mean the first grid loaded when the page load, and the second grid loads when a row in the first grid clicked.

Extjs load grid from other grid

This is really simple actually, in this example I’m using static json file as a data source, the data are the company list and the company product list, i get all this data from wikipedia.

view demo | download source

First let define the data by creating two json file, I named company.json and products.json, these two data connected by company_id property that defined in products.json. Here the code look a like.

Company.json
{'companies': [{
    'id': '1',
    'name': 'Google',
    'founded': 'September 4, 1998',
    'people': 'Sergey Brin, Larry Page'
}, {
    'id': '2',
    'name': 'Microsoft',
    'founded': 'April 4, 1975',
    'people': 'Bill Gates, Paul Allen'
}, {
    'id': '3',
    'name': 'Yahoo',
    'founded': 'March 1, 1995',
    'people': 'Jerry Yang, David Filo'
}
]}
Products.js
{'products': [{
    'company_id': '1',
    'name': 'Google Analytics',
    'type': 'Web Statistics'
}, {
    'company_id': '1',
    'name': 'Gmail',
    'type': 'Communication'
}, {
    'company_id': '2',
    'name': 'Xbox',
    'type': 'Game Console'
}, {
    'company_id': '2',
    'name': 'Bing',
    'type': 'Web Search'
}, {
    'company_id': '3',
    'name': 'Yahoo! Publisher Network',
    'type': 'Web Advertising'
}
]}
Full Source Code
Ext.onReady(function() {
   Ext.define('Company', {
       extend: 'Ext.data.Model',
       fields: ['id', 'name', 'founded', 'people']
   });

   var store_company = new Ext.data.Store({
      model: 'Company',
      proxy: {
          type: 'ajax',
          url: 'company.json',
          reader: {
              type: 'json',
              root: 'companies'
          }
      }
   });

    var grid_company = Ext.create('Ext.grid.Panel', {
        store: store_company,
        columns: [
            {
                text     : 'Company Name',
                dataIndex: 'name'
            },
            {
                text     : 'Founded',
                width    : 200,
                dataIndex: 'founded'
            },
            {
                text     : 'Key People',
                width    : 250,
                dataIndex: 'people'
            }
        ],
        height: 200,
        width: 550,
        title: 'Company List',
        renderTo: 'grid-company',
        viewConfig: {
            stripeRows: true
        },
        listeners: {
            itemclick : function() {
                var data = grid_company.getSelectionModel().selected.items[0].data;
                grid_product.setTitle(data.name + ' Products List');
                store_product.clearFilter();
                store_product.filter('company_id', data.id);
                store_product.load();
            }
        }
    });

    store_company.load();

    Ext.define('Product', {
       extend: 'Ext.data.Model',
       fields: ['company_id', 'name', 'type']
    });

    var store_product = new Ext.data.Store({
      model: 'Product',
      proxy: {
          type: 'ajax',
          url: 'products.json',
          reader: {
              type: 'json',
              root: 'products'
          }
      }
    });

    var grid_product = Ext.create('Ext.grid.Panel', {
        store: store_product,
        columns: [
            {
                text     : 'Product Name',
                dataIndex: 'name',
                width    : 350,
            },
            {
                text     : 'Type',
                width    : 200,
                dataIndex: 'type'
            }
        ],
        height: 200,
        width: 550,
        title: 'Product List',
        renderTo: 'grid-product',
        viewConfig: {
            stripeRows: true
        }
    });
});

The main function in this example is the itemclick listener on the company name grid, we can directly filter the store by using filter() method, but remember to use clearFilter() too, otherwise each time the filter called, the filter condition will be stacked, somekind the “and” operator in programming.

listeners: {
    itemclick : function() {
        var data = grid_company.getSelectionModel().selected.items[0].data;
        grid_product.setTitle(data.name + ' Products List');
        store_product.clearFilter();
        store_product.filter('company_id', data.id);
        store_product.load();
    }
}

That a simple example using the static json data, to use other data like array or dynamic data, like fetching from php, you can modified the store component for example using the arraystore.

view demo | download source

Extjs load grid from other grid

        submit to reddit Delicious

10 Comments Leave a Comment Subscribe RSS

  • empugandring says:

    Do you know bro?you’r my Hero…..cup cup muah muah :D

    Tengkyu so mat

  • panega says:

    very good, … mas, mau tanya dari tutorial2 yg extjs ini menggunakan extjs versi berapa yah, sebab saya baru coba, download versi yang 4.0.1, apa perbedaannya extjs yang mas pakai dengan extjs 4.0.1, mhn bimbingannya, maaf nubi yg baru mau belajar… trims…

    • postingan yg mulai dari bulan Mei 2011 saya gunakan ExtJS 4, saya berusaha mengikuti versi ExtJS terbaru yg stabil,
      di source code yg saya sertakan sudah ada extjs bisa dilihat sendiri versinya.
      ExtJS 4 dan ExtJS 4.01 tidak banyak berbeda jadi bisa digunakan
      jika dengan ExtJS 3 perbedaannya banyak sekali, misal dari cara pembuatan komponen, extjs 4 mendukung arsitektur MVC, dll
      selengkapnya bisa dibandingkan antara dokumentasi yg versi 4 & versi 3,
      thanks sudah berkunjung, tetap semangat belajar nya

  • panega says:

    ya mas, trimakash supportnya… semangat…

  • Kasper says:

    Great and easy to understand.

    You could consider to move the proxy from the store to the model – in general this is better – since many stores can share the same model, hence you only have to describe the proxy once.

  • narku says:

    Mantap nih gan….oiya kalo grid yang akan di load sebelumnya di sembunyikan lalu saat di grid utama di klik barisnya grid yg disembunyikan muncul gimana caranya ??

  • David says:

    Has anyone successfully adapted this to dynamic data. Ive been trying for days and I just cant seem to do it.

    Any help would be great and if there are any other tutorials or samples please let me know.

  • code tersebut akan bermasalah jika nilai lebih dari 1 karakter misal id = 1 dan company_id =12

    mereka akan memanggil keduanya, terimakasih

  • Mungkin lebih baik jika menerapkan hal demikian :

    var store = this.getPurchaseGrid().getStore();
    var f = record.data.keranjang_id_induk;
    store.clearFilter(true);
    store.filter([
    {property: "company_id", value: f},
    {filterFn: function(item) { return item.get("company_id") == f; }}
    ]);
    store.load();

    But. Nice Referendi brow…

  • exteri says:

    Could you post the same example as MVC using Sencha Architect ?

    Thanks in advance.

Leave a Comment