PDA

View Full Version : Require EXTJS sample code to Refresh the Grid on button click



johnlicy
21 Nov 2007, 11:50 PM
Hi,

I have a requirement that when a button is clicked the grid needs to be reloaded by fetching data from the text controls.

Please provide a very simple sample code.

1. my url will be same
2. param values which I am sending will be different

for eg:


CONTEXT_ROOT + "/data.do?FND_NAME=00037EAC0&STATUS=1"

CONTEXT_ROOT + "/data.do?FND_NAME=556542332&STATUS=2"


Regards
Licy Ambrose

Animal
22 Nov 2007, 12:08 AM
clickHandler: function() {
myStore.reload({
params: {
FND_NAME: fndNameTextField.getValue(),
STATUS: statusComboBoxField.getValue()
}
});
}

johnlicy
22 Nov 2007, 1:36 AM
Hi,

Thank u very much. This code snippet really worked fine.

Regards
Licy Ambrose

vinodnit
2 Jul 2008, 4:01 AM
How do I refresh the grid and load the data from database




clickHandler: function() {
myStore.reload({
params: {
FND_NAME: fndNameTextField.getValue(),
STATUS: statusComboBoxField.getValue()
}
});
}

mystix
2 Jul 2008, 8:04 PM
How do I refresh the grid and load the data from database

when you reload the data from the database the grid is refreshed.

ashwinisahu
27 Jan 2009, 10:25 PM
clickHandler: function() {
myStore.reload({
params: {
FND_NAME: fndNameTextField.getValue(),
STATUS: statusComboBoxField.getValue()
}
});
}


I have the almost same requirement like while clicking on search button the data from server should render on the grid.I tried with some approch like:
listeners: {
render: function(){
//Ext.get('Search').addListener('click', load, this);
//Ext.get('Reset').addListener('click', clear, this);
Ext.get('Search').on('click', function(){myStore.reload()});
}}
But myStore which has a spring controller call, is not being invoked.
Please help.ur quick suggestion would be highly appreciated.

Thanx
AKS

BernieM
27 Jan 2009, 11:20 PM
Are you sure your store's reload isn't being invoked or is it that your grid isn't changing because you aren't passing any parameters to the server?

ashwinisahu
27 Jan 2009, 11:44 PM
Are you sure your store's reload isn't being invoked or is it that your grid isn't changing because you aren't passing any parameters to the server?
Pls see my code and let me know anywhere I did any mistake[n.b:this works fine when I put someXml.xml instead of 'dealerSearch.do']:


