Can we use Grid inside Sencha Container? - mobile

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 errorUncaught 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