PDA

View Full Version : Editor Grid with two comboboxes



hallikpapa
23 Jun 2010, 12:35 PM
I have an EditorGrid where I want to render two comboboxes. The grid shows up fine, but when I double click to edit, only the first combo box is shown. I have alternated both combo boxes to render each individually, and it works just fine. But when I try and include both, on double click the first combobox works, and the second field is just blank.

Below is my entire grid, and a screen shot. In the screenshot, the 3rd column, Sub Category, should also be my combobox. Can I do this? If so, where did i screw up?

I also noticed that the 2nd combobox shows the css class 'disabled' when I inspect it in firebug, which is obviously causing the grey. Not sure why it would be disabled, when I have the editor option.


// create namespace for plugins
Ext.namespace('Ext.ux.seo');

Ext.ux.seo.AddPhraseGrid = function(config) {

this.editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

this.SubCategory = Ext.data.Record.create([{
name: 'text',
type: 'string'
}]);


// call parent constructor
Ext.ux.seo.AddPhraseGrid.superclass.constructor.call(this, config);
}
// extend
Ext.extend(Ext.ux.seo.AddPhraseGrid, Ext.grid.EditorGridPanel, {
initComponent: function() {
Ext.apply(this, {
title : 'Keywords',
cm : new Ext.grid.ColumnModel([
{header: "ID", width: 100, sortable: true, dataIndex: 'id'},
{header: "Category", width: 140, sortable: true, dataIndex: 'cat',
editor: {
xtype: 'phrasecatcombo',
allowBlank: false
}
},
{header: "Sub Category", width: 140, sortable: true, dataIndex: 'sub_cat',
editor: {
xtype: 'phrasesubcombo'
}
},
{header: "Keyword", width: 160, sortable: true, dataIndex: 'text',
editor: {
xtype: 'textfield',
allowBlank: false
}
}
]),
loadMask : {
msg : 'Loading...'
},
height :400,
store : new Ext.data.Store({
autoLoad : false,
url : 'index.php/phrase/list',
reader : new Ext.data.JsonReader({
id : 'id'
}, [ {
name : 'id', type : 'int'
},{
name : 'cat'
},{
name : 'sub_cat'
},{
name : 'text', type : 'string'
}]),
sortInfo : {field: 'text', direction: 'DESC'}
}),
selModel : new Ext.grid.RowSelectionModel({
listeners: {
selectionchange: function(sm) {
this.grid.removeBtn.setDisabled(sm.getCount() < 1);
}
}
}),
plugins: [this.editor],
view : new Ext.grid.GridView({
loadMask : {
msg : 'Buffering. Please wait...'
}
}),
tbar: [{
xtype : 'clientcombo',
parentXType : this.getXType()
}, {
iconCls : 'icon-user-add',
text : 'Add Keyword',
scope : this,
handler: function(){
var x = new this.SubCategory([{
text: 'New Keyword'
}]);
this.editor.stopEditing();
this.store.insert(0, x);
this.getView().refresh();
this.getSelectionModel().selectRow(0);
this.editor.startEditing(0);
}
},{
ref : '../removeBtn',
iconCls : 'icon-user-delete',
text : 'Remove Keyword',
disabled: true,
handler : function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}

}]
});
Ext.ux.seo.AddPhraseGrid.superclass.initComponent.apply(this,arguments);
}
}); // end of extend

//register xtype
Ext.reg('addkeywordgrid', Ext.ux.seo.AddPhraseGrid);

GoneIn20Seconds
23 Jun 2010, 1:12 PM
This is just a shot in the dark, but if both combo boxes have the same ID then only one will render properly.

hallikpapa
23 Jun 2010, 2:44 PM
Thanks for your reply, but neither combo box uses a static id. Why I refer to everything by xtype. My first thought too though.