EXTJS(5.1.3)如何将展开工具对齐到East折叠到右侧面板的顶部

qpgpyjmq  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(111)

我有一个3面板的应用程序:左(西),中心和右(东).左,右面板是可折叠的.我想在右面板上的展开工具显示在折叠面板的侧标题的顶部.有没有办法做到这一点?到目前为止,我已经失败了.
这里有一个小提琴显示的问题:
https://fiddle.sencha.com/#fiddle/3ppm&view/editor
我试过查看可用的工具栏-似乎没有什么允许这样做。我也试过添加事件来拦截面板的展开和折叠,以尝试调整工具的位置,但似乎也不起作用。

5fjcxozz

5fjcxozz1#

你可以通过设置工具和标题的CSS样式来调整工具的位置。我已经更新了小提琴,检查你分享的小提琴!也有代码供你参考!
CSS代码:

.x-tool-after-title{
    top:auto !important;
}

.x-title-rotate-right{
    top:30px !important;
}

字符串
app.js:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var mainView = new Ext.panel.Panel({
            xtype: 'panel',
            title: 'Container',
            layout: 'border',
            itemId: 'bigContainer',
            height: 300,
            items: [{
                xtype: 'panel',
                title: 'Left Panel',
                itemId: 'LeftPanel',
                region: 'west',
                width: 300,
                height: 900,
                collapsible: true,
                collapseMode: 'header',
                titleCollapse: true,
                split: true,
                flex: 1,
                scroll: false,
            }, {
                xtype: 'panel',
                title: 'Center',
                itemId: 'centerPanel',
                region: 'center',
                width: 300,
                height: 900,
            }, {
                xtype: 'panel',
                title: 'Right Panel',
                itemId: 'rightPanel',
                region: 'east',
                width: 300,
                height: 900,
                collapsible: true,
                collapseMode: 'header',
                titleCollapse: true,
                split: true,
                flex: 1,
                scroll: false,
            }],
            renderTo: Ext.getBody()
        });

    }
});

相关问题