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

Question

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

Ext.panel.Panel

现在我想在此屏幕中的 header 下方添加列。这是我的代码：

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
    }]
})

我得到的错误是我可以让按钮在 header 上工作，但看不到列。有没有办法解决这个问题？我也包括了图像。黑色矩形显示我的列的显示方式。

Answer 1

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

在列配置

text

title

在相同的配置中，将属性 width 重命名为 columnWidth
添加renderTo: Ext.getBody()属性

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

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

中阅读更多相关信息

Answer 2

我终于找到了我的问题的解决方案。我需要 header 中的按钮功能以及可以具有按 ascending/descending 顺序排列项目等功能的列（基本上是 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
                    }],
                 }],
});

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

How to add Columns in Ext.js within ext.panel.Panel

javascript

extjs