Ext.ux.touch.grid

[mitchellsimoens]

docking toolbars in a dataview, the scroller won't update it's size to allow for scrolling fully. Adding a bottom margin helps.

.touchgridpanel .x-dataview-container {
    margin-bottom : 2.5em;
}

For example.

[Eugene Ivakhiv]

The code you've provided is already in Ext.ux.grid.View.css
However it does not influence visibility of bottom docked toolbar which is still below the visible area.

[mitchellsimoens]

The code you've provided is already in Ext.ux.grid.View.css
However it does not influence visibility of bottom docked toolbar which is still below the visible area.

Looking good for me.

[Eugene Ivakhiv]

I think this is some kind of misunderstanding.

Mentioned margin has nothing to do with the bottom toolbar. Can you try it for yourself?
Just change toolbar docked attribute from 'top' to 'bottom' in showhide.js

[mukeshgla]

Hi,

I have increased the number of columns from 5 to 10, but the grid view is distorted, can anyone please tell me how to render propersencha.jpg

[elastoffice]

I have a direct store and I have set remoteSorting: true.
The problem is that the remote sorting doesn't work with the grid plugin.
Remote sorting is supported?

[couetbis]

Hi,
I use grid, and thanks for this.
Is it possible to change label header on the fly ?

I want to rename the labels header depending on the values ​​of a previous screen.

[AnujaSonawane]

hello,
i am using a tabpanel and in that i have used the view.js

The code is given as below:

/**
* @author Manish Kumar
* This file contain UI design for entryReport
* entryReportPanel is xtype that will calls different tab panel
*/


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',
},
/*
entryReportPanel = Ext.extend(Ext.Panel, {

layout: 'card',*/


listeners: {
afterrender: function(){
this.parent.doComponentLayout();
},
},

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%'
}
]

}, {
//xtype: 'gridEntryReportPanel',
title: '7 Days',
duration: 7,
}, {
//xtype: 'gridEntryReportPanel',
title: '30 Days',
duration: 30,

}]

});
this.add(this.tabPanel);
this.callParent(arguments);
//entryReportPanel.superclass.initComponent.call(this);
},
});




The control is not displayed as in only the toolbar is displayed partially in the top left corner
can someone please help.
I am not getting this control to work for me

[Soenhay]

Hi,
I use grid, and thanks for this.
Is it possible to change label header on the fly ?

I want to rename the labels header depending on the values ​​of a previous screen.

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.

[Soenhay]

If you download the SmartGlance demo on your phone you will see that there is a feature where u can swipe multiple columns while keeping some columns frozen.

How would I implement something like this with your grid?