PDA

View Full Version : Trying to make an Editable Grid



Bobafart
20 Apr 2007, 2:41 AM
I am trying to make a combobox in an editable grid. I followed Jack's example and I also read the docs.. unfortunately I can't seem to find an answer for the problem I am having.

Error:
s has no properties
Ext.form.ComboBox=function(_1){Ext.form.ComboBox.superclass.constructor.call(thi...

ext-all.js Line 191

I do not believe I need to define s, not according to Jack's example or the docs. Someone please help if you have experience this problem?



<script type="text/javascript">

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'php/armyExt.php'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'item',
id: 'troopId'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'troopName', mapping: 'itemAttribute > troopName'},
'troopHP', 'troopSquad', 'troopSpecialty', 'troopRank'
])
});

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',
transform:'light',
lazyRender:true
}))
},
{header: "Specialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "Rank", width: 100, dataIndex: 'troopRank'}
]);
cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
grid.render();

ds.load();
});

</script>

sfwalter
20 Apr 2007, 5:20 AM
At a quick glance I don't see anything wrong. But here's a stupid question: Did you have a select tag on your page with an id of "light"?

Bobafart
20 Apr 2007, 6:16 AM
no I don't why do you ask?


I don't know what I am doing wrong either.. if it is obvious to you I will post the link:

http://www.gabbr.com/c/departmentofdefense/army/indexExt1.php

tab
20 Apr 2007, 7:03 AM
the "transform" means that you are transforming an element in your html. If you don't have such an element then remove the transform: light part. Also you *may* need mode: local.

Bobafart
20 Apr 2007, 7:58 AM
this is what I am not understanding and the docs or examples aren't helping me out much

where do you get the <options> tags for your combo box? where do you put them in your JS?


Looking at Jack's code I don't see the combobox option for Light (which are "Mostly Shady/Sun or Shade/Mostly Sunny/Sunny" ). Where are these options in Jack's code? I must be blind.

http://extjs.com/deploy/ext/examples/grid/edit-grid.js

tryanDLS
20 Apr 2007, 8:17 AM
They're in the HTML page.

amackay11
20 Apr 2007, 9:09 AM
See http://extjs.com/forum/showthread.php?t=4920

Bobafart
20 Apr 2007, 9:29 AM
HHmm.. so I add in the HTML <select> combobox and it still doesn't show up:


http://www.gabbr.com/c/departmentofdefense/army/indexExt1.php

no errors are popping up. I love to check my own work and sort out my own bugs, but I can't when I don't have any errors to go on which is why I find grids so difficult to work with.

anyone else have any ideas?

amackay11
20 Apr 2007, 9:55 AM
OK... try this. I think the big thing is 'Ext.grid.EditorGrid'



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: true,
triggerAction: 'all',
transform:'troopSquad',
lazyRender:true
}))
},
{header: "Specialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "Rank", width: 100, dataIndex: 'troopRank'}
]);
cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.EditorGrid('example-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel(),
enableDragDrop:true,
clicksToEdit: 1,
trackMouseOver: true
});