Results 1 to 6 of 6

Thread: One grid for one store

  1. #1
    Sencha User Boston's Avatar
    Join Date
    Oct 2011
    Posts
    27
    Answers
    3

    Default Answered: One grid for one store

    Hello!

    In my first project I (abolut ExtJS beginner) have to use several grids and datastores and the only difference between them is that they show different parts of data out of the same database table.

    Now I got the idea that it would be better only to use one datastore and one grid which are created with parameters. Something like

    Code:
    var myStore = Ext.create('Ext.data.Store', {
    [...]
    proxy{
    [...]
    url: [Something with PARAM]
    [...]
    }
    [...]
    };
    
    var myGrid = Ext.create('Ext.grid.Panel', {
    [...]
    store: myStore(PARAM)
    [...]
    };
    
    var g = new myGrid(PARAM);
    After searching long time in this forum and at Google I got no hint how it could be realized or if it is possiblie at all.

    It would be great if someone could tell me if I try something which is not possible in ExtJS or where I can get some hints how to do it.

    Thanks!

  2. You can use the same store and call filterBy() or filter() in store load event, on a tab change event to filter the data as needed.

    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    You want to show different data from the same table in 1 grid?

    Can you present your question in a different manner .. I am not sure I understand your vision and what is the end result.

    Scott.

  4. #3
    Sencha User Boston's Avatar
    Join Date
    Oct 2011
    Posts
    27
    Answers
    3

    Default

    Hello Scott,

    I have a table in which I log how often a specific request occured.

    The result should be shown in three different Tabs of a tab panel where one tab shows that last 3 month, another tab the last 6 month and thes last one the last 12 month.

    My question is, that I don't need three datastores and three grids because it should be possible to use one store and one grid with parameters. But I can't figgure out how.

    Boston

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    You can use the same store and call filterBy() or filter() in store load event, on a tab change event to filter the data as needed.

    Scott.

  6. #5
    Sencha User Boston's Avatar
    Join Date
    Oct 2011
    Posts
    27
    Answers
    3

    Default

    Hello Scott,

    thank you for the hint. I hope I can test it within the next two days, because another project with higher priority.

    I have to look how to sent the parameters to the store.

    Boston

  7. #6
    Sencha User Boston's Avatar
    Join Date
    Oct 2011
    Posts
    27
    Answers
    3

    Default

    Hello Scott,

    meanwhile I tried to find a solution for my problem using your hint. While looking for it I noticed the posibility of using extraParams of the proxy. Now I can set these by
    Code:
    store.proxy.extraParams.key='value';
    out of the tabs.

    But now I face a new problem. Only the last tab is rendered. On the console I can see that the correct data is in the different stores but when the first tabs are activated no grid is visible.

    For me it looks like as the grid which is an item of the tab is not activated because I get no output with console.log().

    It would be great if you, or someone else, could help me again.

    UPDATE: It seems as if the grid is renderes in the last tab an all the updates of the data are displayed there. Am I right when I look for a way how to define where the grid has to be rendered. renderTo tabpanel.id didn't work.

    Here some code snippets:

    The tabbar:
    Code:
        var MyTabbar = Ext.create('Ext.TabPanel', {
            title : "Title",
            id: 'tHs',
            hidden : false,
            items: [{
                title: '1st',
                id: '1',
                items: [grid],
                params: {"key":"1"},
                
            listeners:{
                activate:{
                    fn: function(tabpanel,tab){
                        console.log(this.id + ' ' + this.params.mon);
                        store.proxy.extraParams.key='1'; //<< I know it's a redundancy which I want to clean up later
                        dsHs.load();
                    }
                }
            },
    [...]
    The grid:
    Code:
        var grid = Ext.create('Ext.grid.Panel', {
            title : false,
            border : 0,
    
    listeners:{
        beforerender:{ fn: function () {
        console.log('Grid');
    }}},            
    
            store : Ext.data.StoreManager.lookup('store'),
            bbar : new Ext.PagingToolbar({
                store : 'store',
                displayInfo : true,
                prependButtons : true,
                emptyMsg : "No data",
                totalProperty : 'total',
                pageSize : 25
            }),
            columns : [{
      [...]
    The store:
    Code:
        var store = Ext.create('Ext.data.Store', {
            storeId : 'store',
            autoLoad : true,
            remoteSort : true,
            model : 'Mod',
            proxy : {
                type : 'ajax',
                url : 'url/to/backend.php',
                extraParams: {
                    task: 'task',
                    intervall: '1'
                },
                reader : {
                    type : 'json',
                    root : 'results'
                }
            }
        });

Posting Permissions

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