CODEWITHSUNDEEP
javascriptextjsextjs4
user1319236
user1319236

Reputation: 97

Problem creating a container Panel in ExtJS

I am new to ExtJS and I want to create a container Panel for my buttons in ExtJS, all i managed to do so far is to try to add a simple button in my class like so :

    Ext.define('MyClass.view.buttons', {
    extend: 'Ext.container.Container',
  
    alias: 'widget.MyClass',


    controller: 'MyClass',
    requires: [
      
       'MyClass.view.Main',

    ],
    items   : [
        {
            xtype: 'button',
            text : 'My Button'
        }
    ]

});

Which doesn't display nothing too (with no reported errors in the console). Please help me out with this.

Upvotes: 0

Views: 241

Answers (1)

Dipen Shah
Dipen Shah

Reputation: 26085

Update:

You can user handler or listeners property to set click handler. My code was just for reference and rendering element to body will of course render it on page and not inside another element. Take a look at this updated example, where I have used xtype property of my defined component to use it inside another custom component.

Ext.define('MyClass.view.buttons', {
  extend: 'Ext.container.Container',
  alias: 'widget.MyClass',
  xtype: 'myclass',
  items: [{
    xtype: 'button',
    text: 'Child Button Button',
    handler: function() {
        alert('You clicked the button!');
    }
  }]
});

Ext.define('MyClass.view.anotherButtons', {
  extend: 'Ext.container.Container',
  alias: 'widget.MyAnotherClass',
  items: [{
    xtype: 'myclass'
  }, {
    xtype: 'button',
    text: 'Parent Container Button'
  }]
});

Ext.create('MyClass.view.anotherButtons', {
  renderTo: Ext.getBody(),
  width: 400,
  height: 300,
});


Ext.define('MyClass.view.buttons', {
  extend: 'Ext.container.Container',
  alias: 'widget.MyClass',
  items: [{
    xtype: 'button',
    text: 'My Button'
  }]
});
Ext.create('MyClass.view.buttons', {
  renderTo: Ext.getBody(),
  width: 400,
  height: 300,
});

Upvotes: 1

Related Questions