Ext.ux.TouchGridPanel v2.0b1

[gaquino]

I have my grid with store: mystore configured and it works , when grid load it load store... But how to reload store with different request using a single button? I tried to create a new Store and did GridPanel.store.load() but it isn't work.


Nobody can help me to understand it?

function reloadList(){
	var url_json = site_uri + "/list.php";


    store = new Ext.data.Store({
        model : 'MySample',
        proxy: {
            type: 'ajax',
            url : url_json, 
            reader: {
                type: 'json',
                root: 'collection'
            }
        },
        autoLoad: true
    });
	mapPainel.store = store;
	mapPainel.store.load();
}

[gaquino]

Solved...


mapPainel.store.proxy.url = url_json;
mapPainel.store.load();

[stevwinata]

hy Simoens..nice plugin, and it's work. i have little problem when i mapping nested json.
this is some code :
the json :

{"success":true,"data" : [{"workstationID":"station1",
"bankType":"Till","staffCode":"ADMIN",
"isOpen":0,"amount":"237050.0000",
"TimeID":40857.647784711,
"TimeStart":{"date":"2011-11-14 07:46:29",
"timezone_type":3,"timezone":"Asia/Fiji"},
"journalWeather":"-","journalMall":"-",
"journalNotes":"-","isReconciled":1,"TotalGrandTotal":"330000.0000"}]} 

the model :

Ext.regModel("reviewmodel", {
fields :  ["TimeStart","amount","TotalGrandTotal"] 
}); 

cols model:

colModel    : [{
        header   : "Date",  
        mapping  : "TimeStart",                
        flex     : 1.5
        },{
        header   : "Cash",
        mapping  : "amount"
        },{
        header   : "Omzet",
        mapping  : "TotalGrandTotal" }] 

how mapping TimeStart on nested json like that? i try TimeStart.date on model, but blank result., when i try, TimeStart return [object Object] on Grid column... perhaps any helps..thanks

[Edition1]

Hi Everybody,

I wanted to make a grid with large number of columns (say 10-12).

But the horizontal scrolling seems not working properly. The header are fixed and after rotating device, the data shown is inconsistent.

If anybody is succeeded with horizontal scrolling through number of columns then please share.

If that is not working then I was thinking to put 3 grids inside the carousel, so that User can swipe and can see next set of columns.
But to my bad luck that is also not working.

If anybody has any idea or pointers about how to get this done, please share.

Thanks

[Edition1]

hello,

not one has an idea or an example of an horizontal grid (with horizontal scroll). ?

Hi Severance,

Do you get any answer or some other alternative solution to this?
I gave a try to put the 2 grids in carousel to give scrolling effect, but not succeeded completed..
I can see 2 grid but side-by-side not by slide-transition.

[nak1]

I didn't read through the entire thread, so I'm not sure if you've addressed this or not, but any idea when/if this will be ported over to Sencha 2.0?

[mitchellsimoens]

I didn't read through the entire thread, so I'm not sure if you've addressed this or not, but any idea when/if this will be ported over to Sencha 2.0?

Started to... https://github.com/mitchellsimoens/Ext.ux.touch.grid

There are features that you can add and create (like plugins but like Ext JS 4) and a new horizontal scrolling demo.

[nak1]

Add the Ext.ux.touch.PagingToolbar ?

[mitchellsimoens]

Add the Ext.ux.touch.PagingToolbar ?

I have not migrated it yet

[nenjap31]

simoens,
I've edited a few lines of script Ext.ux.TouchGridPanel, so the headers into a single table with data and not in the dock. however, when the header at the click sort icon does not appear, what is wrong there is the same script.

This script has my edit:
=============================
/*
* Because of limitation of the current WebKit implementation of CSS3 column layout,
* I have decided to revert back to using table.
*/


Ext.ns("Ext.ux");


