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

最新推荐文章于 2023-11-26 00:05:02 发布

weixin_30512043

最新推荐文章于 2023-11-26 00:05:02 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/firesword/p/10568453.html

博客提到在处理稍复杂业务时，用border布局和弹窗体方式解决问题较费劲，而card布局是很好的解决办法。其使用简单，为每个页签设置itemId，用setActiveItem( )方法限制展现卡片，掌握此方法和设置itemId属性即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直不是很待见直接使用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);
        }
    }