Question

我想在Grid面板的tbar中添加textfield，但它不起作用。

我尝试按钮然后工作..

此代码无效，错误消息显示 TypeError：g.el为null

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

但是这段代码正在运作，

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

有人知道，为什么会这样？

我找到了，

它 renderTo：'tableID'，但我改为 renderTo：Ext.getBody（）

然后它的工作原理。但是我想把网格放到特定的html元素中，我该怎么办？

[编辑]

我想插入#listTable，

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

我只是试图'包装'然后它起作用，

所以我尝试了， renderTo：'wrap＆gt; listTable'

但它不起作用：（

Answer 1

以下代码在4.1.3中没有任何错误。它可能是您的版本中的错误？您可以在其中一个API demo框中进行测试。只需复制粘贴即可。 tbar道具是适用于dockedItem的{{1}}的简写。传递的数组会自动插入top。没有更多的事情发生。所以它必须工作

toolbar

修改

renderTo 需要有效的Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "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() });，HTML元素或 Ext.Element

Answer 2

这对我来说在ExtJS 4.1上运行正常，虽然我通常在initComponent函数中初始化组件（虽然我不明白它为什么不能像你那样工作）。所以这就像是：

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

网格面板工具栏无法渲染文本字段

2 个答案: