ntoepfer
12 Feb 2008, 12:06 PM
I know this has been asked in a few spots but I cannot seem to find an answer that I can make work. Sorry to be a n00b.
I have a gridpanel that I am using an XML reader to populate. This works fine. What I need to be able to do is refresh the grid on a set interval, which I also have working fine, but with a new URL for the store's reader.
Here's the code I have thus far:
/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
function initialize(dn)
{
buildGrid(dn);
}
function buildGrid(dn)
{
Ext.onReady(function(){
Ext.QuickTips.init();
// create the Data Store
var store = new Ext.data.GroupingStore({
// load using HTTP
url: getURL(dn),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "computer" tag
record: 'computer',
id: '@name'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'name', mapping: '@name'},
'os_architecture','domain', 'drac_ip', 'environment', 'model', 'managed_fn'
]),
sortInfo: {field:'name', direction:'ASC'},
groupField:'environment'
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id: "name", header: "System Name", width: 120, dataIndex: 'name', sortable: true,dataIndex: 'name'},
{header: "Architecture", width: 75, dataIndex: 'os_architecture', sortable: true},
{header: "Domain", width: 120, dataIndex: 'domain', sortable: true},
{header: "DRAC IP", width: 120, dataIndex: 'drac_ip', sortable: true},
{header: "Environment", width: 115, dataIndex: 'environment', sortable: true},
{header: "Model", width: 140, dataIndex: 'model', sortable: true},
{header: "Managed By", width: 100, dataIndex: 'managed_fn', sortable: true},
{header: "WU", width: 30, dataIndex: '', sortable: true},
{header: "DM", width: 30, dataIndex: '', sortable: true},
{header: "EV", width: 30, dataIndex: '', sortable: true},
{header: "CM", width: 30, dataIndex: '', sortable: true},
{header: "AV", width: 30, dataIndex: '', sortable: true},
{header: "CV", width: 30, dataIndex: '', sortable: true},
{header: "AD", width: 30, dataIndex: '', sortable: true}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
width: 1200,
height: 700,
collapsible: true,
animCollapse: false,
title: 'Monitor Grid',
iconCls: 'icon-grid',
renderTo:'example-grid'
});
// store.load();
store.startAutoRefresh(dn, 10,'','',true);
});
Ext.override(Ext.data.Store, {
customLoad : function(dn) {
this.load();
}
});
Ext.override(Ext.data.Store, {
startAutoRefresh : function(dn, interval, params, callback, refreshNow){
if(refreshNow){
this.url = getURL(dn);
this.load({params:params, callback:callback});
}
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.customLoad.createDelegate(this, [{dn:dn}]), interval*1000);
}
});
}
function getServerList(dn)
{
var xmlhttp = null;
var doc = null;
if (dn =="")
{
dn = "?"
}
if (document.all)
{
try
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
xmlhttp = new XMLHttpRequest();
if (xmlhttp)
{
var url="http://server/server_support.asp"+dn+"&sid="+Math.random();
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
doc = xmlhttp.responseText;
}
return doc;
}
function getURL(dn)
{
var url = 'http://server/ajax_xmlmerge.asp?list=' + getServerList(dn)
return url;
}
What I did to get the refresh was to modify an example and marry it to my code, and this does work. I however cannot figure out how to change the URL the data is pulling from. I have seen this example:
var proxy = new Ext.data.HttpProxy({
url: '/DoSearch.php'
});
// Add the HTTP parameter searchTerm to the request
proxy.on('beforeload', function(p, params) {
params.searchTerm = searchValue;
});
and I attempted to use this by replacing the url paramater used when creating the store with a reference to this proxy object with my URL, but I cannot get this to work.
Would anyone mind telling me what I am doing wrong here? Thank you in advance!
Neil
I have a gridpanel that I am using an XML reader to populate. This works fine. What I need to be able to do is refresh the grid on a set interval, which I also have working fine, but with a new URL for the store's reader.
Here's the code I have thus far:
/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
function initialize(dn)
{
buildGrid(dn);
}
function buildGrid(dn)
{
Ext.onReady(function(){
Ext.QuickTips.init();
// create the Data Store
var store = new Ext.data.GroupingStore({
// load using HTTP
url: getURL(dn),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "computer" tag
record: 'computer',
id: '@name'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'name', mapping: '@name'},
'os_architecture','domain', 'drac_ip', 'environment', 'model', 'managed_fn'
]),
sortInfo: {field:'name', direction:'ASC'},
groupField:'environment'
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id: "name", header: "System Name", width: 120, dataIndex: 'name', sortable: true,dataIndex: 'name'},
{header: "Architecture", width: 75, dataIndex: 'os_architecture', sortable: true},
{header: "Domain", width: 120, dataIndex: 'domain', sortable: true},
{header: "DRAC IP", width: 120, dataIndex: 'drac_ip', sortable: true},
{header: "Environment", width: 115, dataIndex: 'environment', sortable: true},
{header: "Model", width: 140, dataIndex: 'model', sortable: true},
{header: "Managed By", width: 100, dataIndex: 'managed_fn', sortable: true},
{header: "WU", width: 30, dataIndex: '', sortable: true},
{header: "DM", width: 30, dataIndex: '', sortable: true},
{header: "EV", width: 30, dataIndex: '', sortable: true},
{header: "CM", width: 30, dataIndex: '', sortable: true},
{header: "AV", width: 30, dataIndex: '', sortable: true},
{header: "CV", width: 30, dataIndex: '', sortable: true},
{header: "AD", width: 30, dataIndex: '', sortable: true}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
width: 1200,
height: 700,
collapsible: true,
animCollapse: false,
title: 'Monitor Grid',
iconCls: 'icon-grid',
renderTo:'example-grid'
});
// store.load();
store.startAutoRefresh(dn, 10,'','',true);
});
Ext.override(Ext.data.Store, {
customLoad : function(dn) {
this.load();
}
});
Ext.override(Ext.data.Store, {
startAutoRefresh : function(dn, interval, params, callback, refreshNow){
if(refreshNow){
this.url = getURL(dn);
this.load({params:params, callback:callback});
}
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.customLoad.createDelegate(this, [{dn:dn}]), interval*1000);
}
});
}
function getServerList(dn)
{
var xmlhttp = null;
var doc = null;
if (dn =="")
{
dn = "?"
}
if (document.all)
{
try
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
xmlhttp = new XMLHttpRequest();
if (xmlhttp)
{
var url="http://server/server_support.asp"+dn+"&sid="+Math.random();
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
doc = xmlhttp.responseText;
}
return doc;
}
function getURL(dn)
{
var url = 'http://server/ajax_xmlmerge.asp?list=' + getServerList(dn)
return url;
}
What I did to get the refresh was to modify an example and marry it to my code, and this does work. I however cannot figure out how to change the URL the data is pulling from. I have seen this example:
var proxy = new Ext.data.HttpProxy({
url: '/DoSearch.php'
});
// Add the HTTP parameter searchTerm to the request
proxy.on('beforeload', function(p, params) {
params.searchTerm = searchValue;
});
and I attempted to use this by replacing the url paramater used when creating the store with a reference to this proxy object with my URL, but I cannot get this to work.
Would anyone mind telling me what I am doing wrong here? Thank you in advance!
Neil