2

我在 ExtJs 4.0 中的简单表格布局有问题。我有 4 个面板，我想以 2X2 面板格式排列。通常这将是 2 列和 2 行，我可以在 ExtJs 中成功地做到这一点；但是，出于我的目的，我希望有 4 列和 2 行。我希望布局是这样的：

|1|222|
|33|44|

面板 1：跨越一列，一排

面板 2：跨越 3 列，1 行

面板 3：跨越 2 列，1 行

面板 4：跨越 2 列，1 行

这看起来很简单，但我似乎无法让它正常工作！以下是我从 ExtJs 示例中复制和修改的全部代码：http ://docs.sencha.com/ext-js/4-0/#!/example/layout/table.html （对于出于某种原因，该示例没有指向其 Javascript 代码的链接，但我能够在 ext-4.0.1/examples/layout/table.js 下的 ExtJs 示例文件夹中找到它）

Ext.onReady(function() {
var panel = Ext.create('Ext.Panel', {
    id:'main-panel',
    baseCls:'x-plain',
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 4
    },
    // applied to child components
    defaults: {frame:true, width:200, height: 200},
    items:[{
        title:'Item 1',
        colspan:1,
        width:200
    },{
        title:'Item 2', 
        colspan:3,
        width:600
    },{
        title:'Item 3', 
        colspan:2,
        width:400
    },{
        title:'Item 4',
        colspan:2,
        width:400

    }]
});

});

现在，据我所知，这段代码应该可以工作。但我得到的结果是这样的： 列表布局

有人知道为什么面板 2 向右移动一列吗？Sencha Docs 中的示例有很多面板跨越不止一列，但我一定忽略了一些东西，我不知道是什么！

感谢您所有的帮助！

4

2 回答 2

1

在您的面板上添加

layout: {
    type: 'table',
    // The total column count must be specified here
    columns: 3
},

并将此代码应用于子项目

tdAttrs: {
    colspan: 2
}

经过研究并尝试以纯 HTML 格式创建它，我发现您无法在一张表中实现您要查找的内容。

于 2012-06-21T20:04:16.127 回答
0

我和你有同样的问题，我用在 HTML 页面中写一个表来调试它，我发现你必须让表知道它有多少 max td。所以我将 max count invisible td(item) 添加到 ExtJS 面板中，并修复了该错误。

这是整个代码：

        var list = response.responseText.evalJSON();

        var columnArray = new Array();
        if(list != null) {

            for(var i = 0; i < list.length; i++) {
                var cell = {
                    id: list[i].id,
                    title: list[i].cellTitle,
                    autoScroll: true,
                    width: Calculator.getWidth(CELL_WIDTH, PADDING, list[i].colNum),
                    height: Calculator.getWidth(CELL_HEIGHT, PADDING, list[i].rowNum),
                    colspan: list[i].colNum,
                    rowspan: list[i].rowNum,
                    collapsible: true,
                    tools: tools,
                    html: HtmlCreator.create(list[i].id, list[i].href)
                };
                columnArray.push(cell);
            }

            **// For IE6+ add placeholder cell to calculate the total count of column**
            for(var i = 0; i < COLUMN_COUNT; i++) {
                var placeholder_cell = {
                    baseCls: 'hidden-cls',
                    bodyStyle: 'visibility: hidden;display: none;',
                    width: Calculator.getWidth(CELL_WIDTH, PADDING, 1),
                    height: Calculator.getWidth(CELL_HEIGHT, PADDING, 1)
                };
                columnArray.push(placeholder_cell); 
            }

            var panel = new Ext.Panel({
                id: 'main-panel',
                baseCls: 'x-plain',
                renderTo: 'portal-el',
                layout: {
                    type: 'table',
                    columns: COLUMN_COUNT
                },
                defaults: {frame: true, width: CELL_WIDTH, height: CELL_HEIGHT},
                items: columnArray
            });
于 2013-04-07T15:52:04.557 回答