View Full Version : Rendering a panel inside the expanded row in a grid (using Ext.ux.RowExpander)

mono blaine
15 May 2012, 12:49 AM
I'm using the Ext.ux.RowExpander plugin and I want to render a form panel inside each of the expanded rows. Everything is OK, however the grid selection model eats my space keystrokes even though the enableKeyNav property of the row selection model is disabled, so I can't enter any space character inside the text field of that form panel. Do you have any suggestions? Should this be considered as a bug?

Here is a sample code:

// Define a grid
Ext.define("MyGrid", {
extend: "Ext.grid.Panel",
alias: "widget.mygrid",
requires: ["Ext.ux.RowExpander"],
columns: [{
header: "Id",
dataIndex: "id"
}, {
header: "Name",
dataIndex: "name"
store: Ext.create("Ext.data.ArrayStore", {
fields: ["id", "name"],
data: [
[1, "foo"],
[2, "bar"]
selModel: {
enableKeyNav: false
plugins: [{
ptype: "rowexpander",
rowBodyTpl: ['<div id="mydiv{id}" class="mydiv"></div>']
width: 400,
height: 200,
renderTo: Ext.getBody(),

initComponent: function () {
this.relayEvents(this.view, ["expandbody", "collapsebody"]);

Create an instance of that grid:

var grid = Ext.widget("mygrid");

Add expandbody event:

grid.on("expandbody", function (rowNode, record, expandRow) {
var containerDiv = Ext.fly(expandRow).down(".mydiv"),
formPanel = Ext.widget("form", {
renderTo: containerDiv.id,
title: record.get("name"),
items: [{
xtype: "textfield",
name: "foofield",
fieldLabel: "Foo"