View Full Version : Server side adding GridPanels to TabPanels

10 Mar 2011, 6:03 AM
Using the following example as a base (from http://dev.sencha.com/deploy/dev/docs/?class=Ext.Container

// execute an Ajax request to invoke server side script:
url: 'gen-invoice-grid.php',
// send additional parameters to instruct server script
params: {
startDate: Ext.getCmp('start-date').getValue(),
endDate: Ext.getCmp('end-date').getValue()
// process the response object to add it to the TabPanel:
success: function(xhr) {
var newComponent = eval(xhr.responseText); // see discussion below
myTabPanel.add(newComponent); // add the component to the TabPanel
failure: function() {
Ext.Msg.alert("Grid create failed", "Server communication failure");

(function() {
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';

var store = new Ext.data.Store({
url: 'get-invoice-data.php',
baseParams: {
startDate: '01/01/2008',
endDate: '01/31/2008'
reader: new Ext.data.JsonReader({
record: 'transaction',
idProperty: 'id',
totalRecords: 'total'
}, [
{name: 'date', type: 'date', dateFormat: 'm/d/Y'},
{name: 'value', type: 'float'}

var grid = new Ext.grid.GridPanel({
title: 'Invoice Report',
bbar: new Ext.PagingToolbar(store),
store: store,
columns: [
{header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
{header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
{header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
{header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
return grid; // return instantiated component

Is it possible instead to have the ajax url point to a .js file on the server ? How would this .js file retrieve the parameters ?


10 Mar 2011, 6:19 AM
what parameters are you referring to?

10 Mar 2011, 6:28 AM
startDate and endDate.

I'm new to this so don't know if I'm doing the right thing, but if the Ajax url pointed directly to a .js file on the server, how could the startDate and endDate parameters (ajax params) be retrieved in the .js file ? The example given, shows the startDate and endDate in the js as hardcoded (baseParams).

10 Mar 2011, 10:54 AM
Not sure of you server backend but with a normal LAMP stack there is nothing to stop php, perl, python etc outputting the javascript for you. In PHP for example the parameters you refer to dealt with inside standard php tags referencing GET or POST variables.