Ext.ux.TouchGridPanel = Ext.extend(Ext.Panel, {
layout : "fit",


multiSelect : false,
scroll : "vertical",


initComponent : function() {
var me = this;


me.items = me.dataview = me.buildDataView();




Ext.ux.TouchGridPanel.superclass.initComponent.call(me);


var store = me.store;


store.on("update", me.dispatchDataChanged, me);
},


dispatchDataChanged: function(store, rec, operation) {
var me = this;


me.fireEvent("storeupdate", store, rec, operation);
},




buildDataView : function() {
var me = this,
colModel = me.colModel,
colNum = me.getColNum(false),
colTpl = '<tr class="x-grid-row {isDirty:this.isRowDirty(parent)}">',
cellWidth = 100/colNum;
var hcolTpl = '<tr class="x-grid-header">';


for (var j = 0; j < colModel.length; j++) {
var col = colModel[j],
flex = col.flex || 1,
cls = "";


var width = flex * cellWidth;


if (col.hidden) {
cls += "x-grid-col-hidden";
}


hcolTpl += '<td width="' + width + '%" class="x-grid-cell x-grid-hd-cell x-grid-col-' + col.mapping + ' ' + cls + '" mapping="' + col.mapping + '" head="head">' + col.header + '</td>';
}
hcolTpl += ' </tr>';


for (var i = 0; i < colModel.length; i++) {
var col = colModel[i],
flex = col.flex || 1,
width = flex * cellWidth,
style = (i === colModel.length - 1) ? "padding-right: 10px;" : "",
cls = col.cls || "";


style += col.style || "";


if (col.hidden) {
cls += "x-grid-col-hidden";
}


colTpl += '<td width="' + width + '%" class="x-grid-cell x-grid-col-' + col.mapping + ' ' + cls + ' {isDirty:this.isCellDirty(parent)}" style="' + style + '" mapping="' + col.mapping + '" rowIndex="{rowIndex}">{' + col.mapping + '}</td>';
}
colTpl += '</tr>';


return new Ext.DataView({
store : me.store,
itemSelector : "tr.x-grid-row",
simpleSelect : me.multiSelect,
scroll : me.scroll,
tpl : new Ext.XTemplate(
'<table style="width: 100%;">',hcolTpl,
'<tpl for=".">',
colTpl,
'</tpl>',
'</table>',
{
isRowDirty: function(dirty, data) {
return dirty ? "x-grid-row-dirty" : "";
},
isCellDirty: function(dirty, data) {
return dirty ? "x-grid-cell-dirty" : "";
}
}
),
prepareData : function(data, index, record) {
var column,
i = 0,
ln = colModel.length;


data.dirtyFields = {};


for (; i < ln; i++) {
column = colModel[i];
if (typeof column.renderer === "function") {
data[column.mapping] = column.renderer.apply(me, [data[column.mapping]]);
}
}


data.isDirty = record.dirty;


data.rowIndex = index;


return data;
},
listeners : {
scope : me,
afterrender : me.initRowEvents
},
bubbleEvents : [
"beforeselect",
"containertap",
"itemdoubletap",
"itemswipe",
"itemtap",
"selectionchange"
]
});
},
initRowEvents: function(cmp) {
var me = this,
el2 = cmp.getEl();


el2.on("click", me.handleRowClick, me);
},


handleRowClick: function(e, t) {
e.stopEvent();


var me = this,
el2 = Ext.get(t),
mapping = el2.getAttribute("mapping"),
head = el2.getAttribute("head");



if(head=='head'){
if (typeof mapping === "string") {
me.store.sort(mapping);
el2.set({
sort : me.store.sortToggle[mapping]
});
}


}

},
// hidden = true to count all columns
getColNum : function(hidden) {
var me = this,
colModel = me.colModel,
colNum = 0;


for (var i = 0; i < colModel.length; i++) {
var col = colModel[i];
if (!hidden && typeof col.header !== "string") { continue; }
if (!col.hidden) {
colNum += col.flex || 1;
}
}


return colNum;
},


getMappings: function() {
var me = this,
mappings = {},
colModel = me.colModel;


for (var i = 0; i < colModel.length; i++) {
mappings[colModel[i].mapping] = i
}


return mappings;
},


toggleColumn: function(index) {
var me = this;


if (typeof index === "string") {
var mappings = me.getMappings();
index = mappings[index];
}
var el = me.getEl(),
mapping = me.colModel[index].mapping,
cells = el.query("td.x-grid-col-"+mapping);


for (var c = 0; c < cells.length; c++) {
var cellEl = Ext.get(cells[c]);
if (cellEl.hasCls("x-grid-col-hidden")) {
cellEl.removeCls("x-grid-col-hidden");
this.colModel[index].hidden = false;
} else {
cellEl.addCls("x-grid-col-hidden");
this.colModel[index].hidden = true;
}
}


me.updateWidths();
},


updateWidths: function() {
var me = this,
el = me.getEl(),
headerWidth = me.header.getEl().getWidth(),
colModel = me.colModel,
cells = el.query("td.x-grid-cell"),
colNum = me.getColNum(false),
cellWidth = 100 / colNum,
mappings = me.getMappings();


for (var c = 0; c < cells.length; c++) {
var cellEl = Ext.get(cells[c]),
mapping = cellEl.getAttribute("mapping"),
col = colModel[mappings[mapping]],
flex = col.flex || 1,
width = flex * cellWidth / 100 * headerWidth;


cellEl.setWidth(width);
}
},


scrollToRow: function(index) {
var me = this,
el = me.getEl(),
rows = el.query("tr.x-grid-row"),
rowEl = Ext.get(rows[index]),
scroller = me.dataview.scroller;


var pos = {
x: 0,
y: rowEl.dom.offsetTop
};


scroller.scrollTo(pos, true);
},


getView: function() {
var me = this;


return me.dataview;
},


bindStore: function(store) {
var me = this,
view = me.getView();


view.bindStore(store);
},


getStore: function() {
var me = this,
view = me.getView();


return view.getStore();
},


getRow: function(index) {
var me = this;
if (typeof index === "object") {
var store = me.getStore(),
index = store.indexOf(index);
}


var el = me.getEl(),
rows = el.query("tr");


return rows[index+1];
}
});


Ext.reg("touchgridpanel", Ext.ux.TouchGridPanel);
==================================