如何在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. 在列config
中将属性text重命名为title
2. 在同一个配置中，将属性width重命名为columnWidth
3. 添加renderTo: Ext.getBody()属性

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

IMO，ExtJs GridPanel是一种向面板添加工具栏并显示表格数据的更好方法。在Sencha docs

中详细了解相关信息

Answer 2

我终于为我的问题制定了解决方案。我需要标题中的按钮功能以及可以具有按升序/降序排列项目等功能的列（基本上是grid.column）

var screen = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search',
tools: [{
    xtype: 'button',
    text: 'Click',
    //code here for button functionality
}],
items:
       [{xtype: 'gridpanel',    
        columns: [
                    {
                    header : "Column 1",
                    width: .5
                    }, 
                    {
                    header : "column2",
                    width: .5
                    }],
                 }],
});