grid panel toolbar failed rendering textfield

0
votes

I want to add textfield into tbar in Grid panel, but it does not work.

And I tried with button then it works..

This code is not working, the error message say, TypeError: g.el is null

var grid = Ext.create('Ext.grid.Panel', {
...
tbar : [
  {
     xtype : 'textfield',
     name : 'test'
  }
]
});

But this code is working,

var grid = Ext.create('Ext.grid.Panel', {
...
tbar : [
  {
     xtype : 'button',
     text : 'keyword'
  }
]
});

Anybody know, why it happened?

I found,

it renderTo : 'tableID', but I changed to renderTo : Ext.getBody()

then it works. but I want to put the grid into specific html element, how should I do?

[Edit]

I want to insert to #listTable,

<div id="wrap">
    <table id="listTable"></table>
</div>

I just tried to 'wrap' then it works,

So I tried, renderTo : 'wrap > listTable'

but it does not work :(

2
extjsextjs4extjs4.1

2 Answers

1
votes

The code below works without any error in 4.1.3. It may be a bug in your version? You can test it in one of the API demo boxes. Just copy paste it. The tbar prop is ah shorthand for a dockedItem that get applied to top. A passed array get automatically inserted into a toolbar. Nothing more happends. So it must work

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    tbar: [
      {
         xtype : 'textfield',
         name : 'test'
      }
    ],
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Edit

renderTo requires a valid id, a HTML Element or Ext.Element

0
votes

This works fine for me on ExtJS 4.1, though I usually initialize components within an initComponent function (though I don't see why it shouldn't work as you do it). So this would be something like: 

initComponent: function() {
    this.dockedItems = [{
        xtype: 'toolbar',
        items: [ {xtype:'textfield', name:'test', value:'test'} ]
    }];
    this.callParent(arguments);
}