1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    40
    Vote Rating
    2
    b3f3 is on a distinguished road

      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: 'Prénom',    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 - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,093
    Vote Rating
    228
    Answers
    488
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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
    40
    Vote Rating
    2
    b3f3 is on a distinguished road

      0  

    Default

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

  5. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    212
    Vote Rating
    33
    Answers
    22
    chamacs has a spectacular aura about chamacs has a spectacular aura about

      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
    40
    Vote Rating
    2
    b3f3 is on a distinguished road

      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
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    212
    Vote Rating
    33
    Answers
    22
    chamacs has a spectacular aura about chamacs has a spectacular aura about

      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
    40
    Vote Rating
    2
    b3f3 is on a distinguished road

      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'
        }
    });

Thread Participants: 2

Tags for this Thread