PDA

View Full Version : Add panel with items to RowEditor



david l
6 Sep 2009, 12:22 AM
My goal was to make a RowEditor for a grid that acts sort of like a RowExpander in which I would assign a div to the template and add a few form elements when its expanded (I got this type of RowExpander to work, but decided I prefer the styling of the RowEditor).

Basically what I wanted to do was when a user selects a row in a grid with a certain field value, they get extra options to select (I also thought about implementing hidden fields but dont know how to make them show up in the RowEditor in a row below the visible fields).


In RowEditor.js, I made the following modifications

verifyLayout: function(force){
if(this.el && (this.isVisible() || force === true)){
var row = this.grid.getView().getRow(this.rowIndex);
this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined);
var cm = this.grid.colModel, fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
if(!cm.isHidden(i)){
var adjust = 0;
if(i === 0){
adjust += 0; // outer padding
}
if(i === (len - 1)){
adjust += 3; // outer padding
} else{
adjust += 1;
}
fields[i].show();
fields[i].setWidth(cm.getColumnWidth(i) - adjust);
} else{
fields[i].hide();
}
}
///////////
var newp = new Ext.Panel({
height: 100,
items: [new Ext.form.TextField({}),new Ext.form.ComboBox({})]
});
this.add(newp);
///////////
this.doLayout();
this.positionButtons();
}
},

This gives me an empty panel between the editor fields and the update/cancel buttons.
I ran some tests by setting some alerts and hidden is set to false, but running isVisible() gives me false as well.

Is there something else I am missing to get the textfield and combobox to show up (in addition to the editor fields)?

dbassett74
6 Sep 2009, 7:22 AM
This helped me accomplish something similar. Maybe you can work off this?

http://www.extjs.com/forum/showthread.php?t=76507

david l
6 Sep 2009, 1:39 PM
This helped me accomplish something similar. Maybe you can work off this?

http://www.extjs.com/forum/showthread.php?t=76507

Thats similar to what I did before when I used RowExpander, except I put a div in the template and just rendered my elements to the div.


I opened up firebug (should have done it in the first place), and the panel and its elements get generated, but I forgot to take into account the layout of the RowEditor which is an hbox, so the panel is way off to the side so that its not seen.
So it seems I will have to manipulate the layout.