I am new to sencha touch 2.0 and after using some custom xtype, i tried using Ext.ux.touch.grid.
I have a main tabpanel in which there is 2 panels, say entryReportPanel
Now in this entryReportPanel, i have called the xtype touchgridpanel.
But this does not display anything but a small part of the toolbar.
Even if i give a title or any width to the toolbar it does not show up anything.
Mitchell please help. Is there an issue with the layout.
Or is there any other way i ahve to use View.js
I have post the code below.
Ext.require([
'Ext.ux.touch.grid.View'
]);
Ext.define('TestModel', {
extend : 'Ext.data.Model',
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
});
var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
autoLoad : true,
data:[{company:'abc',price:234,change:'no',pct:'yes',updated:'yes'}]
});
Ext.define('Main.view.entryReportPanel', {
extend: 'Ext.Panel',
xtype:'entryReportPanel',
config: {
layout: 'card',
},
initialize: function() {
this.tabPanel = new Ext.TabPanel({
type: 'dark',
dock: 'top',
animation: 'cube',
items: [{
xtype: 'toolbar',
docked: 'top',
layout: {
pack: 'justify',
},
defaults: {
iconMask: true,
ui: 'plain'
},
items: [{
xtype : 'button',
iconCls: 'refresh',
iconAlign: 'right',
showAnimation: true,
scope: this,
handler: function() {
var tab = this.tabPanel.getActiveItem();
tab.onRefresh(tab);
}
}, {
xtype: 'segmentedbutton',
items: [{
text: 'Natraj Gas',
cls: 'mainAppTitle',
handler: function() {
client.showInfoWindow(); // It will work like a popup window
}
}],
}, {
xtype : 'button',
iconCls: 'settings',
iconAlign: 'left',
showAnimation: true,
handler: function() {
client.showSettingsWindow(); // It will work like a popup window
}
}]
},{
xtype : 'touchgridpanel',
title: '24 Hours',
width:'100%',
duration: 1,
store : store,
colModel : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
sortable : false,
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
width : '15%'
}
]
}]
});
this.add(this.tabPanel);
this.callParent(arguments);
},
});
The control is not displayed as in only the toolbar is displayed partially in the top left corner
can someone please help.
Please give an example where in the xtype touchgridpanel is called from a tabpanel
I am not getting this control to work for me