var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'dealerSearch.do'}),
reader: new Ext.data.XmlReader({
record: 'Account'
},
// Field names & xml mappings
[
{name: 'name', mapping: 'Name'},
{name: 'organizationNumber', mapping: 'OrganizationNumber'}
])
}); // end ds
var cm = new Ext.grid.ColumnModel([
{header: "Name", width: 120, dataIndex: 'name', sortable: true},
{header: "OrganizationNumber", width: 180, dataIndex: 'organizationNumber', sortable: true}]);
// ----------------------
var anchor = {
id:'anchor-panel',
title: 'Anchor Layout',
layout:'anchor',
xtype: 'container',
autoEl: 'div',
defaults: {bodyStyle: 'padding:15px'},
items: [{
title: 'Search Dealer',
height: 200,
anchor: '100%',
xtype: 'form',
defaultType: 'textfield',
items: [<-------some form element---->
buttons: [{text: 'Search',id: 'Search'},{text: 'Reset',id: 'Reset'}]
},{
title: 'Search Result',
height: 450,
anchor: '100%',
items: [{
title: '',
xtype: 'grid',
store: ds,
cm: cm,
stripeRows: true,

// Add a listener to load the data only after the grid is rendered:
listeners: {
render: function(){
//Ext.get('Search').addListener('click', load, this); //NOT WORKIN
//Ext.get('Reset').addListener('click', clear, this); //NOT WORKIN
//ds.load();
Ext.get('Search').on('click', function(){ds.load()});// //NOT WORKIN
}
}

}]
}]
};
function load() {
ds.reload();
}

function clear() {
ds.removeAll();
}

Thnx
AKS

BernieM
27 Jan 2009, 11:57 PM
this works fine when I put someXml.xml instead of 'dealerSearch.do'
That's actually a better answer to my question than the other code that was posted. I think that your load is being properly invoked. The problem is server-side. What XML is your dealerSearch.do page returning? Did you look at the response in Firebug? Also if you're planning to do a search you should submit search parameters to your server so that it knows how to generate your results. You probably want to do something like:



Ext.get('Search').on('click', function(){
ds.load({
params: {
formElement1: Ext.getCmp('formElement1').getValue(),
formElement2: Ext.getCmp('formElement2').getValue(),
...
}
});
});


Your server-side code should use those request parameters to generate valid XML. The problem probably isn't in your javascript. It's on the server.

ashwinisahu
27 Jan 2009, 11:58 PM
Are you sure your store's reload isn't being invoked or is it that your grid isn't changing because you aren't passing any parameters to the server?

'dealerSearch.do' does the server side reading a xml file and return back as a xml String,so not needed for any parameter.

BernieM
28 Jan 2009, 12:02 AM
What is the XML that is being displayed in the response? Check the response tab in Firebug to make sure it's coming back correctly.

ashwinisahu
28 Jan 2009, 1:48 AM
That's actually a better answer to my question than the other code that was posted. I think that your load is being properly invoked. The problem is server-side. What XML is your dealerSearch.do page returning? Did you look at the response in Firebug? Also if you're planning to do a search you should submit search parameters to your server so that it knows how to generate your results. You probably want to do something like:



Ext.get('Search').on('click', function(){
ds.load({
params: {
formElement1: Ext.getCmp('formElement1').getValue(),
formElement2: Ext.getCmp('formElement2').getValue(),
...
}
});
});
Your server-side code should use those request parameters to generate valid XML. The problem probably isn't in your javascript. It's on the server.

Hi,
So why the alert is not working here.I think someting went wrong in some other place,can u pls help me

listeners: {
render: function(){
//Ext.get('Search').addListener('click', load, this);
//Ext.get('Reset').addListener('click', clear, this);
//ds.load();
Ext.get('Search').on('click', function(){
Ext.MessageBox.alert('hi');
ds.reload(
{
params: {
formElement1: Ext.getCmp('accountName').getValue(),
formElement2: Ext.getCmp('organiztionNumber').getValue(),
formElement2: Ext.getCmp('country').getValue()
}
});
});
}
}

Thnx
AKS

BernieM
28 Jan 2009, 1:55 AM
Ext.get('Search')

will look for an HTML element with the id 'Search' but I don't think that's what you want. You're trying to add an event to the search button, so you should get it like this:



Ext.getCmp('Search')


Another way to register a handler for the click event on the search button is to do:



buttons: [{
text: 'Search',
id: 'Search',
handler: function() {
Ext.MessageBox.alert('hi');
ds.reload({
params: {
accountName: Ext.getCmp('accountName').getValue(),
organizationNumber: Ext.getCmp('organizationNumber').getValue(),
country: Ext.getCmp('country').getValue()
}
});
}
},{
text: 'Reset',
id: 'Reset'
}]

ashwinisahu
28 Jan 2009, 2:28 AM
Ext.get('Search')
will look for an HTML element with the id 'Search' but I don't think that's what you want. You're trying to add an event to the search button, so you should get it like this:



Ext.getCmp('Search')
Another way to register a handler for the click event on the search button is to do:



buttons: [{
text: 'Search',
id: 'Search',
handler: function() {
Ext.MessageBox.alert('hi');
ds.reload({
params: {
accountName: Ext.getCmp('accountName').getValue(),
organizationNumber: Ext.getCmp('organizationNumber').getValue(),
country: Ext.getCmp('country').getValue()
}
});
}
},{
text: 'Reset',
id: 'Reset'
}]

Thanx a lot Dude...It works with ur this code.Can u pls tell me in java code I can get the values for params like ---->>request.getparameter('accountName');etc.

Thanx
AKS

BernieM
28 Jan 2009, 3:20 AM
Thanx a lot Dude...It works with ur this code.Can u pls tell me in java code I can get the values for params like ---->>request.getparameter('accountName');etc.
That depends on your server-side framework. If you're using servlets, look for the HttpRequest object in the servlet javadocs. If you're using JSF I think it's something like getExternalContext().getApplication().getRequest() or something like that. Again, you'll have to look in the javadocs for the exact method. Whatever java-based framework you're using should have a way for you to access request parameters.

mr.murugesh
4 Mar 2009, 9:42 AM
object.doLayout this s 4 window and formpanel...if u want to refresh grid means gridobject.load({}).

bee
4 Sep 2011, 6:38 AM
Hi I am stuck in one small silly stuff. I have button on toolbar. When I click it, I want to open grid panel. I tried render but it is not working for me, can anyone help me please ?