Grid reloading

[chinyenje]

Hi guys i'm new to Ext Js i've been playing around with grids. One is the master the other is a child. When i select a record in the master the child grid shows up but does load data until i reload the whole page and select a master record. Further more if i click another master record it duplicates the child grid instead of reloading it .

Any ides on how i can keep one child grid ?

[vietits]

It will be better if you include your code with your post.

[chinyenje]

It will be better if you include your code with your post.

HI vietits... this is my code
<script language="JavaScript" type="text/javascript">
function showTransactions(myData,bankC,bankU,bankP) {
var itemsarray =new Array();



/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());








/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}


/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}


function OnGetMemberError(data, status) {
//jQuery code will go here...
//alert('I have'+data);
}


function OnGetMemberSuccess(data, status) {
//jQuery code will go here...
//alert('I have'+data);

}




// create the data store
var store = new Ext.data.Store({
proxy: new Ext.ux.data.PagingMemoryProxy(myData),
remoteSort:true,
sortInfo: {field:'AssessmentNumber', direction:'ASC'},
reader: new Ext.data.ArrayReader({
fields: [
{name: 'AssessmentNumber'},
{name: 'RegistrationDate'},
{name: 'AmountToPaid'},
{name: 'PortOfEntry'},
{name: 'registrationSerial'},
{name: 'AssessmentYear'},
{name: 'RegistrationNumber'}

]
})
});
// manually load local data
// this
store.loadData(myData);//this was commented


// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
columns: [
{
id :'AssessmentNumber',
header : 'Assessment No.',
width : 100,
// sortable : true,
dataIndex: 'AssessmentNumber'
},
{
header : 'Registration Date',
width : 75,
sortable : true

},
{
header : 'Amount',
width : 150,
// sortable : true
dataIndex: 'AmountToPaid'
},
{
header : 'Port',
width : 75,
// sortable : true,

dataIndex: 'PortOfEntry'
},
{
header : 'Registration Number',
width : 75,
// sortable : true,

dataIndex: 'RegistrationNumber'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : 'shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Remove',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);

// Remove from array here
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return '//alert-col';
} else {
this.items[1].tooltip = 'Add';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);

$.ajax({
type: "POST",
url: "web_proxy.cfc?method=myFunction&returnFormat=JSON",
data: { registrationSerial: rec.get('registrationSerial'),
registrationNumber: rec.get('RegistrationNumber'),
year: rec.get('AssessmentYear'),
station: rec.get('PortOfEntry')


},
cache: false,

success: function(result) {



<!------><cfoutput>
<cfif IsDefined("session.arr") >

var #ToScript(Session.arr,"detArr")#;
//alert("In cfif");
<cfelse>
var detArr="";
</cfif>
</cfoutput>
showTransactionDetail(detArr);


},
error: function(xhr, status, responseText) {
// console.log(xhr.status + " " + status + " :: " + responseText);
}
});

}
}]
}
],
stripeRows: true,
//autoExpandColumn: 'AssessmentNumber',
height: 350,
width: 600,
title: 'Pending Assessments',
// config options for stateful behavior
stateful: true,
stateId: 'grid',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,


plugins: new Ext.ux.ProgressBarPager()
})
});



// render the grid to the specified div in the page
grid.render('assessments');
store.load({params:{start:0, limit:10}});
}






);

return null;
}
</script>

<script language="JavaScript">
function showTransactionDetail(PassArr)
{



Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
/**
* Custom function used for column renderer
* @param {Object} val
*/
// create the data store
var store1 = new Ext.data.Store({
proxy: new Ext.ux.data.PagingMemoryProxy(PassArr),
remoteSort:true,
sortInfo: {field:'AssessmentNumber', direction:'ASC'},
reader: new Ext.data.ArrayReader({
fields: [
{name: 'MiscellaneousType'} ,
{name: 'RegistrationDate'},
{name: 'RegistrationNumber'},
{name: 'AmountTobePaid'}/**/

]
})
});
// manually load local data
// this
store1.loadData(myData); //this was commented


// create the Grid
var grid1 = new Ext.grid.GridPanel({
store: store1,
loadMask: true,
columns: [

{
header : 'Tax',
width : 75,
// sortable : true,

dataIndex: 'MiscellaneousType'
}
,
{
header : 'Registration Date',
width : 75,
// sortable : true,

dataIndex: 'RegistrationDate'
},
{
header : 'RegistrationNumber',
width : 75,
// sortable : true,

dataIndex: 'RegistrationNumber'
} ,
{
header : 'Amount',
width : 75,
// sortable : true,

dataIndex: 'AmountTobePaid'
}

],
stripeRows: true,
//autoExpandColumn: 'AssessmentNumber',
height: 350,
width: 600,
title: 'Transaction taxes',
// config options for stateful behavior
stateful: true,
stateId: 'grid',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store1,
displayInfo: true,


plugins: new Ext.ux.ProgressBarPager()
})
});



// render the grid to the specified div in the page
grid1.render('Transactions');
store1.load({params:{start:0, limit:10}});
}






);

return null;




}
</script>

[vietits]

1. You should put your code between CODE tag for readibility, then you will get more opportunity of getting support from community.
2. Each time you call showTransactionDetail(), you create a new grid and new store instead of using them again. That's the reason why the child grid is duplicated.
3. I don't know how Ext.ux.data.PagingMemoryProxy works so I can't answer your other questions.
4. Is this for Ext 3.x?