How to refresh TouchGridPanel with different Store Json request?
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?
Code:
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();
}
sort icon does not appear after I edited the script
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);
==================================
