Ext.ux.touch.grid

[mitchellsimoens]

Don't know what happened, but now its working. Maybe I didn't hard refresh. Thanks for your help mitchellsimoens!!!

Great!

Just uploaded a quick MVC example. Basically the default app that is created when you create an app with Sencha Command and added a 3rd tab at the bottom with a simple grid.

[vitand]

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

[TonyBones]

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?

[TonyBones]

Boom! figured it out.

It doesn't like this, these are child items of a Tab Panel

{
title: 'Approvals',
iconCls: 'organize',

items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Approvals'
},
{
xtype: 'touchgridpanel',
title: 'grid',
store: 'ApprovalLineItemStore',

columns: [ ... ]

but it does like this as tab panel child

{
xtype: 'touchgridpanel',
title: 'Approvals',
iconCls: 'organize',

store: 'ApprovalLineItemStore',

items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Approvals'
}
],

columns: [ ... ]

[tinyfactory]

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

[potnuru]

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

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
             }
         ],
        }],
    }
}); 

Has anybody experienced the same issue ?
Thanks

[mitchellsimoens]

Do you have a store that the grid is using?

[potnuru]

Do you have a store that the grid is using?

Here you go Mitchell .. I have store and model attached for you

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"
            }]
    },

   
}); 

[mitchellsimoens]

I don't see where in your grid that you are specifying the store

[potnuru]

I don't see where in your grid that you are specifying the store

Mitchell I kind of do it in the controller. Here is the controller snippet

    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);
    },