javascript - 如何在 ext.panel.Panel 内的 Ext.js 中添加列

Question

我正在设计一个屏幕，其中标题有一个具有某些功能的按钮。为了实现这一点，我使用了

Ext.panel.Panel

现在我想在此屏幕中的标题下方添加列。这是我的代码:

var screen = Ext.create('Ext.panel.Panel', {
    title: 'Search',
    tools: [{
        xtype: 'button',
        text: 'Click',
        //code here for button functionality
    }],
    layout: 'column',

    items: [{
        text: "column1",
        width: .5
    }, {
        text: "column2",
        width: .5
    }]
})

我得到的错误是我可以让按钮在标题上工作，但看不到列。有解决方案来解决这个问题吗？我还包括了该图像。黑色矩形显示了我的列的显示方式。

Answer 1

在 Ext 4.1.1 和 Ext 4.2.0 中，您的代码需要进行以下更改:

1. 将列配置中的属性 text 重命名为 title
2. 在同一配置中，将属性 width 重命名为 columnWidth
3. 添加renderTo: Ext.getBody()属性

jsfiddle 似乎对 extjs panel 的呈现方式施加了一些限制。虽然我不确定 jsfiddle 有什么问题，但这里有一个 Plunker link按预期显示面板。

IMO，ExtJs GridPanel 是将工具栏添加到面板并显示表格数据的更好方法。阅读更多相关信息 Sencha docs