Extjs7 classic 自定义panel折叠图标
2023-04-18 13:13:58 时间
版本
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;
},
相关文章
- Webots2021b和ROS2调试笔记21-07-29
- 惋惜!90后游戏开发大神毛星云离世
- 90后游戏开发大神毛星云跳楼自杀!8年执着国产3A梦碎
- 域名注册网站建设方案 域名注册的几个要点
- 互联网大厂的AB面:一边裁员一边福利升级
- 软件开发架构模式浅谈:一些思考和实践记录
- 为何机器人仿真如此复杂?可否简化节省宝贵时间?
- 【Python100天学习笔记】Day13 进程和线程
- 骁龙8四倍AI算力硬科技:上可超分下可增强信号,多个算法同时跑
- 【Python100天学习笔记】网络编程和应用开发
- 云服务器怎么建设网站 云服务器的种类
- ROS2(Win10)更新记录21-07-27
- 云服务器怎样建设网站 云服务器的优势
- 女神青涩时纤毫毕现!腾讯AI模型GFPGAN火上GitHub热榜第一
- ROS之choro功能包
- 如何快速解决Github下载源码编译报错并顺利运行机器人等项目案例(Webots+ROS2)
- RDPWrap1.6.2让windows家庭版Home实现远程桌面
- ROS 2 Humble Hawksbill将于2022年5月发布
- 【公益分享】炼石计划企业级JavaWeb漏洞挖掘实战之第二期基于SpringBoot架构的办公OA系统漏洞挖掘
- webp是什么文件格式?