首页 > 其他 > 详细

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

时间:2019-03-21 23:07:51      阅读:158      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:https://www.cnblogs.com/firesword/p/10568453.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!