PDA

View Full Version : How to refresh a store's url and a Grid, Please ? I need your help...



xav_allais
22 Jun 2010, 4:36 AM
Hi,
In this example, I load a grid with an xml file (Spring.xml) which have his name in an other xml file (conf.xml).
It works. So I load too a combo box with my conf.xml file which propose all name's file in the conf.xml (Spring.xml and Summer.xml). It works too.
But when I select Summer.xml in my combo box, my Grid isn't refresh with Summer.xml instead Spring.xml...
Please, help me !:((

I give you all so that you can test and help me.
There is 5 files :


conf.xml
Spring.xml
Summer.xml
index.xml
myTst.xml


Here is my conf.xml :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Params>
<GridFiles>
<GridFile>
<IDFile>1</IDFile>
<NameFile>Spring.xml</NameFile>
</GridFile>
<GridFile>
<IDFile>2</IDFile>
<NameFile>Summer.xml</NameFile>
</GridFile>
</GridFiles>
</Params>

Here is Spring.xml :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Row>
<ProductID>1</ProductID>
<ProductName>Chai</ProductName>
<CategoryName>Beverages</CategoryName>
<Sales>1940704</Sales>
</Row>
<Row>
<ProductID>2</ProductID>
<ProductName>Chang</ProductName>
<CategoryName>Beverages</CategoryName>
<Sales>264307</Sales>
</Row>
<Row>
<ProductID>3</ProductID>
<ProductName>Aniseed Syrup</ProductName>
<CategoryName>Condiments</CategoryName>
<Sales>322988</Sales>
</Row>
<Row>
<ProductID>4</ProductID>
<ProductName>Chef Antons Cajun Seasoning</ProductName>
<CategoryName>Condiments</CategoryName>
<Sales>2974243</Sales>
</Row>
<Row>
<ProductID>5</ProductID>
<ProductName>Chef Antons Gumbo Mix</ProductName>
<CategoryName>Condiments</CategoryName>
<Sales>1833049</Sales>
</Row>
</Root>

Here is Summer.xml (only Sales change compared to Spring.xml...) :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Row>
<ProductID>1</ProductID>
<ProductName>Chai</ProductName>
<CategoryName>Beverages</CategoryName>
<Sales>1452194</Sales>
</Row>
<Row>
<ProductID>2</ProductID>
<ProductName>Chang</ProductName>
<CategoryName>Beverages</CategoryName>
<Sales>669923</Sales>
</Row>
<Row>
<ProductID>3</ProductID>
<ProductName>Aniseed Syrup</ProductName>
<CategoryName>Condiments</CategoryName>
<Sales>2162087</Sales>
</Row>
<Row>
<ProductID>4</ProductID>
<ProductName>Chef Antons Cajun Seasoning</ProductName>
<CategoryName>Condiments</CategoryName>
<Sales>1639312</Sales>
</Row>
<Row>
<ProductID>5</ProductID>
<ProductName>Chef Antons Gumbo Mix</ProductName>
<CategoryName>Condiments</CategoryName>
<Sales>1801412</Sales>
</Row>
</Root>

Here is my index.html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Asynchronous Test 03</title>
<!-- Common Styles ExtJS -->
<link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<!-- Common JavaScript ExtJS -->
<script type="text/javascript" src="../extJS/ext-all.js"></script>

<!-- JavaScript for the Mock-Up -->
<script type="text/javascript" src="myTst.js"></script>

</head>

<body>

</body>

</html>

And the more important, the myTst.js file :

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/

Ext.onReady(function(){
Ext.QuickTips.init();

var first = true;

// My Reader and my Store
var recordConfReader = new Ext.data.XmlReader({
record: 'GridFile',
id: 'IDFile',
fields: [
{name: 'IDFile', type: 'string'},
{name: 'NameFile', type: 'string'}
]});

var storeConf = new Ext.data.Store({
url: 'conf.xml',
reader: recordConfReader
});

storeConf.load();

// ASYNCHRONOUS SECTION FOR STORECONF
//===================================
storeConf.on("load", function(s,rs) {
var myGridXmlFile = ''
myGridXmlFile = storeConf.getAt(storeConf.find('IDFile','1')).get('NameFile');
// Data Store for the Grid
var storeMain = new Ext.data.Store({
url: myGridXmlFile,

reader: new Ext.data.XmlReader({
record: 'Row',
id: 'ProductID',
fields: [
{name: 'ProductName', type: 'string'},
{name: 'CategoryName', type: 'string'},
{name: 'Sales', type: 'float'}
]
})
,listeners:{
load:{fn:function(){
storeMain.url = myGridXmlFile;
//mainGrid.refresh(); //No refresh method for a GridPanel object ??? Try reconfigure metho below...
Ext.MessageBox.alert('storeMain URL : ', storeMain.url);
}}}
});
storeMain.load();

// Main Grid
var mainGridColModel = new Ext.grid.ColumnModel({
columns: [
{header: "Product Name", width: 180, dataIndex: 'ProductName', sortable: true},
{header: "Category Name", width: 100, dataIndex: 'CategoryName', sortable: true},
{header: "Sales", width: 80, dataIndex: 'Sales', sortable: true, renderer: 'usMoney'}
]
});
var mainGrid = new Ext.grid.GridPanel({
store: storeMain,
region:'center',
colModel: mainGridColModel
,width:950
,height:300
,id:'main-grid'
,triggerAction:'all'
,mode:'local'
,lastQuery:''
});

// Combobox XML's Files
var valueComboXmlFile = '';
var txtComboXmlFile = '';

var comboXmlFile = new Ext.form.ComboBox({
id:'combo-xmlfiles'
,region: 'north'
,fieldLabel:'Xml Files'
,displayField:'NameFile'
,valueField:'IDFile'
,store: storeConf
,emptyText:'Select another Xml File...'
,triggerAction:'all'
,mode:'local'
,lastQuery:''
,listeners:{
select:{fn:function(combo, value)
{
// Test retrieval Value and Text Selected
//----------------------------------------
valueComboXmlFile = combo.getValue();
txtComboXmlFile = storeConf.getAt(storeConf.find('IDFile',valueComboXmlFile)).get('NameFile');
//Ext.MessageBox.alert('Tests', 'txt : '+txtComboXmlFile+' ; value : '+valueComboXmlFile);

//Reload with xml file selected
//------------------------------
myGridXmlFile = txtComboXmlFile;
storeMain.reload();
}
}}
});


// Panel and Render
var panel = new Ext.Panel({
id:'my-panel',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Tests load and reload grid from conf.xml',
items: [comboXmlFile,mainGrid]
});

panel.render(document.body);

}); // end of storeConf asynchro
});

So, in the javascript file, after the part where i get the xml file selected (in red above), how can i refresh url of my store and refreh my Grid ? I try something (in blue above) but it dont' work...

Many thanks for your help,

xav_allais
23 Jun 2010, 1:06 AM
Please, i need help...

cyclops
23 Jun 2010, 1:16 AM
Have you tried to change storeMain.url directly in the "red" part of your code?

Condor
23 Jun 2010, 1:27 AM
store.proxy.setUrl(newUrl);
store.load();

ps. getById() is a lot faster than find():

myGridXmlFile = storeConf.getById('1').get('NameFile');

xav_allais
23 Jun 2010, 1:52 AM
Many thanks cyclops and Condor, i'll try that ;)

xav_allais
23 Jun 2010, 2:08 AM
Great! I've replace that :


myGridXmlFile = txtComboXmlFile;
storeMain.reload();


by :

myGridXmlFile = txtComboXmlFile;
storeMain.proxy.setUrl(myGridXmlFile);
storeMain.load();

And it works!

Many thanks for that... and for the tip about getById ;)