PDA

View Full Version : Need some help with refreshing content



Sinredux
8 Mar 2013, 6:26 AM
Hi people, I'm new to these forums and I've got an issue I just can't figure out.
I'd appreciate it if someone could give me the solution or atleast send me into the right direction.

What I'm looking for is a function to refresh a tabPanel or a formPanel in ExtJS. I got a gridPanel with a list of information, with the listener 'rowclick' I'm able to send the ID to my data.Store and retrieve the right information.

The gridPanel.


var gridCarpark = new Ext.grid.GridPanel(
{
border: true,
region: 'center',
store: dsCarpark,
id: 'carpark',
listeners:
{
rowdblclick: carparkEdit,
keypress: function(e, el)
{
if(e.getKey() == e.DELETE)
{
personelDelete();
}
},
rowclick: function()
{
var selectedCar = gridCarpark.getSelectionModel().getSelected();
var car_id = selectedCar.get('id');

dsPanelCarpark.proxy.setUrl('./data/modules/carpark.php?sort=carpark&action=get-tab-car&autoid='+car_id, true);


panelCarpark.load();
}
}



My data.Store


var dsPanelCarpark = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url: './data/modules/carpark.php?sort=carpark&action=get-tab-car'
}),
remoteSort: true,
autoLoad: false,
reader: new Ext.data.JsonReader(
{
id: 'id'
},
[
{name: 'id'},
{name: 'merk'},
{name: 'kosten'},
{name: 'kenteken'},
{name: 'type'},
{name: 'fiscale_waarde'},
{name: 'kilometer_stand'},
{name: 'anwb_nr'},
{name: 'verzekering_nr'}
]),
listeners: {
load: function()
{
//panelCarpark.refresh();
console.log(dsPanelCarpark.getRange());
}
}
});


So, I'm trying to refresh the tabPanel's content when the rowclick event get's fired.. (it retrieves the right values immediatly from the store, it just shows the old/empty variables)


var panelCarpark = new Ext.TabPanel(
{
xtype: 'tabpanel',
region: 'south',
height: 200,
store: dsPanelCarpark,
autoLoad: false,
activeTab: 0, // index or id
items: [
{
title: 'tabs',
items: [
new Ext.form.ComboBox(
{
id:'id',
store: dsPanelCarpark,
value:'25',
valueField: 'id',
displayField: 'id',
editable: false,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
width: 75
})
]
},
{
title: 'tab2'
}]
});


Thanks in advance

willigogs
8 Mar 2013, 7:50 AM
So basically, on rowclick, you're wanting to reload the combo's store with different values?

I know this is probably a basic question - but have you confirmed that new values have been received during store load based on the passed car id? Loading new data into the store SHOULD immediately update any component using that store - therefore if your combo remains populated with old values, it makes me think the store hasn't actually been populated with new data :\

so just for sanity checking, inside your store:


load: function(thisStore, records, options) {
console.log(thisStore, records, options);
}

Sinredux
11 Mar 2013, 2:00 AM
So basically, on rowclick, you're wanting to reload the combo's store with different values?

I know this is probably a basic question - but have you confirmed that new values have been received during store load based on the passed car id? Loading new data into the store SHOULD immediately update any component using that store - therefore if your combo remains populated with old values, it makes me think the store hasn't actually been populated with new data :\

so just for sanity checking, inside your store:


load: function(thisStore, records, options) {
console.log(thisStore, records, options);
}


Implemented the above code and the console returns the right values in an array.

items: Array[1]

0: L

data: Object

anwb_nr: "45848458"
fiscale_waarde: "2383.5"
id: "30"
kenteken: "00-00-05"
kilometer_stand: "45845"
kosten: "850.00"
merk: "BMW"
type: "Diesel"
verzekering_nr: "2147483647"
__proto__: Object

id: "30"
json: Object

anwb_nr: "45848458"
fiscale_waarde: "2383.5"
id: "30"
kenteken: "00-00-05"
kilometer_stand: "45845"
kosten: "850.00"
merk: "BMW"
type: "Diesel"
verzekering_nr: "2147483647"



Basically, I want a grid panel in the center and a tabPanel in the south region. When I click on a car I want all the info to load in a form located in the tabPanel, so I'll be able to edit those and save the changes with a button. Just used the combobox to test my store, I'm also planning on using textfields etc.

Regarding the combobox, it does load the new ID when I click on a row. It just doesn't update the current value.

What happens.
The combobox shows value "2". I click on a row, ID 30 is being send to the store. Old value 2 is still the value in the combobox. I click on the combobox and ID 30 is shown as a select option.

The store DOES send the new array data..

willigogs
11 Mar 2013, 2:33 AM
Here's an example of binding a grid to a form:
http://dev.sencha.com/deploy/ext-3.4.0/examples/form/form-grid.html

And here's the EXT Code (just check the grid's rowselect listener for how it loads the data into the form):
http://dev.sencha.com/deploy/ext-3.4.0/examples/form/form-grid.js

See if that helps - but if you still have issues give me a shout and I'm sure I could always knock up a really simple example if needed, or help with your specific code if provided :)

Sinredux
11 Mar 2013, 2:41 AM
Thanks for the quick response.

Already seen that example before but I'm too stupid to look into the code for included JavaScript files..
I will give this a try and let you know if it works out or not :).

Sinredux
11 Mar 2013, 6:27 AM
Alright, I got it to work. Thanks a lot :)

willigogs
11 Mar 2013, 6:32 AM
No problem - glad it worked :)