Question

我有这样的观点：

Ext.define('Example.demo.CycleInfo', {

    extend: 'Ext.panel.Panel',
    requires:[
            'Ext.layout.container.Accordion'
    ],
    xtype: 'cycleinfo',

    title: 'All Data',


    defaults: {
        frame: true,
        bodyPadding: 5
    },

     initComponent: function() {
        data = this.data
        Ext.apply(this, {
            items: [{
                    layout: 'accordion',
                    frame: true,
                    bodyPadding: 5,
                    items: [{
                        xtype:'structure'
                    },
                    {
                    title: 'Requests',
                    html: 'Empty'
                    }]
            }]
        });
        this.callParent();
     }

});

这里有两个手风琴（一个包含项目和其他请求）它们是静态的..我想基于this.data值（包含长度）它应该在内部项目中有手风琴。我应该怎么做。

Answer 1

如果您想使用accordion布局向主容器添加更多面板，这应该可行：

Ext.define('Example.demo.CycleInfo', {

        extend: 'Ext.panel.Panel',
        requires:[
            'Ext.layout.container.Accordion'
        ],
        xtype: 'cycleinfo',

        title: 'All Data',


        defaults: {
            frame: true,
            bodyPadding: 5
        },

        initComponent: function() {
            me = this;
            Ext.apply(me, {
                items: [{
                    layout: 'accordion',
                    frame: true,
                    bodyPadding: 5,
                    items: [{
                        title: 'Testing...',
                        html: 'This is a test panel'
                    },{
                        title: 'Requests',
                        html: 'Empty'
                    }]
                }],
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    ui: 'footer',
                    items: ['->',{
                        text: 'Add panel',
                        handler: function() {
                            this.up().up().down('panel').add({
                                title: 'New Panel',
                                html : 'New Content'
                            })
                        }
                    }]
                }]
            });
            this.callParent();
        }

    });

    Ext.create('Example.demo.CycleInfo',{
        renderTo: Ext.getBody(),
        width: 500,
        height: 500
    });

Answer 2

Ext.define('CycleInfo', {

  extend: 'Ext.panel.Panel',
  requires:[
        'Ext.layout.container.Accordion'
  ],
  xtype: 'cycleinfo',

  title: 'All Data',
  width : 400,
  height : 500,

  defaults: {
    frame: true,
    bodyPadding: 5
  },
  layout: 'accordion',
  initComponent: function() {
    this.tbar = [{
        text : 'Add Panel To Accordion',
        handler : function(){
            this.add({
                xtype:'panel',
                html: 343434
            });
        },
        scope:this
      }];
      this.callParent();
  }

 });

Ext.create('CycleInfo',{renderTo:Ext.getBody()});

In your case you must change **xtype** in initComponent all is well

如何动态添加手风琴项目？

2 个答案: