Ext.ux.touch.grid

[suzuki1100nz]

Hi,

Unfortunately it isnt just css.
In 2.1.0-b3 the dev team have added to the List class config - itemMap this has a config object that sets the minimumHeight to 47px.
Works well with your examples as thats the item height your expecting.

Doesnt work so well when you want a row height that is less like mine which is 35px.

Not sure why 47px was chosen as 44px is apples standard which the violate often

I got around this by adding to the constructor in the list.js

		//Override item map minimum height - set by sencha to 47px
		me.getItemMap()._minimumHeight = 25; 
		me.getItemMap().config.minimumHeight = 25;

[bhomass]

EDIT: I solved the problem. I wrapped it in a Container and it started working.

having the same issue using Ext.ux.touch.grid.List. Please elaborate what is this Container technique that solved the problem.

Thanks

Edit: I got it. inside the Ext.Container with items:[].
I am still having huge problems getting this to function fully.

first, after wrapping 'touchgridpanel' inside Ext.Container, I had to change all the .touchgridpanel to .x-touchgridpanel for css to still apply. next, I can not get the static data in the store to save. The only thing I am doing is change Ext.create() to Ext.define to observe the recommended project structure.

so I have

Ext.define('FirstApp.view.IntakeGrid', {
extend: 'Ext.Container',
xtype: 'intakegrid',
id: 'intakegridid',

requires: [
'Ext.ux.touch.grid.List',
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
],

config: {
fullscreen: true,

items: [
{
xtype: 'touchgridpanel',
config:{
fullscreen : true,
store : 'intakestore',

features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
},
columns : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell redgreen-cell',
width : '15%',
renderer : function (value) {
var cls = (value > 0) ? 'green' : 'red';

return '<span class="' + cls + '">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell redgreen-cell',
width : '15%',
renderer : function (value) {
var cls = (value > 0) ? 'green' : 'red';

return '<span class="' + cls + '">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
sortable : false,
width : '15%'
}
]
}
]
}



});

Ext.define('TestModel', {
extend : 'Ext.data.Model',

config : {
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
}
});

Ext.define('FirstApp.store.IntakeStore', {
extend: 'Ext.data.Store',
xtype: 'intakestore',
config: {
model : 'TestModel',
storeId: 'intakestore',
data : [
{ company : '3m Co', price : 71.72, change : 0.02, pct : 0.03, updated : '9/1/2010' },
{ company : 'Alcoa Inc', price : 29.01, change : 0.42, pct : 1.47, updated : '9/1/2010' },
{ company : 'Altria Group Inc', price : 83.81, change : 0.28, pct : 0.34, updated : '9/1/2010' },
{ company : 'American Express Company', price : 52.55, change : 0.01, pct : 0.02, updated : '9/1/2010' },
{ company : 'American International Group, Inc.', price : 64.13, change : 0.31, pct : 0.49, updated : '9/1/2010' },
{ company : 'AT&T Inc.', price : 31.61, change : -0.48, pct : -1.54, updated : '9/1/2010' },
{ company : 'Boeing Co.', price : 75.43, change : 0.53, pct : 0.71, updated : '9/1/2010' },
{ company : 'Caterpillar Inc.', price : 67.27, change : 0.92, pct : 1.39, updated : '9/1/2010' },
{ company : 'Citigroup, Inc.', price : 49.37, change : 0.02, pct : 0.04, updated : '9/1/2010' },
{ company : 'E.I. du Pont de Nemours and Company', price : 40.48, change : 0.51, pct : 1.28, updated : '9/1/2010' },
{ company : 'Exxon Mobil Corp', price : 68.1, change : -0.43, pct : -0.64, updated : '9/1/2010' },
{ company : 'General Electric Company', price : 34.14, change : -0.08, pct : -0.23, updated : '9/1/2010' },
{ company : 'General Motors Corporation', price : 30.27, change : 1.09, pct : 3.74, updated : '9/1/2010' },
{ company : 'Hewlett-Packard Co.', price : 36.53, change : -0.03, pct : -0.08, updated : '9/1/2010' },
{ company : 'Honeywell Intl Inc', price : 38.77, change : 0.05, pct : 0.13, updated : '9/1/2010' },
{ company : 'Intel Corporation', price : 19.88, change : 0.31, pct : 1.58, updated : '9/1/2010' },
{ company : 'International Business Machines', price : 81.41, change : 0.44, pct : 0.54, updated : '9/1/2010' },
{ company : 'Johnson & Johnson', price : 64.72, change : 0.06, pct : 0.09, updated : '9/1/2010' },
{ company : 'JP Morgan & Chase & Co', price : 45.73, change : 0.07, pct : 0.15, updated : '9/1/2010' },
{ company : 'McDonald\'s Corporation', price : 36.76, change : 0.86, pct : 2.40, updated : '9/1/2010' },
{ company : 'Merck & Co., Inc.', price : 40.96, change : 0.41, pct : 1.01, updated : '9/1/2010' },
{ company : 'Microsoft Corporation', price : 25.84, change : 0.14, pct : 0.54, updated : '9/1/2010' },
{ company : 'Pfizer Inc', price : 27.96, change : 0.4, pct : 1.45, updated : '9/1/2010' },
{ company : 'The Coca-Cola Company', price : 45.07, change : 0.26, pct : 0.58, updated : '9/1/2010' },
{ company : 'The Home Depot, Inc.', price : 34.64, change : 0.35, pct : 1.02, updated : '9/1/2010' },
{ company : 'The Procter & Gamble Company', price : 61.91, change : 0.01, pct : 0.02, updated : '9/1/2010' },
{ company : 'United Technologies Corporation', price : 63.26, change : 0.55, pct : 0.88, updated : '9/1/2010' },
{ company : 'Verizon Communications', price : 35.57, change : 0.39, pct : 1.11, updated : '9/1/2010' },
{ company : 'Wal-Mart Stores, Inc.', price : 45.45, change : 0.73, pct : 1.63, updated : '9/1/2010' }
]
}
});

