0

アコーディオンで別のアイテムをクリックしたときにのみアイテムを閉じることを意味する、アイテムが開いているときにユーザーがアイテムを再び閉じることを許可しないようにすることは可能かどうか疑問に思っていました。それが十分に明確であることを願っています。

私はコードを追加しています：

Ext.define('application.view.SystemHealth', {
extend: 'Ext.Container',
alias: 'widget.globalSynchronization',
requires: ['infra.view.views.BoxHeader',
    'application.view.SystemStatusHeader',
    'application.model.SystemHealth',
    'application.store.SystemHealth',
    'infra.utils.pvs.SyncJobRunningStep',
    'application.view.CostCalculation',
    'application.view.SystemStatusHeader',
    'application.view.DataCollector',
    'application.view.PublicCloudConnection',
    'Ext.layout.container.Accordion'

],

layout:{
    type:'vbox',
    align:'stretch'

},
header: false,
cls: ['global-synchronization'],
syncJobStatus: null,



initComponent: function() {
        var me = this;

        me.store =  Ext.create('itfm.application.store.SystemHealth');
        me.store.load({scope: me, callback: me.onLoadDone});


    Ext.apply(me, {
        items: [
            {
                xtype: 'boxHeader',
                width: '100%',
                title: itfm.application.T.GlobalSynchronizationTitle

            },
            {
                xtype: 'label',
                width: '90%',
                html: itfm.application.T.GlobalSynchronizationDescription,
                margin: "0 0 30 10"
            }
        ]
    });

    me.callParent(arguments);

},

onLoadDone: function(records, operation, success){
    var me =this;
    var accordionItemsMargin =  '0 0 30 0';
    me.accordion = Ext.create('Ext.panel.Panel', {


        margin: "0 0 30 10",

        defaults:[{
            layout:'fit',
            height:'100%',
            width:'100%'
        }] ,
        layout: {
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true,
            fill : true,
            collapseFirst :true
        },
        items: [
            {
                height: 180,
                xtype: 'dataCollector',
                autoScroll:true,
                margins: accordionItemsMargin,
                store: records[0].dcModule()
            }
            ,
            {
                xtype: 'costCalculation',
                margins: accordionItemsMargin,
                store: records[0].ccModule()
            },
            {
                xtype: 'publicCloudConnection',
                margins: accordionItemsMargin,
                store: records[0].pcModule()
            }

        ]

    });

    me.add( me.accordion);

}

});

助けてくれてありがとう

4

2 に答える 2

2

あなたが望むのは、ユーザーが現在展開されているパネルをクリックしても、次のパネルを折りたたんで展開するのではなく、何も起こらないことです。そうですか?

残念ながら、そのための組み込みオプションはありません...本当に必要な場合は、Ext.layout.container.Accordion自分でオーバーライドして実装する必要があります。

編集

実際、折りたたみ/展開コードのほとんどはExt.panel.Panelクラスにあります。

この単純なオーバーライドは、あなたが望むことをするのに十分であるようです. どうやら、このメソッドは折りたたみリスナーにのみ使用されるため、悪影響はありません (メソッドがコードのどこかでも使用されていない限り...)。

Ext.define('Ext.ux.Panel.JQueryStyleAccordion', {
    override: 'Ext.panel.Panel'
    ,toggleCollapse: function() {
        if (this.collapsed || this.floatedFromCollapse) {
            this.callParent();
        }
    }
});

このフィドルを参照してください。

于 2013-07-23T14:04:17.040 に答える
0

次の方法でアコーディオンをオーバーライドできました

Ext.define('itfm.application.view.SystemHealthAccordion', {
extend: 'Ext.layout.container.Accordion',
alias: ['layout.systemHealthAccordion'] ,

constructor: function() {

    var me = this;
    me.callParent(arguments);

},
onComponentExpand: function(comp) {
    var me = this;
    me.callParent(arguments);
    var button = comp.down('tool');
    button.setDisabled(true);

},
onComponentCollapse: function(comp) {
    var me = this;
    me.callParent(arguments);
    var button = comp.down('tool');
    button.setDisabled(false);
}

});

アコーディオンの最初の項目のクラス内で、次のことを行う必要があります。

me.on('boxready', me.disableTools);
},
// disable the click on the item in case it's open
disableTools: function(){
    var me = this;
    var button = me.getHeader().down('tool');
    button.setDisabled(true);
}

したがって、最初のアイテムが開いているときは同じ動作になります

于 2013-07-24T09:31:26.760 に答える