Mitchell Simoens @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
Just downloaded Ext.ux.touch.grid from github, but when I tried to use it in my project I got the following error.
- [COLOR=red !important]Uncaught TypeError: Cannot read property 'features' of undefined [/COLOR]Ext.define.constructor View.js:21
Debugging View.js I found that config is undefined in constructor: function(config) {
Here is the code where I am defining the datagrid
Ext.define('mobile.view.test.Test', {
extend: 'Ext.ux.touch.grid.View',
requires: [
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
],
layout: 'fit',
config: {
store : 'mobile.test.TestStore',
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [
{
header : 'Name',
dataIndex : 'name',
style : 'padding-left: 1em;',
width : '40%',
filter : { type : 'string' }
},
{
header : 'Class Path',
dataIndex : 'classPath',
style : 'text-align: center;',
width : '15%',
filter : { type : 'string' }
}
]
}
});
Has anybody experienced the same issue ?
Thanks
I'm having a rendering problem now. All my data items / rows are there, but the x-body x-scroll-view container div has a height of 0px. So all I see is the header across the top. If I manually change the the height then i see my rows. I tried using layout: 'fit' in the parent panel, but when i do then everything disappears. I'm not using fullscreen because i have it as a nested object in a tab panel.
The touchgridpanel's css is included and working. Any other ideas?
Boom! figured it out.
It doesn't like this, these are child items of a Tab Panel
but it does like this as tab panel childCode:{title: 'Approvals', iconCls: 'organize', items: [ {docked: 'top', xtype: 'titlebar', title: 'Approvals'}, {xtype: 'touchgridpanel', title: 'grid', store: 'ApprovalLineItemStore', columns: [ ... ]
Code:{xtype: 'touchgridpanel', title: 'Approvals', iconCls: 'organize', store: 'ApprovalLineItemStore', items: [{docked: 'top', xtype: 'titlebar', title: 'Approvals'}], columns: [ ... ]
Last edited by TonyBones; 4 May 2012 at 3:05 PM. Reason: Code Formatting
I see this component extends DataView, but I can't get it to use the emptyText value. Is there a good way to display emptyText when the grid has no records?
Thanks for the great component. Extremely helpful!
Alex
Recently downloaded Ext.ux.touch.grid from github, but when I tried to use it in my project it works without any error in the console.
But the sorting functinality doesn't work on this grid.
Here is the view code where I am defining the datagrid
Has anybody experienced the same issue ?PHP Code:
Ext.define('LSTablet.view.quoter.AllQuotesSummary', {
extend: 'Ext.Container',
xtype: 'allQuotesSummary',
id: 'allQuotesSummary',
layout: 'vbox',
fullscreen: true,
layoutConfig: {
align: 'center'
},
requires: [
'Utils.Renderer',
'Ext.XTemplate',
'Ext.util.Format',
'Ext.field.Email',
'Ext.field.Select',
'Ext.field.Spinner',
'Ext.field.DatePicker',
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter',
'LSTablet.view.quoter.DealQuoteSummary',
],
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'toolbarui',
items: [{
xtype: 'button',
text: 'Main Menu',
ui: 'buttonuiblack',
id: 'quoteBackButton',
name: 'quoteBackButton'
},
{
xtype: 'spacer'
},
{
xtype: 'title',
title: 'All Quotes'
},
{
xtype: 'spacer'
}]
},
{
xtype: 'toolbar',
docked: 'top',
ui: 'gridToolbar',
cls: 'tableToolbar',
items: [{
xtype: 'title',
title: 'All Quotes'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
name: 'searchButton',
id: 'searchButton',
iconCls: 'search',
iconMask: true,
cls: 'tableToolbarButton',
ui: 'buttonuiblack'
},
{
xtype: 'button',
name: 'addButton',
id: 'addButton',
iconCls: 'add',
iconMask: true,
cls: 'tableToolbarButton',
ui: 'buttonuiblack'
}
]
},
{
xtype: 'touchgridpanel',
id: 'allquotegrouppanel',
height: 800,
features: [{
ftype: 'Ext.ux.touch.grid.feature.Sorter',
launchFn: 'initialize'
}],
columns: [
{
header: 'Date',
dataIndex: 'updatedDate',
width: '15%',
renderer: Utils.Renderer.date,
style : 'text-align: center;',
sortable : true,
},
{
header: 'Customers',
dataIndex: 'customerName',
width: '35%',
style : 'text-align: center;',
},
{
header: 'Quote Group Name',
dataIndex: 'quoteGroupName',
width: '25%',
style : 'text-align: center;',
},
{
header: 'Financed Amount $',
dataIndex: 'totalFinancedAmount',
width: '25%',
style : 'text-align: center;',
renderer: Utils.Renderer.dollar
}
],
}],
}
});
Thanks
Do you have a store that the grid is using?
Mitchell Simoens @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
Here you go Mitchell .. I have store and model attached for you
PHP Code:
Ext.define('LSTablet.store.quoter.AllQuotesSummary', {
extend: 'Ext.data.Store',
requires: [ 'LSTablet.model.quoter.AllQuotesSummary'],
requires: [
'Utils.Url',
],
config:{
model : 'LSTablet.model.quoter.AllQuotesSummary',
storeId : 'AllQuotesSummaryStoreId',
// remoteFilter: true,
// remoteSort: false,
autoLoad: false,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
url: Utils.Url.rootPath + Utils.Url.getAllMyQuoteGroupsURL,
startParam: true,
extraParams: {},
requestPayload:{},
enablePagingParams: false,
noCache: false,
headers: {
'Content-Type': 'application/json;'
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
Ext.define("LSTablet.model.quoter.AllQuotesSummary", {
extend: 'Ext.data.Model',
config: {
fields: [{
name: "quoteGroupId",
type: "int"
},
{
name: "quoteGroupName",
type: "string"
},
{
name: "quoteGroupStatus",
type: "string"
},
{
name: "customerName",
type: "string"
},
{
name: "totalFinancedAmount",
type: "int"
},
{
name: "updatedDate",
type: "int"
}]
},
});
I don't see where in your grid that you are specifying the store
Mitchell Simoens @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
Mitchell I kind of do it in the controller. Here is the controller snippet
PHP Code:
loadQuoteGroups: function(){
console.log('loadQuoteGroups for allQuotesSummary');
Ext.getStore('AllQuotesSummaryStoreId').load({
callback: this.onAllQuoteGroupsLoaded,
scope: this,
});
},
onAllQuoteGroupsLoaded: function(){
var quoteIdStore = Ext.getStore('AllQuotesSummaryStoreId');
this.getGridPanel().setStore(quoteIdStore);
},