the columns show up ok, but no data is loaded.

any ideas?

I looked for menu item which would wrap my code inside <code> but don't find it.

[bhomass]

I can not make this grid work using Ext.define() event using the Ext.Container wrapper.

first it was just the change of style class from touchgridpanel to x-touchgridpanel, then the grid no longer loads data from the store.

It would be a great service if someone can post code showing how to use this extension using Ext.define().

[e.taranov]

I have tabpanel inside another tabpanel.
When i put touchgridpanel inside it works perfect.
When i wrap it in container to put selectfield at top of grid - i have a problem with touchgridpanel.
It have heading columns but have no rows!
I think there is something wrong with CSS since i still see rows in DOM elements.

Mitchell, how can i fix that?

Here is an example of code to get an issue:

Ext.Loader.setConfig({
    enabled : true,
    paths   : {
        'Ext.ux.touch.grid': './Ext.ux.touch.grid'
    }
});


Ext.require([
    'Ext.tab.Panel',
    'Ext.field.Select',
    'Ext.ux.touch.grid.List',
    'Ext.ux.touch.grid.feature.Feature',
    'Ext.ux.touch.grid.feature.Sorter'
]);


Ext.setup({
    onReady: function() {


        Ext.define('TestModel', {
            extend : 'Ext.data.Model',


            config : {
                fields : [
                    'company',
                    'price',
                    'change',
                    'pct',
                    'updated'
                ]
            }
		});


        var store = Ext.create('Ext.data.Store', {
			model   : 'TestModel',
			data    : [
				{ company : '3m Co',                               price : 71.72, change : 0.02,  pct : 0.03,  updated : '9/1/2010' },
//...
				{ company : 'Wal-Mart Stores, Inc.',               price : 45.45, change : 0.73,  pct : 1.63,  updated : '9/1/2010' }
			]
		});




        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            tabBarPosition: 'bottom',


            defaults: {
                styleHtmlContent: true
            },


            items: [
                {
                    title: 'Reports',
                    iconCls: 'home',




                        xtype: 'tabpanel',
                        items: [
                            {
                                title: 'Report A',
                                // uncomment to get an issue
//                                xtype: 'container',
//                                items: [
//                                {
//                                    xtype: 'selectfield',
//                                    store: store,
//                                    displayField: 'company',
//                                    valueField: 'company'
//
//
//                                },
//                                {
                                    xtype: 'touchgridpanel',
                                    store      : store,


                                    features   : [
                                        {
                                            ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                                            launchFn : 'initialize'
                                        }
                                    ],
                                    columns   : [
                                        {
                                            header    : 'Company',
                                            dataIndex : 'company',
                                            style     : 'padding-left: 1em;',
                                            width     : '40%',
                                            filter    : { type : 'string' }
                                        },
                                        {
                                            header    : 'Price',
                                            dataIndex : 'price',
                                            style     : 'text-align: center;',
                                            width     : '15%',
                                            filter    : { type : 'numeric' }
                                        },
                                        {
                                            header    : 'Change',
                                            dataIndex : 'change',
                                            cls       : 'centered-cell redgreen-cell',
                                            width     : '15%',
                                            renderer  : function (value) {
                                                var cls = (value > 0) ? 'green' : 'red';


                                                return '<span class="' + cls + '">' + value + '</span>';
                                            }
                                        },
                                        {
                                            header    : '% Change',
                                            dataIndex : 'pct',
                                            cls       : 'centered-cell redgreen-cell',
                                            width     : '15%',
                                            renderer  : function (value) {
                                                var cls = (value > 0) ? 'green' : 'red';


                                                return '<span class="' + cls + '">' + value + '</span>';
                                            }
                                        },
                                        {
                                            header    : 'Last Updated',
                                            dataIndex : 'updated',
                                            hidden    : true,
                                            style     : 'text-align: right; padding-right: 1em;',
                                            sortable  : false,
                                            width     : '15%'
                                        }
                                    ]
//                                }] // uncomment to get an issue


                            },
                            {
                                title: 'Report B',
                                html: 'Text 2'
                            },
                            {
                                title: 'Report C',
                                html: 'Text 3'
                            }],
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });


    }
});

[mitchellsimoens]

You need to give the container a layout to manager the grid's height

[mwalzak]

I tried running the showhide example, but instead of the column disappearing, just the header for the column is hidden.

Is there a fix/workaround for this?

Thanks

[Ades]

hi guys,

i am using Sencha architect and i need something like a grid. So I try to do something with a grid.

therefor I also use Ext.ux.touch.grid, but I do not know how can I use it.

I try it with "Ext.define('MyApp.view.override.MyDataView', {
override: 'MyApp.view.MyDataView' .....", but there's something I'm doing wrong :-(
Can someone help me please :-(

[Whatty]

I have a grid which is already shown on the page and refresh the store, which results in no rows being returned, however the grid does not get updated.

Is this a known problem and what would the work around be?

Thanks in advance.

Whatty

[Sabakizin]

I tried running the showhide example, but instead of the column disappearing, just the header for the column is hidden.

Is there a fix/workaround for this?

Thanks

Hey, I'm having same problem here. Does anyone have solution?

[jfordyce@m2mdatacorp.com]

Hi Mitchell, I'm having the hardest time getting sort to work correctly. Would there be any issues that haven't been documented yet with using it inside a card layout in 2.1?