View Full Version : Calling grid as template from external js file

17 Aug 2009, 1:54 AM
I created a js file which hosts a template of the ext grid in a display panel:

var myData = {
records1 : records_grid1,
records2 : records_grid2

var fields = grid_fields;

// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records1'

// Column Model shortcut array
var cols = grid_columns;

/* Further declaration follows but cut for this example*/

var displayPanel = 'displayPanel'+gridID;

//Simple 'border layout' panel to house both grids
displayPanel = new Ext.Panel({
width : gridWidth,
height : gridHeight,
layout : 'hbox',
renderTo : gridID,
defaults : { flex : 1 }, //auto stretch
layoutConfig : { align : 'stretch' },

/* Further declaration follows but cut for this example*/

In my php file I declare the variables for the grid:

$gridValues = "<script type=\"text/javascript\">
var records_grid1 = " . $this->records_grid1 . ";
var records_grid2 = " . $this->records_grid2 . ";
var grid_columns = " . $this->grid_columns . ";
var grid_fields = " . $this->grid_fields . ";
var gridID = '" . $this->gridID . "';
<script type=\"text/javascript\" src=\"grid_template.js\"></script>
<div id=\"" . $this->gridID . "\"></div>";

This allows me to reuse the grid and fill it with my variables from php.

I'd like to have 2 grids on one page. When I call my php it will call the js template and for the first grid it is perfect.
If I call the template again on this page, I get two times the last grid.

I used "gridID" to differ between the grids, the source code looks perfect.

My understanding is:
extjs waits until DOM is ready.
I filled the variables and the ID is unique, so why doesn't the first grid show up? Why does it get overwritten?

Or is my complete thinking on how to achive that wrong?

18 Aug 2009, 1:19 PM
Does anyone know what could be wrong with it?