PDA

View Full Version : Using a panel in a grid cell editor?



sacha
20 Apr 2010, 8:05 AM
I'm using a two-column EditorGridPanel to display name/value pairs. I'm attempting to write a custom cell editor for the name column which consists of a textfield and a checkbox. The size of the editor panel can be fixed, i.e. needn't be related to the column width.

I'm having the following problems:

1. the panel doesn't hide when focus moves outside it, and
2. the panel collapses to 0 width/height on second invocation

I've not found an example via google or in the FAQ that implements a custom cell editor using a panel, so it's entirely possible that I'm going about this the wrong way. (I have spent some hours looking at the roweditor example, which uses a plugin model, but there's too much there that I don't understand -- if that's the way to go, I'd like to grok why my approach is wrong.)

I have tried to set the size of the editor and/or panel explicitly in various handlers (beforeshow etc) but none of them seem to work, and I can't imagine that's the right approach anyway.

Here's my test code. Any pointers on where I'm going wrong, or to a simple example, would be greatly appreciated.

I'm using 3.2.0.


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.0/ext-all.js"></script>


<script type="text/javascript">

Ext.onReady(function () {
Ext.QuickTips.init();

//-----------------------------------------------------------------
// This is the bespoke editor panel class

TestPanel = Ext.extend(Ext.Panel, {
constructor: function (config) {
Ext.apply(config, {
items: [
{
xtype: 'textfield'
},
{
xtype: 'checkbox',
boxLabel: 'inherited'
}
],
});
TestPanel.superclass.constructor.apply(this, arguments);
},

reset: function () {
},

setValue: function (val) {
this._value = val;
},

getValue: function () {
return this._value;
},

isValid: function () {
return true;
}
});

// render the panel to a test div, just to see it looks ok
var tst = new TestPanel({});
tst.render('y');

//-----------------------------------------------------------------
// Set up the grid

var fields = [
[ 'cms_node_controller_params_name', 'Name' ],
[ 'cms_node_controller_params_value', 'Value' ]
];

var flds = [], cols = [];
var i;
for (i=0; i < fields.length; i++) {
var id = fields[i][0];
var fullname = fields[i][1];
flds[i] = {
name: id,
type: 'string'
};
cols[i] = {
id: id,
header: fullname,
dataIndex: id,
// without this, custom editors don't seem to work at all:
editor: new Ext.form.TextField()
};
};

var grid = new Ext.grid.EditorGridPanel({
store: new Ext.data.ArrayStore({
fields: flds,
data: [
[ '!lp.intro-text', 'Bonjour' ],
[ 'subjectlp.subjects', '["Foo","bar"]' ]
]
}),
columns: cols,
autoHeight: true,
autoExpandColumn: cols[cols.length-1].id,
stripeRows: true,
columnLines: true
});

//-----------------------------------------------------------------
// create the custom cell editor

var ed = new Ext.Editor({
allowBlur: true,
autoSize: 'none',
autoShow: true,
cancelOnEsc: true,
completeOnEnter: true,
field: new TestPanel({}),
shadow: false
});

cellEditors = [
new Ext.Editor({
allowBlur: true,
autoSize: 'none',
autoShow: true,
cancelOnEsc: true,
completeOnEnter: true,
field: new TestPanel({}),
shadow: false
}),
new Ext.Editor({
field: { xtype: 'textfield' },
autoSize: true
})
];

// override the column model's getCellEditor so that we can pop up
// an editor that is appropriate to the parameter being edited

var cm = grid.getColumnModel();
cm.getCellEditor = function (col, row) {
//alert('col='+col+' row='+row);
return cellEditors[col];
};

grid.render('x');
});
</script>


</head>
<body>

<div id="x" style="width: 400px; height: 200px;"></div>
<div id="y" style="width: 400px; height: 200px;"></div>
</body>
</html>

sacha
21 Apr 2010, 1:41 AM
Re problem (2): It appears that the Editor collapses the panel when it hides, but never expands it again.

I was able to fix this by intercepting and suppressing the collapse:


this.on('beforecollapse', function () { return false; });