Extjs7 classic 自定义panel折叠图标
小编:管理员 465阅读 2022.09.07
版本
7.4.0 classic
效果- 展开
- 折叠
- 覆盖panel组件updateCollapseTool方法修改折叠按钮图标
updateCollapseTool: function () { this.callParent(); var me = this, collapseTool = me.collapseTool; if (collapseTool) { if (me.collapsed && !me.isPlaceHolderCollapse()) { collapseTool.setIconCls('x-fa fa-indent') } else { collapseTool.setIconCls('x-fa fa-outdent') } } }复制
- 覆盖panel组件createReExpander方法修改展开按钮图标
createReExpander: function (direction, defaults) { var result = this.callParent([direction, defaults]); result.expandTool.setIconCls('x-fa fa-indent'); return result; }复制EXT源码
- ext-classic/src/panel/Panel.js
// 更新折叠按钮图标 updateCollapseTool: function() { var me = this, collapseTool = me.collapseTool, toolCfg; if (!collapseTool && me.collapsible) { me.collapseDirection = me.collapseDirection || me.getHeaderPosition() || 'top'; toolCfg = { xtype: 'tool', handler: me.toggleCollapse, scope: me }; // In accordion layout panels are collapsible/expandable with keyboard // via the panel title that is focusable. There is no need to have a separate // collapse/expand tool for keyboard interaction but we still have to react // to mouse clicks, and historically accordion panels had coolapse tools // so we leave the tool but make it unfocusable and keyboard inactive. // Note that we do the same thing for the automatically added close tool // but NOT for the other tools. if (me.isAccordionPanel) { toolCfg.focusable = false; toolCfg.ariaRole = 'presentation'; } me.collapseTool = me.expandTool = collapseTool = Ext.widget(toolCfg); } if (collapseTool) { if (me.collapsed && !me.isPlaceHolderCollapse()) { collapseTool.setType('expand-' + me.getOppositeDirection(me.collapseDirection)); collapseTool.setTooltip(me.expandToolText); } else { collapseTool.setType('collapse-' + me.collapseDirection); collapseTool.setTooltip(me.collapseToolText); } } }, // 创建展开按钮 createReExpander: function(direction, defaults) { var me = this, isLeft = direction === 'left', isRight = direction === 'right', isVertical = isLeft || isRight, ownerCt = me.ownerCt, header = me.header, result = Ext.apply({ hideMode: 'offsets', title: me.getTitle(), titleAlign: me.getTitleAlign(), titlePosition: me.getTitlePosition(), vertical: isVertical, textCls: me.headerTextCls, icon: me.getIcon(), iconCls: me.getIconCls(), iconAlign: me.getIconAlign(), glyph: me.getGlyph(), baseCls: me.self.prototype.baseCls + '-header', ui: me.ui, frame: me.frame && me.frameHeader, ignoreParentFrame: me.frame || me.overlapHeader, ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement, indicateDrag: me.draggable, collapseImmune: true, ariaRole: me.ariaRole, preventRefocus: true, ownerCt: (ownerCt && me.collapseMode === 'placeholder') ? ownerCt : me, ownerLayout: me.componentLayout, forceOrientation: true, margin: me.margin, // When placeholder is focused, focus the expander tool. // TODO: When https://sencha.jira.com/browse/EXTJS-19718 is // fixed, this should not be needed. // placeholder is a FocusableContainer defaultFocus: 'tool[isDefaultExpandTool]' }, defaults); // If we're in mini mode, set the placeholder size to only 1px since // we don't need it to show up. if (me.collapseMode === 'mini') { if (isVertical) { result.width = 1; } else { result.height = 1; } } if (header) { Ext.apply(result, { focusableContainer: header.focusableContainer, activeChildTabIndex: header.activeChildTabIndex, inactiveChildTabIndex: header.inactiveChildTabIndex, allowFocusingDisabledChildren: header.allowFocusingDisabledChildren }); } // Create the re expand tool // For UI consistency reasons, collapse:left reExpanders, and region: 'west' placeHolders // have the re expand tool at the *top* with a bit of space. if (!me.hideCollapseTool) { if (!me.maintainTitlePosition && (isLeft || (isRight && me.isPlaceHolderCollapse()))) { // adjust the title position if the collapse tool needs to be at the // top of a vertical header result.titlePosition = 1; } result.tools = [{ xtype: 'tool', type: 'expand-' + me.getOppositeDirection(direction), isDefaultExpandTool: true, uiCls: ['top'], handler: me.toggleCollapse, scope: me, tooltip: me.expandToolText }]; } result = new Ext.panel.Header(result); result.addClsWithUI(me.getHeaderCollapsedClasses(result)); result.expandTool = result.down('tool[isDefaultExpandTool=true]'); return result; },复制
相关推荐
- ExtJs七(ExtJs Mvc创建ViewPort) 前言在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。调用application方法,其参数是一个配置对象,主要配置项有以下三个:name:用来…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…