колона в оформлението на таблицата, преместване/обхващане на панели неправилно EXTJS

Имам проблем с просто оформление на таблица в ExtJs 4.0. Имам 4 панела, които бих искал да подредя във формат 2X2 панел. Обикновено това ще бъдат 2 колони и 2 реда и мога да направя това успешно в ExtJs; но за моите цели бих искал да имам 4 колони и 2 реда. Искам оформлението да е така:

|1|222|
|33|44|

Панел 1: обхваща една колона, един ред

Панел 2: обхваща 3 колони, един ред

Панел 3: обхваща 2 колони, един ред

Панел 4: обхваща 2 колони, един ред

Това изглежда достатъчно лесно за изпълнение, но изглежда не мога да го накарам да работи правилно! Следното е целият ми код, който копирах и модифицирах от примера на ExtJs на адрес: http://docs.sencha.com/ext-js/4-0/#!/example/layout/table.html (по някаква причина примерът не Нямам връзка към кода на Javascript, но успях да го намеря в папката с примери на ExtJs под ext-4.0.1/examples/layout/table.js)

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 има много панели, обхващащи повече от една колона, но трябва да пренебрегвам нещо и не мога да разбера какво!

Благодаря за цялата ви помощ!


extjs extjs4
person karol    schedule 21.06.2012    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Добавете към вашия панел

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

и приложете този код към дъщерни елементи

tdAttrs: {
    colspan: 2
}

След проучване и опит да го създам в обикновен HTML разбрах, че не можете да постигнете това, което търсите в една таблица.

person Grigor    schedule 21.06.2012
comment
За съжаление това не проработи. Панелите бяха изобразени последователно на един ред. - person karol; 22.06.2012

arrow_upward
0
arrow_downward

Имам същия проблем с вас и отстраних грешки с писане на таблица в HTML страница и открих, че трябва да уведомите таблицата колко макс. td има. така че добавям максимален брой невидими 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
            });
person LiuYansong    schedule 07.04.2013