Results 1 to 7 of 7

Thread: Problem when more than 1 grid in my app

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    41
    Vote Rating
    2
      0  

    Default Answered: Problem when more than 1 grid in my app

    Hello,

    I have a problem in my app when I try to show more than one grid.

    If I set this :
    Code:
    Ext.application( {
        ...
        controllers: [
            'entity.Employee',
            'entity.Log'
        ],
        ...
    });
    ... the Employee grid is empty except ID field.

    If I set this :
    Code:
    Ext.application( {
        ...
        controllers: [
            'entity.Log',
            'entity.Employee',
        ],
        ...
    });
    ... the Log grid is empty except ID field.

    The grids :
    Code:
    var columns = [
        { header: 'Nom',       dataIndex: 'lastname', flex: 1 },
        { header: 'Prnom',    dataIndex: 'firstname', flex: 1 },
        { header: 'Initiales', dataIndex: 'initials', flex: 1 },
        { header: 'Titre',     dataIndex: 'title', flex: 1 },
        { header: 'ID',        dataIndex: 'id', flex: 1 }
    ];
    
    
    Ext.define('APP.view.entity.Employee', {
        extend: 'APP.pattern.view.entity.Grid',
        alias: 'widget.entityEmployeeList',
        xtype: 'entity-employee-list',
        store: 'Employee',
        columns: columns
    });
    Code:
    var columns = [
        { header: 'Date',      dataIndex: 'date', flex: 1 },
        { header: 'User name', dataIndex: 'userName', flex: 1 },
        { header: 'Action',    dataIndex: 'action', flex: 1 },
        { header: '@IP',       dataIndex: 'ip', flex: 1 },
        { header: 'ID',        dataIndex: 'id', flex: 1 }
    ];
    
    
    Ext.define('APP.view.entity.Log', {
        extend: 'APP.pattern.view.entity.Grid',
        alias: 'widget.entityLogList',
        xtype: 'entity-log-list',
        store: 'Log',
        columns: columns
    });
    Code:
    Ext.define('APP.pattern.view.entity.Grid', {
        extend: 'Ext.grid.Panel',
        ...
        title: null,
        autoHeight: true
    });
    The models :
    Code:
    Ext.define('APP.model.entity.Employee', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'id',        type:'integer' },
            { name:'firstname', type:'string' },
            { name:'lastname',  type:'string' },
            { name:'initials',  type:'string' },
            { name:'title',     type:'string' }
        ]
    });
    Code:
    Ext.define('APP.model.entity.Log', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'id',        type:'integer' },
            { name:'ip',        type:'string' },
            { name:'date',      type:'date' },
            { name:'userName',  type:'string' },
            { name:'action',    type:'string' }
        ]
    });
    The stores :
    Code:
    Ext.define( 'APP.store.Employee', {
        extend: 'APP.pattern.store.Entity',
        sorters: [{
            property: 'lastname',
            direction: 'ASC'
        }]
    });
    Code:
    Ext.define( 'APP.store.Log', {
        extend: 'APP.pattern.store.Entity',
        sorters: [{
            property: 'date',
            direction: 'DESC'
        }]
    });
    Code:
    Ext.define( 'APP.pattern.store.Entity', {
        extend: 'Ext.data.Store',
        constructor: function(config) {
            ...
            this.entity = config.storeId;
            ...
            this.model = 'APP.model.entity.' + this.entity;
            
            this.callParent(arguments);
        },
        remoteSort: true,
        autoLoad: true
    });
    Please can you help me ?

  2. Quote Originally Posted by b3f3 View Post

    Code:
    Ext.define( 'APP.pattern.store.entity.Proxy', {
        extend: 'Ext.data.proxy.Ajax',
        reader: Ext.create('APP.pattern.store.entity.JsonReader'),
        writer: Ext.create('APP.pattern.store.entity.JsonWriter'),
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        }
    });
    Do you think this is the reason of the problem?
    It might be. Try defining the reader/writer in the proxy's constructor.

  3. #2
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      0  

    Default

    Are you seeing your data requested from the server for each store when the app instantiates?

  4. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    41
    Vote Rating
    2
      0  

    Default

    Absolutely, I see the two queries with correct result data.

  5. #4
    Sencha Premium User
    Join Date
    Mar 2011
    Posts
    287
    Answers
    35
    Vote Rating
    46
      0  

    Default

    Where is your proxy defined? This looks like the Proxy's Reader is shared between the two stores, where the reader is only able to 'read' based on one of the model classes. The only attribute that is shared is the 'id' so that could be why that is the only one populated.

  6. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    41
    Vote Rating
    2
      0  

    Default

    Quote Originally Posted by chamacs View Post
    Where is your proxy defined? This looks like the Proxy's Reader is shared between the two stores, where the reader is only able to 'read' based on one of the model classes. The only attribute that is shared is the 'id' so that could be why that is the only one populated.
    The proxy is defined like this :

    Code:
    Ext.define( 'APP.store.Employee', {
        extend: 'APP.pattern.store.Entity',
        sorters: [{
            property: 'lastname',
            direction: 'ASC'
        }]
    });
    Code:
    Ext.define( 'APP.store.Log', {
        extend: 'APP.pattern.store.Entity',
        sorters: [{
            property: 'date',
            direction: 'DESC'
        }]
    });
    Code:
    Ext.define( 'APP.pattern.store.entity.JsonReader', {
        extend:          'Ext.data.JsonReader',
        totalProperty:   'total',
        successProperty: 'success',
        idProperty:      'id',
        root:            'data',
        messageProperty: 'message'
    });
    
    
    Ext.define( 'APP.pattern.store.entity.JsonWriter', {
        extend:         'Ext.data.JsonWriter',
        type:           'json',
        encode:         false,
        listful:        true,
        writeAllFields: true,
        returnJson:     true
    });
    
    
    Ext.define( 'APP.pattern.store.entity.Proxy', {
        extend: 'Ext.data.proxy.Ajax',
        reader: Ext.create('APP.pattern.store.entity.JsonReader'),
        writer: Ext.create('APP.pattern.store.entity.JsonWriter'),
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        }
    });
    
    
    Ext.define( 'APP.pattern.store.Entity', {
        extend: 'Ext.data.Store',
        constructor: function(config) {
            var stringToSubstract = 'entity.';
            this.entity = config.storeId;
    
    
            var entityLower = APP.Utility.StringHandling.firstCharToLower(this.entity);
    
    
            this.proxy = Ext.create('APP.pattern.store.entity.Proxy', {
                api: {
                    create:  eval('APP.app.params.server.urls.entities.' + entityLower + '.create'),
                    read:    eval('APP.app.params.server.urls.entities.' + entityLower + '.read'),
                    update:  eval('APP.app.params.server.urls.entities.' + entityLower + '.update'),
                    destroy: eval('APP.app.params.server.urls.entities.' + entityLower + '.delete')
                }
            });
    
    
            this.model = 'APP.model.entity.' + this.entity;
            
            this.callParent(arguments);
        },
        remoteSort: true,
        autoLoad: true
    });
    Do you think this is the reason of the problem?

  7. #6
    Sencha Premium User
    Join Date
    Mar 2011
    Posts
    287
    Answers
    35
    Vote Rating
    46
      1  

    Default

    Quote Originally Posted by b3f3 View Post

    Code:
    Ext.define( 'APP.pattern.store.entity.Proxy', {
        extend: 'Ext.data.proxy.Ajax',
        reader: Ext.create('APP.pattern.store.entity.JsonReader'),
        writer: Ext.create('APP.pattern.store.entity.JsonWriter'),
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        }
    });
    Do you think this is the reason of the problem?
    It might be. Try defining the reader/writer in the proxy's constructor.

  8. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    41
    Vote Rating
    2
      0  

    Default

    Quote Originally Posted by chamacs View Post
    It might be. Try defining the reader/writer in the proxy's constructor.
    Thank you very much.

    Now it's ok with :
    Code:
    Ext.define( 'APP.pattern.store.entity.Proxy', {
        extend: 'Ext.data.proxy.Ajax',
        constructor: function() {
            this.reader = Ext.create('APP.pattern.store.entity.JsonReader');
            this.writer = Ext.create('APP.pattern.store.entity.JsonWriter');
            
            this.callParent(arguments);
        },
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        }
    });

Tags for this Thread

Posting Permissions

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