View Full Version : Ajax Load XML Data Into Layout Dialog From Grid

25 Apr 2007, 11:15 AM
I have a grid set up. If the user clicks on a cell in each row I have created a layout dialog that pops up. That is all fine and dandy and working well.

Now what I require is the first tab of the Layout Dialog to load data specific information based on the grid line that was clicked.

So if the grid columnModel is set up like this:

var cm = new Ext.grid.ColumnModel([
{header: "Soldier", width: 120, dataIndex: 'troopName'},
{header: "HP", width: 100, dataIndex: 'troopHP'},
{header: "Squad",
width: 100,
dataIndex: 'troopSquad',
editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
typeAhead: true,
editable: false,
triggerAction: 'all',
{header: "Specialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "Rank", width: 100, dataIndex: 'troopRank'}

and my dialog layout is set up as:

var layout = dialog.getLayout();
layout.add('west', new Ext.ContentPanel('west', {title: 'Inventory'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'Unit Profile'}));
// generate some other tabs
layout.add('center', new Ext.ContentPanel('statistics', {
autoCreate:true, title: 'Unit Statistics', background:true}));
layout.add('center', new Ext.ContentPanel('skills', {
autoCreate:true, title: 'Unit Skills', closable:true, background:true}));

And if the user clicks on the "Soldier" cell, how do I modify the markup in my Layout Dialog so that it xmlhttprequest loads the soldier specific data into the first table of the layout dialog?

25 Apr 2007, 11:45 PM
SO you're using http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#event-cellclick

That gives you the rowIndex.

You get the Record that backs up that row from the Grid's Store:

var myRec = myStore.getAt(rowIndex");

// get the data you want using the field names you defined...
var f = myRec.get(//field name//);

30 Apr 2007, 11:51 AM
what if I don't have the database ID posted in the grid but I want to get the ID of the item clicked?


id(not shown) | Soldier Name | Soldier Specialty
3 | Joe | Sniper
7 | Mack | Heavy Weapons

if the user clicks the "Joe" row how do you get the ID = 3 if 3 isn't displayed in the Grid?

30 Apr 2007, 11:58 AM
You can include non-display fields in your data - just make it hidden in the colModel.

30 Apr 2007, 2:46 PM
for this line:

var myRec = myStore.getAt("rowIndex");

I assume "myStore" is the name of your grid, right?

Also, where is "getAt" located in the documentation?

30 Apr 2007, 7:41 PM
Why would you assume that a variable named 'myStore' is a Grid as opposed to a Store? Are you in the habit of creating misleading variable names in your code? getAt is documented in Store.