PDA

View Full Version : [CLOSED] GridPanel created in Javascript. Reconfigure.



supera
Apr 26, 2012, 5:05 PM
Hi!

I'm creating the gridPanel in Javascript, this way:



var getGrid = function (title) {
return {
id: "panel1",
xtype: "panel",
flex: 1,
items: [{
store: {
model: Ext.define("SuperaWeb.SGCO.modelExplorerWebContext", {
extend: "Ext.data.Model",
fields: [{
name: "ID",
type: "int"
}, {
name: "Name",
type: "string"
}]
}),
storeId: "Store1",
type: "paging",
autoLoad: true,
pageSize: 10,
remoteSort: true,
proxy: {
data: [{
"ID": "1",
"Name": "Anderson Silva"
}, {
"ID": "1",
"Name": "Jos Aldo"
}, {
"ID": "1",
"Name": "Vitor Belfort"
}, {
"ID": "1",
"Name": "Lyoto Machida"
}, {
"ID": "1",
"Name": "Maurcio Shogun Rua"
}],
type: 'pagingmemory'
}
},
id: "gridPanel1",
xtype: "grid",
flex: 1,
bbar: {
id: "tbPaging1",
xtype: "pagingtoolbar",
displayInfo: true,
store: "Store1"
},
columns: {
items: [{
dataIndex: "ID",
text: "ID"
}, {
dataIndex: "Name",
text: "Name"
}]
},
selModel: window.SuperaWeb.SGCO.rsmExplorerWebContext = Ext.create("Ext.selection.RowModel", {
proxyId: "rsmExplorerWebContext",
selType: "rowmodel"
})
}],
layout: "fit",
title: "Test of OnDirectClick!"
};
};


I wish reconfigure the grid with another data.
I'm trying use the grid.reconfigure(store, columns)....
columns, ok... but store dont is 'replace' or reconfigured...

I'm creating then new store as follow:



store = new Ext.data.Store({
model: Ext.define("SuperaWeb.SGCO.modelExplorerWebContext", {
extend: "Ext.data.Model",
fields: [{
name: "ID",
type: "int"
}, {
name: "Name",
type: "string"
},
, {
name: "Birthdate",
type: "date",
format: "M$"
}]
}),
storeId: "Store1",
type: "paging",
autoLoad: true,
pageSize: 10,
remoteSort: true,
proxy: {
data: [{
"ID": "10",
"Name": "xxxxxxxxxxx",
"04/12/1975"
}, {
"ID": "11",
"Name": "yyyyyyyyyyyyyy",
"04/12/1985"
}],
type: 'pagingmemory'
}
})


I understand that this support is not the responsibility of the staff of ext.net...
But it would be very grateful if I pointed a way.

thanks for any help.

Daniil
Apr 26, 2012, 9:32 PM
Hi,

I am unable to reproduce. Here is the example I've tested with.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var renderGrid = function () {
Ext.create("Ext.grid.Panel", {
id : "GridPanel1",
renderTo : Ext.getBody(),
autoHeight : true,
store : {
model : Ext.define(Ext.id(), {
extend : "Ext.data.Model",
fields : [{
name : "test"
}]
}),
autoLoad : true,
proxy : {
data : [["test1"], ["test2"], ["test3"]],
type : 'memory',
reader : {
type : "array"
}
}
},
columns : {
items : [{
dataIndex : "test",
text : "Test"
}]
}
});
};

var reconfigureGrid = function () {
var grid = Ext.getCmp("GridPanel1"),
store,
columns;

store = new Ext.data.Store({
model : Ext.define(Ext.id(), {
extend : "Ext.data.Model",
fields : [{
name : "test1",
}, {
name : "test2",
}]
}),
autoLoad : true,
proxy : {
data : [["test11", "test12"], ["test21", "test22"], ["test31", "test32"]],
type : 'memory',
reader : {
type : "array"
}
}
});

columns = [{
dataIndex : "test1",
text : "Test1"
}, {
dataIndex : "test2",
text : "Test2"
}];

grid.reconfigure(store, columns);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Render grid" Handler="renderGrid" />

<ext:Button runat="server" Text="Reconfigure grid" Handler="reconfigureGrid" />
</body>
</html>


Please provide your simplified test case.

supera
Apr 27, 2012, 12:02 PM
Hi Daniil!

Follow your example, I got!

Thanks a lot...

Now, I have some problem with toolbarPaging! After reconfigure, don't self refresh with new data. Start new thread?

Daniil
Apr 27, 2012, 1:13 PM
Lets continue the current thread, it looks to be tightly related

I think you should call the bindStore method for the PagingToolbar.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging-method-bindStore

Example

pagingToolbar.bindStore(newStore);

supera
Apr 27, 2012, 2:01 PM
Works...

Thanks a lot, Daniil!