Sep 05, 2012, 7:32 PM
[CLOSED] Grid Reconfigure does not populate records when page size is less than 50
Hi,
When i reconfigure my gridpanel and set the page size to anything below 50 the records does not display in the gridpanel. it freezes with the Loading mask displayed. see code attached. I am using the custom proxy i received from you guys.
When i reconfigure my gridpanel and set the page size to anything below 50 the records does not display in the gridpanel. it freezes with the Loading mask displayed. see code attached. I am using the custom proxy i received from you guys.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script type="text/javascript" src="scripts/MyProxy.js"></script>
<script type="text/javascript">
var getData = function (operation) {
var start = operation.start,
limit = operation.limit,
date = new Date(),
i,
data = [];
for (i = start + 1; i <= 500; i++) {
data.push({
test1: "Company " + i,
test2: parseInt(Math.random() * 200),
LastUpdate: date
});
}
return {
data: data,
total: 40
};
};
var myOnElClick = function (e, t) {
var me = this,
ownerHeaderCt = me.getOwnerHeaderCt();
if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
ownerHeaderCt.onHeaderTriggerClick(me, e, t);
} else {
if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
if (!Ext.fly(t).hasCls("my-header-checkbox")) {
me.toggleSortState();
}
ownerHeaderCt.onHeaderClick(me, e, t);
}
}
}
};
var onHeaderClick = function (ct, column, e, t) {
if (Ext.fly(t).hasCls("my-header-checkbox")) {
var msg = "The checkbox of the {0} is {1}";
alert(Ext.String.format(msg, column.id, t.checked ? "checked" : "unchecked"));
}
};
var myProxyConfig = {
type: 'myproxy',
onReadData: getData,
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
};
var reconfigureGrid = function () {
var grid = Ext.getCmp("GridPanel1"),
store,
columns;
store = new Ext.data.JsonStore({
remoteSort: true,
buffered: true,
pageSize: 40,
fields: [{ name: "test1" }, { name: "test2"}],
showWarningOnFailure: false,
proxy: myProxyConfig
});
columns = [{
dataIndex: "test1",
text: "Test1",
xtype: "checkcolumn",
onElClick: myOnElClick,
renderTpl: "<div id=\"{id}-titleEl\" {tipMarkup}class=\"x-column-header-inner\"> <span id=\"{id}-textEl\" class=\"x-column-header-text\"><input id=\"my-header-checkbox-{id}\" type=\"checkbox\" class=\"my-header-checkbox\"></input>{text} </span> <tpl if=\"!menuDisabled\"> <div id=\"{id}-triggerEl\" class=\"x-column-header-trigger\"></div> </tpl> </div>"
}, {
dataIndex: "test2",
text: "Test2"
}];
store.trailingBufferZone = 25;
store.leadingBufferZone = 0;
grid.reconfigure(store, columns);
grid.filters.clearFilters();
grid.filters.addFilter({ type: 'string', dataIndex: 'test1' });
grid.filters.addFilter({ type: 'string', dataIndex: 'test2' });
store.loadPage(1);
};
</script>
<style type="text/css">
.my-header-checkbox {
margin-right: 10px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Width="500" Height="500" DisableSelection="true"
Title="Stock Price">
<TopBar>
<ext:Toolbar runat ="server">
<Items>
<ext:Button runat ="server" Text = "reconfgure">
<Listeners>
<Click Handler="reconfigureGrid();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server" Buffered="true" PageSize="100">
<CustomConfig>
<ext:ConfigItem Name="proxy" Value="myProxyConfig" Mode="Raw" />
</CustomConfig>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="LastUpdate" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
<ext:Column runat="server" Text="Price, $" DataIndex="Price" Width="70" Align="Center" />
<ext:Column runat="server" Text="Last Update" DataIndex="LastUpdate" Width="140" Resizable ="false" MenuDisabled ="true" >
<Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
</ext:Column>
</Columns>
<Listeners>
<HeaderClick Fn="onHeaderClick" />
</Listeners>
</ColumnModel>
<Features>
<ext:GridFilters runat="server" ID="gridFiltersGridView"
AutoDataBind="true">
<Filters>
</Filters>
</ext:GridFilters>
</Features>
<View>
<ext:GridView runat="server" TrackOver="false" />
</View>
</ext:GridPanel>
</form>
</body>
</html>Ext.define('Ext.data.proxy.MyProxy', {
extend: 'Ext.data.proxy.Memory',
alias: 'proxy.myproxy',
alternateClassName: 'Ext.data.MyProxy',
read: function (operation, callback, scope) {
var me = this;
// I have overrode just this line:
// operation.resultSet = me.getReader().read(me.data);
operation.resultSet = me.getReader().read(me.onReadData.call(me, operation));
operation.setCompleted();
operation.setSuccessful();
Ext.callback(callback, scope || me, [operation]);
}
});
Last edited by Daniil; Jan 24, 2013 at 9:15 AM.
Reason: [CLOSED]
Originally Posted by RCM
