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

Question

Im designing a screen in which the header has a button with certain functionality. To acheive this I used

Ext.panel.Panel

Now I want to add columns within this screen below the header. This is my code:

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

The error Im getting is that I can get the button to work on the header, but cannot see the columns. Is there a solution to fix this? I have also included the image. The black rectangle shows how my columns are appearing.

Answer 1

In both Ext 4.1.1 and Ext 4.2.0 the following changes are required in your code:

1. Rename property text to title in the columns config
2. In the same config, rename property width to columnWidth
3. Add renderTo: Ext.getBody() attribute

jsfiddle seems to impose some limitations on how extjs panel is rendered. While I am not sure what's the issue with jsfiddle, here is a Plunker link that displays panel as expected.

IMO, ExtJs GridPanel is a better way to add tool bar to your panel and display tabular data. Read more about it in Sencha docs

Answer 2

I finally worked out the solution for my question. I needed a button functionality in the header and also columns which could have functionality like arranging the items in ascending/descending order etc (basically the 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
                    }],
                 }],
});