I have a viewport based on the complex layout with a grid in the west panel that has a list of categories. When a row is clicked, a new grid is added to a tab in the east panel with a list pulled from the server.
I want the grid to update when a new category is selected to show only the one category, but it currently adds a new grid in addition to the previous one (see screenshot attached).
Here is my code that does this:
/**
* @author Tim
*/
Ext.onReady(function(){
// Book category list for west panel
// data array
var bookCategories = [
['Bible study','Books to help with studying the Bible'],
['Bibles','Translations and styles of Bible'],
['Prayer','Books on prayer'],
['Theology','Books on theology']
];
// create the data store
var bookcategorystore = new Ext.data.SimpleStore({
fields: [
{name: 'category'},
{name: 'decription'}
]
});
bookcategorystore.loadData(bookCategories);
// create the Grid
var catgrid = new Ext.grid.GridPanel({
store: bookcategorystore,
columns: [
{id:'category', width: 80, dataIndex: 'category'},
],
stripeRows: true,
autoExpandColumn: 'category',
width: 200,
header:false,
layout:'fit',
cls:'hide-x-grid3-header',
bodyBorder:false,
listeners: {
rowclick: function (catgrid, rowIndex, e) {
var record = catgrid.getStore().getAt(rowIndex);
selectedCategory = record.data.category;
makegrid(selectedCategory);
}
}
});
catgrid.render('bookcategorymenu');
catgrid.getSelectionModel().selectFirstRow();
// Create book list for east panel
Ext.QuickTips.init();
// ----------------
// vars
// ----------------
var ds; // datasource
var grid; // grid component
var xg = Ext.grid;
var simple;
// ----------------
// Create datasource
// ----------------
function createDS(selectedCategory)
{
var selectedCategory=selectedCategory
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'booklist.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id',
fields: ['id','title','blurb']
})
});
ds.reload(
{
params:
{
query: selectedCategory,
show:"all"
}
});
createGrid();
};
// ----------------
// Create grid
// ----------------
function createGrid()
{
grid = new xg.GridPanel(
{
store: ds, // use the datasource
cm: new xg.ColumnModel(
[
{id:'title', header: "Title", sortable: true, dataIndex: 'title'}
]
),
viewConfig:
{
forceFit:true
},
collapsible: true,
animCollapse: false,
width:950,
stripeRows:true,
title:selectedCategory,
id: 'bookgrid',
iconCls:'icon-grid',
renderTo: "booklist",
autoHeight:true
});
}
function makegrid(selectedCategory) {
var selectedCategory=selectedCategory
createDS(selectedCategory);
};
});
How can I change it to update the grid.
Thanks
You should consider separating out your code so it has more logic to branch out and not be so linear.
#If you have any other info about this subject , Please add it free.# |
Posted on January 8th 2009 in bomisasia.com edit
