Extjs7 classic 自定义panel折叠图标
版本
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;
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
2020-04-11 spring 启动时自动运行
2020-04-11 spring cloud oauth2授权服务 默认tokenService配置源码
2020-04-11 spring cloud 搭建oauth2授权服务 使用redis存储令牌
2020-04-11 spring cloud oauth2授权服务 clientDetails配置源码
2020-04-11 spring 验证框架
2020-04-11 IDEA 插件整理
2020-04-11 spring security笔记 默认登陆页面源码