PDA

View Full Version : [CLOSED] Grid Reconfigure does not populate records when page size is less than 50



RCM
Sep 05, 2012, 8:32 PM
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.





<%@ 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]);
}
});

Daniil
Sep 06, 2012, 7:33 AM
Hi,

It happens because of

total: 40
in your code.

According

i <= 500
you should set 500 for the total.

RCM
Sep 06, 2012, 12:45 PM
Hi,

I set
i <= 40 but get the same result. see code below. Also why when i change the pageSize to be 50 it works. Suggestions please.


var getData = function (operation) {
var start = operation.start,
limit = operation.limit,
date = new Date(),
i,
data = [];

for (i = start; i <= 40; i++) {
data.push({
test1: "Company " + i,
test2: parseInt(Math.random() * 200),
LastUpdate: date
});
}

return {
data: data,
total: 40
};
};

Daniil
Sep 06, 2012, 1:42 PM
I misunderstood the issue. Now I reproduced. Investigating.

I discovered that it works with pageSize 45 and upper, but doesn't with 44 and lower.

Daniil
Sep 06, 2012, 6:01 PM
Seems this

store.leadingBufferZone = 0;
causes the issue. At lease, if I remove it the things seem to work well.

Could you clarify why did you set it?

Daniil
Sep 06, 2012, 6:11 PM
I found this thread on Secnha.
http://www.sencha.com/forum/showthread.php?230125

I think it is related to our issue. It is marked fixed. I will test your test case with a new ExtJS release.

@OP suggests to set Store AutoLoad to false and load it manually within a ViewReady listener. Maybe, it will help you.

But I would follow the @Animal's recommendation to set a much larger leadingBufferZone (defaults to 200).
http://www.sencha.com/forum/showthread.php?230125&p=858045&viewfull=1#post858045

There are also some other recommendations in the thread.

RCM
Sep 06, 2012, 7:07 PM
Hi,

I set the leadingBufferZone = 0 to get a better understanding of how the values affect the performance of the gridpanel. The requirement i am trying to full fill is to be able to load each page of data from the server as the user scrolls in the gridpanel. The user is also able to specify the amount of records to display per page so I am hoping there is a way for me to calculate a reasonable leadingBufferZone value base on the page size.

I am going to remove the value for the leadingBufferZone and see how the gridpanel performs with the default.

Let me know if you have any thoughts on the above.

RCM
Sep 06, 2012, 7:55 PM
Hi,

When I removed


store.leadingBufferZone = 0;

all works until I set my page size to a value below 9.

Did you manage to test with the fix they spoke about.


I think it is related to our issue. It is marked fixed. I will test your test case with a new ExtJS release.

Daniil
Sep 07, 2012, 7:05 AM
Thank you for clarification!



Did you manage to test with the fix they spoke about.


I think it is related to our issue. It is marked fixed. I will test your test case with a new ExtJS release.

Not yet, I hope to test when ExtJS 4.1.2 will be available for us. It is related to the following discussion, please review.
http://forums.ext.net/showthread.php?20847

Daniil
Jan 24, 2013, 10:15 AM
Seems the issue is not reproducible anymore with Ext.NET sources from the SVN trunk.

Marking the thread closed.

Please feel free to post with any new info.