card布局解决复杂操作的布局问题 - 快速开发平台

card布局解决复杂操作的布局问题

一直不是很待见直接使用card布局，直到对于一些稍微复杂点的业务，

通过border布局和弹窗体的方式解决特别费劲之后，才想起了card布局，

发现card布局真是一个很好的解决办法。

那个使用起来很简单，对于里面的每一个页签，我们都要设置好一个itemId,

这样就可以   setActiveItem( ) 方法来限制展现哪个卡片了。

对于card布局，只要知道用这个方法就足够了。

设置一下itemId属性。

        zhuUx.centerContainer = Ext.create(\'Ext.container.Container\', {
                region: \'center\',
                items: [zhuUx.luxianGrid, zhuUx.yinhuanLuduanGrid, zhuUx.editor],
                layout: \'card\'
            });

            zhuUx.luxianNextAction = Ext.create(\'Ext.Action\', {
                scope: zhuUx,
                tooltip: \'下一步\',
                scale: \'medium\',
                handler: zhuUx.onLuxianNextAction,
                text: \'下一步\'
            });

            zhuUx.yinhuanLuduanNextAction = Ext.create(\'Ext.Action\', {
                scope: zhuUx,
                tooltip: \'下一步\',
                scale: \'medium\',
                handler: zhuUx.onYinhuanLuduanNextAction,
                text: \'下一步\'
            });

            zhuUx.yinhuanLuduanPreAction = Ext.create(\'Ext.Action\', {
                scope: zhuUx,
                tooltip: \'上一步\',
                scale: \'medium\',
                handler: zhuUx.onYinhuanLuduanPreAction,
                text: \'上一步\'
            });

            zhuUx.editorPreAction = Ext.create(\'Ext.Action\', {
                scope: zhuUx,
                tooltip: \'上一步\',
                scale: \'medium\',
                handler: zhuUx.onEditorPreAction,
                text: \'上一步\'
            });

            zhuUx.createAction = Ext.create(\'Ext.Action\', {
                scope: zhuUx,
                tooltip: \'新增\',
                scale: \'medium\',
                handler: zhuUx.onSaveAnfangJihuaAction,
                text: \'新增\'
            });

            zhuUx.cancelAction = Ext.create(\'Ext.Action\', {
                scope: zhuUx,
                tooltip: \'取消\',
                scale: \'medium\',
                handler: zhuUx.onCancelAction,
                text: \'取消\'
            });



            var actionBtns = [zhuUx.yinhuanLuduanPreAction, zhuUx.editorPreAction,
                zhuUx.luxianNextAction, zhuUx.yinhuanLuduanNextAction,
                zhuUx.createAction, zhuUx.cancelAction];

        zhuUx.currentAddWin = Ext.create(\'Ext.window.Window\', {
                title: Ext.String.format("新增{0}", zhuUx.mainItemCName),
                overflowY: \'auto\',

                layout: "border",
                width: sintoon.get200Width(990),
                height: sintoon.get200Height(550),
                dockedItems: [{
                    xtype: \'toolbar\',
                    dock: \'bottom\',
                    layout: {
                        defaultMargins: {
                            right: 50
                        },
                        pack: "center"
                    },
                    items: actionBtns
                }],
                items: [zhuUx.centerContainer]
            })

            zhuUx.SetWindowState("luxianGrid");
    
    
    
    SetWindowState: function (newstate) {
        var zhuUx = this;
        if (newstate == "luxianGrid") {
            zhuUx.currentAddWin.setTitle("1：选择路线");
            zhuUx.yinhuanLuduanPreAction.hide();
            zhuUx.editorPreAction.hide();
            zhuUx.luxianNextAction.show();
            zhuUx.yinhuanLuduanNextAction.hide();
            zhuUx.createAction.hide();

            zhuUx.centerContainer.getLayout().setActiveItem(newstate);
        }
        else if (newstate == "yinhuanLuduanGrid") {
            zhuUx.currentAddWin.setTitle("2：选择隐患路段");
            zhuUx.yinhuanLuduanPreAction.show();
            zhuUx.editorPreAction.hide();
            zhuUx.luxianNextAction.hide();
            zhuUx.yinhuanLuduanNextAction.show();
            zhuUx.createAction.hide();

            zhuUx.centerContainer.getLayout().setActiveItem(newstate);
        }
        else if (newstate == "editor") {
            zhuUx.currentAddWin.setTitle("3：填写计划信息");
            zhuUx.yinhuanLuduanPreAction.hide();
            zhuUx.editorPreAction.show();
            zhuUx.luxianNextAction.hide();
            zhuUx.yinhuanLuduanNextAction.hide();
            zhuUx.createAction.show();

            zhuUx.centerContainer.getLayout().setActiveItem(newstate);
        }
    }