PDA

View Full Version : Grid new record reload issue



border9
8 Aug 2009, 3:49 AM
I have a grid, and what im trying to do is make it so this grid when it auto refreshes automatically goes to the end of the store and shows the last record entered at the end of the store every time.

Example: say the store loads 100 items, and then someone inputs a new record id want the store to automatically go to where that newest item was input at the very end of the store.

Here is what I'm using store wise and grid wise, maybe someone can shed some light on what I'm not seeing from the FAQ and looking back to 2007 posts :)

Thanks

Store

var chathistoryStore = new Ext.data.Store({
storeId: 'chathistoryStore',
proxy: new Ext.data.HttpProxy({url:'php/viatropolislobby.php'}),
reader: new Ext.data.JsonReader({
root: 'viatropolisHistory',
remoteSort: true,
totalProperty: 'totalCount'
},
[
{name: 'message_username', type: 'string', mapping: 'message_username'},
{name: 'message_data', type: 'string', mapping: 'message_data'},
{name: 'message_mainid', mapping: 'message_mainid'},
{name: 'message_userid', mapping: 'message_userid'},
{name: 'message_userstatus', mapping: 'message_userstatus'},
{name: 'message_usercompany', mapping: 'message_usercompany'}
]
)
});
//chathistoryStore.setDefaultSort('message_mainid', 'ASC');
chathistoryStore.startAutoRefresh({
refreshNow: true, //true to load store immediately
interval: 5, //refresh rate in seconds
scope: this,
callback: function(rec, options, success){
console.info(arguments);
}
});Grid

var historygrid = new Ext.grid.GridPanel({
id : 'chathistory'
,title : 'Viatropolis Lobby'
,preventBodyReset : true
,renderTo : 'panel-reset-true'
,width : 350
,height : 350
,border : false
,loadMask : true
,layout : 'fit'
,ds : chathistoryStore
,columns : [{header: "Username", width: 60, dataIndex: 'message_username'},
{header: "Message's", dataIndex: 'message_data'}
/*{header: "Message's",
renderer: function(value, metadata, record) {
return String.format("{0} : {1}", record.data.message_username, record.data.message_data);
}}*/]
,stripeRows : true
,autoHeight : false
,columnLines : false
,loadMask : false
,viewConfig : { forceFit: true }
});
chathistoryStore.load();
historygrid.getView().focusRow(historygrid.getStore().getCount() - 1);
});What I'm using to remember where the scroll bar is located when the page reloads, but would rather it go to last item imputed.

Ext.override(Ext.grid.GridView, {
//custom method to restore scroll to the top funcationlity
//just call the scrollTop() method.
scrollTop : function() {
this.scroller.dom.scrollTop = 0;
this.scroller.dom.scrollLeft = 0;
},
scrollToTop : Ext.emptyFn
});Thank you for any help you can give me.

Animal
8 Aug 2009, 4:09 AM
Can't you just use http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=focusRow

border9
8 Aug 2009, 9:37 AM
im sure, but for an item that is constantly being updated and changed, how do you determine what row it should be?


focusRow : function(row){
this.focusCell(row, 0, false);
},


is meant to always focus on a specific row, i need it to focus on the last row that was submitted to the database.

border9
8 Aug 2009, 5:10 PM
Still cant figure out how to make it so when the store reloads it constantly goes to the last record loaded.

Thanks for any help.

border9
8 Aug 2009, 7:43 PM
Ok, so i've been searching the forums and found a few things, just still nothing is working.
here is what i have so far.


var chathistoryStore = new Ext.data.Store({
storeId: 'chathistoryStore',
proxy: new Ext.data.HttpProxy({url:'php/viatropolislobby.php'}),
reader: new Ext.data.JsonReader({
root: 'viatropolisHistory',
remoteSort: true,
totalProperty: 'totalCount'
},
[
{name: 'message_username', type: 'string', mapping: 'message_username'},
{name: 'message_data', type: 'string', mapping: 'message_data'},
{name: 'message_mainid', mapping: 'message_mainid'},
{name: 'message_userid', mapping: 'message_userid'},
{name: 'message_userstatus', mapping: 'message_userstatus'},
{name: 'message_usercompany', mapping: 'message_usercompany'},
{name: 'chatmax_id', mapping: 'chatmax_id'}
]
)
});
chathistoryStore.load();
chathistoryStore.startAutoRefresh({
refreshNow: true, //true to load store immediately
interval: 5, //refresh rate in seconds
scope: this,
callback: function(rec, options, success){
console.info(arguments);
}
});

var historygrid = new Ext.grid.GridPanel({
id : 'chathistory'
,title : 'Viatropolis Lobby'
//,region : 'center'
,preventBodyReset : true
,width : 350
,height : 200
,border : false
,loadMask : true
,layout : 'fit'
,ds : chathistoryStore
,columns : [{header: "Username", width: 60, dataIndex: 'message_username'},
{header: "Message's", dataIndex: 'message_data'}
/*{header: "Message's",
renderer: function(value, metadata, record) {
return String.format("{0} : {1}", record.data.message_username, record.data.message_data);
}}*/]
,stripeRows : true
,autoHeight : false
,columnLines : false
,loadMask : false
,autoScroll : true
,viewConfig : {
afterRender: function(){
this.constructor.prototype.afterRender.apply(this, arguments);
this.focusRow(this.ds.getCount() - 1);
}
}
});


Thanks for any help anyone can give me.

border9
8 Aug 2009, 7:59 PM
Ok so ive tried another thing still no dice.


var historygrid = new Ext.grid.GridPanel({
id : 'chathistory'
,title : 'Viatropolis Lobby'
//,region : 'center'
,preventBodyReset : true
,width : 350
,height : 200
,border : false
,loadMask : true
,layout : 'fit'
,ds : chathistoryStore
,columns : [{header: "Username", width: 60, dataIndex: 'message_username'},
{header: "Message's", dataIndex: 'message_data'}
/*{header: "Message's",
renderer: function(value, metadata, record) {
return String.format("{0} : {1}", record.data.message_username, record.data.message_data);
}}*/]
,stripeRows : true
,autoHeight : false
,columnLines : false
,loadMask : false
,autoScroll : true
,viewConfig : { forceFit: true,
afterRender: function(){
this.constructor.prototype.afterRender.apply(this, arguments);
this.focusRow(this.ds.getCount() - 1);
}
}
});

historygrid.render('panel-reset-true');
historygrid.getView().focusRow(historygrid.getStore().getCount() - 1);

that is how my grid is currently setup and i still cant get the system to load to the last record when it loads / refreshes.

Animal
8 Aug 2009, 11:15 PM
Trey explaining what you want in a simpler way.

I don't want to know about database updates etc.

What is the simple operation you need?

border9
9 Aug 2009, 6:38 AM
When the grid Loads, it needs to go to the very last record show in the store,
when the grid reloads if a new record is added it needs to focus that or go to the end of the Grid store.

Does that make a little more sense?

Animal
9 Aug 2009, 12:55 PM
Well, not really. Are those two different things?

What I understand is

"go to the last row in the Store".

That's done by focussing the last row.

border9
9 Aug 2009, 1:15 PM
Ok, lets say there are 40 items on the store when x user loads the page.

i want it to go to #40, and then if someone adds an item to that store that is constantly being reloaded i would like it to go to that. So the person is never behind on the conversation.

Even if it just loads the last record as soon as the page loads that would work, but i cant seem to get it to work.

Any ideas?

Animal
10 Aug 2009, 2:53 AM
Add a load listener on the Store. Get it to focus the last row.