Ext.ux.touch.grid

[mitchellsimoens]

I do this by getting the new column information from a previous view then destroying and recreating the grid with the new column information........ If there is a better way I would also like to know.

I can brainstorm on a better way to be built in but you could execute this:

var header = grid.getHeader();

header.setHtml(grid._buildTpl(grid.getColumns(), true));

That should update the header but not sure if it will have any issues.

[llraj]

Mitchell:

The grid looks great with horizontal scrolling. Is there a way to lock/freeze a column ? I have to lock the first column(of row labels) so that while scrolling horizontally user knows the row they are on. It is similar to the header row always being visible while scrolling vertically.

Thanks

[mitchellsimoens]

Working on that on my off time (which isn't much). I had locking working but the scrolling of the nonlocked columns wasn't working in horizontal scrolling so I dumped it to take a fresh look at it.

[Soenhay]

I can brainstorm on a better way to be built in but you could execute this:

var header = grid.getHeader();

header.setHtml(grid._buildTpl(grid.getColumns(), true));

That should update the header but not sure if it will have any issues.

This works for me with one difference... instead of using grid.getColumns() I put my new columns array. Thanks

27Apr2012
Edit: This doesn't seem to work if I add or remove columns.

[AnujaSonawane]

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

[AnujaSonawane]

Hi Michell, tried given by you on page 1 for the carousel
But i guess i am going wrong with the layouts.
I have taken the code as it is but it showing up like it is shown in the pic attached.

Can u please tell me what is wrong?
The response for this xtype seems to be really great, but as i am not getting it right, i am confused as to what is going wrong.try1.jpg

[alexgrimaldi]

Hi Mitchell,

first of all thank you very much for this component.

I am having a odd problem. When I define a grid that extends Ext.ux.touch.grid.View, I have to define its height in the config section otherwise the grid will show only its headers an not the data. On the other hand, If I create a Ext.ux.touch.grid.View I do not need to. I am sure that I am missing something but I do not know what.

Can you (or anybody else) please help?

Thanks,
Alex

[Soenhay]

I am having a odd problem. When I define a grid that extends Ext.ux.touch.grid.View, I have to define its height in the config section otherwise the grid will show only its headers an not the data. On the other hand, If I create a Ext.ux.touch.grid.View I do not need to. I am sure that I am missing something but I do not know what.

Try setting flex: 2 in the config section.

[mitchellsimoens]

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

It looks like your items are children of the toolbar which is docked. I don't think you are meaning to do that.

[llraj]

Mitchell:

How can I have a tap handler for the grid that has access to the row-column data? i.e. column defined in grid config where tap occurred and the row/record from the store. The tap handler for DataView provides the row I just need the column.

Thanks

Lawrence