Can we use Grid inside Sencha Container?

Question

I want to display a list from sencha store. I want to display it as a table with header, hence I thought Grid would be perfect for it. But I am getting this error

Uncaught TypeError: Cannot call method 'substring' of undefined

Is it because I used Grid as an item in Container? If not whats the problem, how can I achieve my goal?

I have commented out Grid. I used a "list" to display records but as I want to add a header to the list, I think Grid would do it more easily.

'Ext.define("PocketCRM.view.InvestorsList", { extend: "Ext.Container", requires: [ "Ext.dataview.List", ], alias: "widget.investorslistview", config: { layout: { type: "vbox",

    },
    items: [
        {
            xtype: "toolbar",
            docked: "top",
            title: "Investor Details",

            items: [
                {
                    xtype: "button",
                    ui: "back",
                    text: "Back",
                    itemId: "backToDeal"
                }
               ]
        },
        {
            xtype: "label",
            html: "Select a Client Area"
        },
        { 
            xtype: "list",                
            store: "Investors",
            itemId : "InvestorsList",
            onItemDisclosure: true,
            indexBar: false,
            grouped: false,
            disableSelection: false,
            loadingText: "Loading Investors...",
            emptyText: '<div class="leads-list-empty-text">No Investors found.</div>',
             itemCls : "dataview-item",
             itemTpl:[
                '<table border="0" cellpadding="2" cellspacing="2" style="width:95%; margin-top:0px;"><tr>',
                '<td style="width:20%; text-align: center; line-height: 3;  font-size: 16px;">{Account__c}</td>',
                '<td style="width:20%; text-align: center; line-height: 3;  font-size: 16px;">{Primary_Contact_Name__c}</td>',
                '<td style="width:20%; text-align: center; line-height: 3;  font-size: 16px;">{Status__c}</td>',
                '<td style="width:15%; text-align: center; line-height: 3;  font-size: 16px;">{Contact_Phone__c}</td>',
                '<td style="width:20%; text-align: center; line-height: 3;  font-size: 16px;">{Primary_Contact_Email__c}</td>',
                '</tr></table>'
               ],
            listeners : {
                    scope : this,
                    itemtap : function(dataview, index, el, record, e){
                        //Browser event e
                        console.log(e.target,Ext.get(e.target).getAttribute('id'));
                        var formPanel = Ext.create('Ext.form.Panel',{
                             modal : true,
                            hideOnMaskTap : true,
                            centered : true,
                            scrollable : 'vertical',
                            width : 400,
                            height : 200,
                            layout: { type: 'vbox', align: 'stretch' },
                            items:[{
                                xtype: 'selectfield',
                                name: 'Status__c',
                                label: 'Status',
                                options: [ 
                                     {text: 'Pending', value: 'Pending'}, 
                                     {text: 'Accepted', value: 'Accepted'}, 
                                     {text: 'Final Bidder', value: 'Final Bidder'},
                                     {text: 'Dropped', value: 'Dropped'},
                                     {text: 'Rejected', value: 'Rejected'}, 
                                     {text: 'Closed', value: 'Closed'} 
                                 ]
                                 },
                                 {xtype: 'spacer'},
                                 {xtype: 'spacer'},
                                 {
                                    xtype: 'button',
                                    //width : 100,
                                    text: 'Save',
                                    handler: function(){
                                        console.log('Inside Save');
                                        var InvStore = Ext.getStore('Investors');
                                        InvStore.sync();
                                        console.log('Completed Sync');
                                        formPanel.hide();
                                    }
                                 },
                                 {xtype: 'spacer'},
                                 {
                                    xtype: 'button',
                                    text: 'Cancel',
                                    //width : 100,
                                    handler: function(){
                                        formPanel.hide();
                                    }
                                 }]

                        });
                        formPanel.setRecord(record);
                        Ext.Viewport.add(formPanel).show();
                    }
                }

        },
        {
            //xtype: "grid.panel",
            //columns: [
              //  {text: 'Account',  dataIndex:'Account__c'},

            //],

        },
        ],
        listeners: [
        {
            delegate: "#backToDeal",
            event: "tap",
            fn: "onBackDealTap"
        },
        {        
        delegate: "#InvestorsList",
        event: "disclose",
        fn: "onInvestorsListDisclose"
        }
    ]
},'

Answer 1

The xtype is not grid.panel, it's just grid.

Relevant doc link: http://docs.sencha.com/touch/2.3.1/#!/api/Ext.grid.Grid