sencha-touch - 如何在 sencha touch 2 中管理自定义布局

Question

嗨，我正在处理以下面板：

Ext.define("GS.view.BoxesPanel", {
extend : 'Ext.dataview.component.DataItem',
xtype : 'boxesPanel',
alias : "widget.boxespanel",

config : {
    xtype : 'panel',
    layout : 'vbox',
    width : '60%',
    align : 'center',

    items : [{
        xtype : 'panel',
        flex : 2,
        layout : 'hbox',
        height : '70%',
        margin: '10 10 10 10',
        items : [{
            xtype : 'panel',
            flex : 1,
            items : []
        }, {
            xtype : 'panel',
            flex : 1,
            layout : 'vbox',
            items : []
        }, {
            xtype : 'panel',
            flex : 1,
            layout : 'vbox',
            items : []
        }]
    }, {
        xtype : 'panel',
        layout : 'hbox',
        flex : 1,
        height : '30%',
        margin: '10 10 10 10',
        items : [{
            xtype : 'panel',
            flex : 2,
            items : []
        }, {
            xtype : 'panel',
            flex : 1,
            items : []
        }]
    }]
}
});

这是我当前访问面板的方式（在我的控制器中）...：

 launch : function(app) {
    var store = Ext.data.StoreManager.lookup('boxStore');
    var boxesPanelList = Ext.ComponentQuery.query('BoxesPanelList')[0];
    var boxesPanel = Ext.create("GS.view.BoxesPanel");

    store.onAfter('load', function() {// Boxes are loaded when the store finishes  loading it's data, if not, the boxes appear empty
        Ext.each(store.getData().items, function(item, index) {// Iterates through BoxStore data objects (JSON)
            var box = Ext.create("GS.view.Box");
            box.setData({
                type : item.data.type,
                description : item.data.description,
                product : item.data.product
            });
            switch(item.data.position) {
                case "1":
                    box.setCls("product_vert");
                    boxesPanel.getItems().get(0).getItems().get(0).add(box);
                    break;
                case "2":
                    box.setCls("product_small");
                    boxesPanel.getItems().get(0).getItems().get(1).add(box);
                    break;
                case "3":
                    box.setCls("product_small");
                    boxesPanel.getItems().get(0).getItems().get(1).add(box);
                    break;
                case "4":
                    box.setCls("product_small");
                    boxesPanel.getItems().get(0).getItems().get(2).add(box);
                    break;
                case "5":
                    box.setCls("product_small");
                    boxesPanel.getItems().get(0).getItems().get(2).add(box);
                    break;
                case "6":
                    box.setCls("product_horiz");
                    boxesPanel.getItems().get(1).getItems().get(0).add(box);
                    break;
                case "7":
                    box.setCls("product_small");
                    boxesPanel.getItems().get(1).getItems().get(1).add(box);
                    boxesPanelList.add(boxesPanel);
                    boxesPanel = Ext.create("GS.view.BoxesPanel");
                    break;
            }
        });
    }, this);
}
});

非常感谢您提供的任何信息。