<tbody id="d1jhg"></tbody><th id="d1jhg"><track id="d1jhg"></track></th>
    <nav id="d1jhg"></nav>
  • <em id="d1jhg"></em>
  • <th id="d1jhg"><pre id="d1jhg"><sup id="d1jhg"></sup></pre></th>

  • <em id="d1jhg"></em>
    <em id="d1jhg"><acronym id="d1jhg"></acronym></em><dd id="d1jhg"><noscript id="d1jhg"></noscript></dd>

    Extjs7 classic 自定義panel折疊圖標

    小編:管理員 52閱讀 2022.09.07

    版本

    7.4.0 classic

    效果
    • 展開
    • 折疊
    源碼
    1. 覆蓋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')
            }
        }
    }
    復制
    1. 覆蓋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;
    },
    復制
    關聯標簽:
    国产亚洲无线码在软件线,国产女人18毛一级毛片,亚洲中文综合手机版在线,国产另类综合一区导航,亚洲va韩国va欧美va久久下载,久久先锋男人资源网站
    云和县餐饮有限公司 广元市水果有限公司 宜宾市动植物种苗有限公司 惠民县蔬菜有限公司 常山县干果有限公司 云和县牲畜有限公司
    兰州市棉类有限公司 阳谷县动物有限公司 嘉善县艺术有限公司 松阳县木炭有限公司 永嘉县造纸有限公司 安吉县蔬菜有限公司
    简阳市艺术有限公司 开化县造纸有限公司 常山县木炭有限公司 苍南县食用菌有限公司 磐安县水果有限公司 文成县杂果有限公司