Example of a simple app made with ExtJs @sencha

Ext.Loader.setConfig({
 enabled: true
 });
 
Ext.application({
     
 name: 'myApp',
 appFolder: 'app/buttonClick',
     
    controllers: [
                  'MyController'
              ],
 
launch: function() {
	Ext.create('Ext.container.Container', {
        renderTo: 'myExample',
        height: 250,
        width: 400,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        defaults: {
           labelWidth: 150,
           margin: '5 5 5 5 '
        },
        items: [{
            xtype: 'button',
            text: 'My First Button'
        },{
            xtype: 'button',
            text: 'My Second Button'
        },{
			xtype: 'displayfield',
            fieldLabel: 'You clicked on the',
            name: 'whichButton',
            itemId: 'whichButton',
            value: ''
		}]
    });
}
}); 

Ext.define('myApp.controller.MyController', {
   extend : 'Ext.app.Controller',
 
   init : function() {
    this.control({
 
     'container' : {
      render : this.onContainerRendered
     },
     'container button' : {
      click : this.onButtonClick
     }
    });
   },
 
   onContainerRendered : function() {
    console.log('The container was rendered');
   },
 
   onButtonClick : function(button) {
    //console.log('Button Click');
    var myView = button.up('container');
    var myTextDisplay = myView.getComponent('whichButton');
    myTextDisplay.setValue('<b>' + button.getText() + '</b>');
 
   }
 
  });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s