一直不是很待见直接使用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); } }
原文:https://www.cnblogs.com/firesword/p/10568453.html