Question

我的任务是将一个页面上的现有ExtJS 4面板移动到一个Accordion布局中，该面板被渲染为单独的div s;我已将div作为项目移动到手风琴中，并且小组的渲染效果非常好。

然而，在我的特殊情况下，Accordion Panel会应用一些我想删除的（10px全方位）填充。

我怀疑它可能与某些预先存在的桌面样式有关，我很遗憾无法删除。我应该采取哪些样式表修改来专门针对手风琴控件及其内容，以便手风琴面板中包含的面板适合所有四个边缘？

如果它可能不是CSS样式，或者它可以像Accordion配置/属性一样简单，我应该设置什么来删除这个空白？我尝试了一些看起来很有前途的设置，但没有解决问题。

或者，在更负面的情况下，我是否必须将面板直接移动到手风琴中，这会带来更多问题？

基本上，如何使ExtJS Accordion Layout中每个Panel的内容完全符合其个别Accordion Panel的宽度和高度而没有空格？

Accordion面板ExtJS代码：

var accordion = Ext.create('Ext.panel.Panel',{
    bodyPadding: '0px',
    width: '370px',
    autoHeight: 'false',
    layout: 'accordion',
    items: [
        {title: 'Drawing', html: '<div id="Image" style="padding: 0px, margin: 0px; border-spacing: 0px; height: 350px"></div>'},
        {title: 'Production Processes', html: '<div id="Process" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'},
        {title: 'Production Item Details', html: '<div id="Details" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'}
    ],
    renderTo: Ext.get('Accordion')
});

Answer 1

我的解决方法是采用预先存在的面板并应用折叠控制变量：

var drawingPanel = Ext.create('Ext.panel.Panel', {
    animCollapse: false,
    collapsible: true,
    autoWidth: true,
    titleCollapse: true,
    collapseFirst: false,
    collapsed: true,
    ...

这会将面板展开为已折叠，collapse / expand / beforerender侦听器可设置/获取控制持久状态的Cookie：

    ...
    listeners:{
        expand: function(){
            var now = new Date();
            var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
            Ext.util.Cookies.set('panelCollapsed', 'false', exp);
        },
        collapse: function(){
            var now = new Date();
            var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
            Ext.util.Cookies.set('panelCollapsed', 'true', exp);
        },
        beforerender: function (){
            var cookieSet = Ext.util.Cookies.get('panelCollapsed');
            if(cookieSet == 'true')
            {
                Ext.apply(Ext.getCmp('panel'), { collapsed: true });
            }
            else
            {
                Ext.apply(Ext.getCmp('panel'), { collapsed: false });
            }
        }
    }
});

该小组的其他属性已被删除，以证明其重点。

这个实现确实考虑了一个小组;扩展和崩溃监听器可以根据需要切实控制其他面板的折叠状态。不可否认，这可能不如使手风琴控制正常工作有效，但如果它们不能按预期工作，这是一个开始。

删除ExtJS 4折叠面板中的空白，使内容适合宽度/高度

1 个答案: