Results 1 to 4 of 4

Thread: grid not showing data

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    26
    Answers
    1
    Vote Rating
    0
      0  

    Default grid not showing data

    I am trying to populate Ext JS 4 Grid with json data. Unfortunatelly no matter what i do it's still remains empty. The JS function is below:
    Code:
    
    
    Code:
    Ext.define('contactsModel',
                {
                     extend:'Ext.data.Model',
                     fields:[
                        'noteid',
                        'address',
                        'city','zipcode',
                        'job_title','role',
                        'first_name',
                        'last_name',
                        'bloomberg',
                        'sector',
                        'industry',
                        'parent'
                         ]
                }
               );//eof contactsModel
    
    
    function()
                {
                    //creo lo store peri contatti
        var storeContacts=Ext.create('Ext.data.Store',
                         {
                        pageSize:25,
                        model:'contactsModel',
                        totalProperty:'total',
                        autoLoad:false,
                        root:'result',
                        listeners:
                        {
                            load : function(store)
                                {
                                    console.log("loaded contacts");
                                    console.debug(store);
                                 //   Ext.getCmp('numRow').setText("Companyes: "+store.getCount());
                                }
                        },
                        proxy:
                        {
                            idProperty: 'id',
                            type: 'direct',
                            directFn: QueryDatabase.getContacts,
                            totalProperty:'total',
                            root:'results',
                            
                        }
                         }
                         );//eof storeContacts/
        //carico lo store
        storeContacts.load({id:record.data.id});
        console.log("storecontacts");
        console.debug(storeContacts);
        //creo contactsGrid
        var contactsGrid=Ext.create('Ext.grid.Panel',
                        {
                        
                        store:storeContacts,
                        height: 1950,
            //width: 1300,
                        columns:[
                            {
                                dataIndex:'id',
                                text:'Id',
                                hidden:true
                            },
                            {
                                dataIndex:'address',
                                flex:1,
                                text:'Address',
                            },
                            {
                                dataIndex:'city',
                                text:'City',
                                flex: 0.75
                            },
                            {
                                dataIndex:'zipcode',
                                text:'zipcode',
                                flex:'0.5'
                            },
                            {
                                dataIndex:'job_title',
                                text:'Job Title',
                                flex:'0.7'
                            },
                            {
                                dataIndex:'role',
                                text:'Role',
                                flex:'0.5'
                            },
                            {
                                dataIndex:'first_name',
                                text:'First Name',
                                flex:'0.8'
                            },
                            {
                                dataIndex:'last_name',
                                text:'Last Name',
                                flex:'0.8'
                            },
                            {
                                dataIndex:'bloomberg',
                                text:'Bloomberg',
                                flex: '1'
                            },
                            {
                                dataIndex:'sector',
                                text:'Sector',
                                flex:'0.7'
    
    
                            },
                            {
                                dataIndex:'industry',
                                text:'Industry',
                                flex:'1.5'
                        
                            },
                            {
                                dataIndex:'parent',
                                text:'Parent',
                                flex:'2'
                            }
                            
                            
                        ]
                        
                        });//eof contactsGrid
                    console.log("contatti record.data");
                    console.debug(record.data);
                    
                    
                    company_title=record.data.name;
                    var tab=tabs.add(
                         //notesGrid,
                         {
                            title: "Contacts at "+record.data.name,
                            closable: true,
                            items:contactsGrid,
                            //html : 'A simple tab'+index,
                            
                         });
                    tabs.setActiveTab(tab);
                }
            },


    The server responce is a valid json that looks like:
    Code:
    
    
    Code:
    {"type":"rpc","tid":1,"action":"QueryDatabase","method":"getResults","total":null,"result":[{"noteid":"183","address":"...","city":"...","type":"...","equities_client_type":"...","sector":"...","industry":"...","parent":"...","website":"...","status":"Active","group_sector":"...","alternative_name":"XXXX","id":"320","name":"XXX","updated_by":"....","country":"...","line":"OPEN","note":"...","DATE":"2010-12-16 09:27:39","update_date":"2010-12-16 09:27:39"},....


    so it looks ok. However the grid view is not showing the anything. Anyone can see what i am doing wrong?
    Last edited by arpho; 28 Jul 2012 at 1:22 AM. Reason: mistake in my post

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    This loads you existing json:

    flex is numeric

    Code:
    Ext.define('contactsModel', {
        extend: 'Ext.data.Model',
        fields: ['id', 'noteid', 'address', 'city', 'zipcode', 'job_title', 'role', 'first_name', 'last_name', 'bloomberg', 'sector', 'industry', 'parent']
    }); 
    
    Ext.onReady(function() {
    
        Ext.create('Ext.data.Store', {
            storeId: 'gridStore',
    
            model: 'contactsModel',
    
            autoLoad: true,
            proxy: {
                idProperty: 'id',
                totalProperty: 'total',
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    root: 'result'
                }
            }
        });
    
        Ext.create('Ext.grid.Panel', {
            title: 'Grid',
    
            store: Ext.data.StoreManager.lookup('gridStore'),
    
            columns: [
            {
                dataIndex: 'id',
                header: 'Id'
                //hidden: true // so we can see record exists
            }, {
                dataIndex: 'address',
                flex: 1,
                header: 'Address',
            }, {
                dataIndex: 'city',
                header: 'City',
                flex: 0.75
            }, {
                dataIndex: 'zipcode',
                header: 'zipcode',
                flex: 0.5
            }, {
                dataIndex: 'job_title',
                header: 'Job Title',
                flex: 0.7
            }, {
                dataIndex: 'role',
                header: 'Role',
                flex: 0.5
            }, {
                dataIndex: 'first_name',
                header: 'First Name',
                flex: 0.8
            }, {
                dataIndex: 'last_name',
                header: 'Last Name',
                flex: 0.8
            }, {
                dataIndex: 'bloomberg',
                header: 'Bloomberg',
                flex: 1
            }, {
                dataIndex: 'sector',
                header: 'Sector',
                flex: 0.7
            }, {
                dataIndex: 'industry',
                header: 'Industry',
                flex: 1.5
    
            }, {
                dataIndex: 'parent',
                header: 'Parent',
                flex: 2
            }
            ],
    
            height: 200,
            width: 1000,
            renderTo: Ext.getBody()
        });
    
    });
    Scott.

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    26
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks a lot, now it works

  4. #4
    Sencha User
    Join Date
    Feb 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default i'm getting only 50 rows of data in grid.but I'm getting all the data in server side

    hereisthecode



    var queueStore = Ext.create('Ext.data.JsonStore', {
    storeId : thisObj.currentInbox.Name
    + 'queueStore',
    pageSize : 20,
    remoteSort : false,
    proxy : {
    type : 'memory',
    reader : {
    type : 'json',
    root : 'data',
    totalProperty : 'total'
    }
    },
    sorters : [ sort],
    model : thisObj.currentInbox.Name
    + 'QueueEntry',
    listeners : {
    beforeload : function(store, operation,
    eOpts) {
    //debugger;
    thisObj.Helpers.inboxHelper.InboxStoreBeforeload(store, operation, fetchedData, myData);
    }
    }
    });

Posting Permissions

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