Question

我使用Ext Js v6.2，在我的应用程序中我有手风琴有两个面板 Misc.Charge＆amp;其他费用，在ext js默认的第一个手风琴面板 [Misc Charge] 总是打开，但我需要第二个手风琴面板 [其他费用] 来设置默认打开永远。这是我的代码，我已经在文档和其他不起作用的内容中进行了搜索。请解决问题。提前谢谢。

      {
                                flex: 1,
                                xtype: 'panel',
                                frame: true,
                                border: false,
                                cls: 'panel-primary',
                                anchor: '0',
                                height: 100,
                                width: '100%',
                                layout: 'accordion',
                                autoScroll: true,

                                layoutConfig: {
                                    titleCollapse: false,
                                    animate: false,
                                    activeOnTop: false
                                },
                                items: [
                                    {
                                        flex: 1,
//                                        xtype: 'panel',
                                        form: true,
                                        anchor: '0',
                                        height: 100,
                                        title: 'Mis.Charge',
                                        frame: true,
                                        html: '<div style="width:135px;height:100px;">',
                                        header: {
                                            height: 27,
                                            padding: 0
                                        },
                                        layout: {
                                            type: 'hbox',
                                            align: 'stretch',
                                            columns: 1
                                        },
                                        items: [
                                            {
//                                             /   xtype: 'fieldcontainer',
                                                flex: 1,
                                                id: 'upper',
                                                height: 100,
                                                width: 100,
                                                bodypadding: '30',
                                                html: '<div style="width:135px;height:100px;">',
                                                items: [gridStore,
                                                    {
//                                                        xtype: 'panel',
                                                        flex: .5,
                                                        height: 90,
                                                        width: 207,
                                                        bodypadding: '30',
                                                        html: '<div style="width:135px;height:100px;">',
                                                        items: [stores]
                                                    },
                                                    {
                                                        xtype: 'splitter'
                                                    },
                                                    {
                                                        xtype: 'splitter'
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        fieldLabel: 'Total Product Value',
                                                        name: 'chargeNameInvChargeDtl',
                                                        style: 'top: -21%;margin-left: 32.6%;position: relative;',
                                                        readOnly: true,
                                                        fieldCls:'TotalValue',
                                                        labelWidth: 245
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        fieldLabel: 'Total Other Charges ',
                                                        name: 'chargeNameInvChargeDtl',
                                                        style: 'top: -21%;margin-left: 32.6%;position: relative;',
                                                        fieldCls: 'TotalValue',
                                                        readOnly: true,
                                                         labelWidth: 245

                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        fieldLabel: 'Total Invoice Values',
                                                        name: 'chargeNameInvChargeDtl',
                                                        style: 'top: -21%;margin-left: 32.6%;position: relative;',
                                                        fieldCls: 'TotalValue',
                                                        readOnly: true,
                                                        labelWidth: 245
                                                    }
                                                ]

                                            },
                                        ]
                                    },
                                    {
                                        xtype: 'panel',
                                        title: 'Other Charges',
                                        height: 700,
                                        form: true,
                                        anchor: '0',
//                                        cls: 'panel-primary',
                                        html: '<div style="width:135px;height:100px;">',
                                        width: 600,
                                        frame: true,
                                        header: {
                                            height: 27,
                                            padding: 0,
                                        },
                                        layout: 'vbox',
                                        items: [
                                            {
//                                                xtype: 'panel',
//                                                flex: 1,
//                                                height: 180,
//                                                width: 600,
//                                                bodypadding: '30',
                                                items: {
                                                    xtype: 'panel',
                                                    flex: 1,
                                                    height: 180,
                                                    width: 620,
                                                    bodypadding: '30',
                                                    items: [
                                                        {
                                                            xtype: 'fieldcontainer',
                                                            flex: .5,
                                                            height: 22,
//                                                            width: 410,
                                                            bodypadding: '30',
                                                            fieldLabel: 'Single Freight,Insurance & Other Charges For All Invoices',
                                                            labelWidth: 310,
                                                            defaultType: 'checkboxfield',
                                                            items: [
                                                                {
                                                                    name: 'SingleFreight',
                                                                    checked: true,
//                                                                    inputValue: '5',
                                                                    id: 'checkbox3'
                                                                }
                                                            ]
                                                        },
                                                        otherStore],
                                                    html: "<hr style='position: relative; top: 14px; width:97.5%; margin-left:0.5%'></hr>",
                                                }


                                            },
                                            {
//                                                xtype: 'panel',
//                                                flex: 1,
//                                                height: 180,
//                                                width: 610,
//                                                bodypadding: '30',
                                                items: {
                                                    xtype: 'fieldcontainer',
                                                    flex: 1,
                                                    height: 120,
                                                    width: 620,
                                                    bodypadding: '30',
                                                    items: [otherStore1]

                                                }
                                            }
                                        ]
                                    },

Answer 1

您可以在手风琴的boxready侦听器功能中展开相应的面板。例如，要展开第二项：

 listeners: {
                boxready: function () {
                    this.items.getAt(1).expand();
                }
            }

参见示例小提琴here。

Ext Js如何设置默认的手风琴面板总是打开？

1 个答案: