Ext.define('MyApp.view.ui.MyPanel', { // тут на сомом деле должен быть указан путь к этому файлу имяПроекта.имяПапкиШаблонов.имяРодительскогоКонтроллера.имяФайлаШаблона
    extend: 'Ext.panel.Panel', // от кого унаследован объект

    height: 250, // "высь"
    width: 400, // "ширь"
    title: 'My Panel', // Название панели

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [ // Дочерние объекты панели
                {
                    xtype: 'button', // тип дочернего элемента (кнопки)
                    text: 'MyButton' // имя дочерней кнопки
                }
            ]
        });

        me.callParent(arguments);
    }
});

Следовательно нам надо поменять под себя первую строчку с:

Ext.define('MyApp.view.ui.MyPanel', {

на:

Ext.define('Example.view.testController.View', {

и добавить alias

alias: 'widget.myTestObj',

alias дает нам возможность создавать аналогичные объекты просто задав

...
xtype: 'myTestObj'
...

И вызывать этот шаблон из конструктора проекта, как шаблон по умолчанию (см. выше)

Теперь надо к кнопке прикрутить event показывающий Alert

Сначала надо как-то идентифицировать кнопку, для этого достаточно задать ей id

...
{
xtype: 'button',
text: 'MyButton',
id: 'testButton'
}
...

Можно было это сделать в ExtDesigner‘е, но я протупил 😉

Вы кстати еще не закрыли ExtDesigner? Нет? Смело закрывайте!

Дело в том что он нужен только для того чтобы быстро рисовать компоненты, на этом его функциональность заканчивается, однако от этого он не перестает быть полезным!

Теперь возвращаемся в файл контроллера и пишем код (после объявления списка шаблонов)

init: function() { // в конструкторе
this.control({ // "Привязываем" события
'button[id=testButton]': { // кнопке с id=testButton
click: this.testButtonAction // по клику выполнить функцию testButtonAction
}
});
}

Не забыв свойства объекта разделить запятыми!

Теперь все в том же контроллере надо создать функцию testButtonAction

testButtonAction: function(button) { // параметры при клике на "батон" "click( Ext.button.Button this, Event e, Object eOpts )". Посмотреть подробнее можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-event-click
Ext.MessageBox.alert('Test alert title', 'Test alert text');
// У алерта на самом деле гораздо больше параметров, посмотреть можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.MessageBox-method-alert
}

Опять не забыв про запятые!

В итоге должно получится так:

Ext.define('Example.controller.testController', { // Объявление контроллера где последовательность такова "имяПроекта.имяПапкиКонтроллеровВПапкеПроекта.имяФайлаКонтроллера"
extend: 'Ext.app.Controller', // Наследуем свой контроллер от стандартного экстового контроллера

views: [ // Список шаблонов контроллера
'testController.View'
],

init: function() {
this.control({ // "Привязываем" события
'button[id=testButton]': { // кнопке с id=testButton
click: this.testButtonAction // по клику выполнить функцию testButtonAction
}
});
},

testButtonAction: function(button) { // параметры при клике на ботон "click( Ext.button.Button this, Event e, Object eOpts )". Посмотреть подробнее можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-event-click
Ext.MessageBox.alert('Test alert title', 'Test alert text');
// У алерта на самом деле гораздо больше пораметров, посмотреть можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.MessageBox-method-alert
}
});

Теперь открываем в браузере проект (в моем случае это http://localhost/ext-example/ )

И получаем:

Нажимаем на кнополку и получаем:

Если не получилось, то вот мои сорцы:

ext-example

Прошу не судить строго, т.к. данный framework я изучал (почти) самостоятельно долго рОясь в Google, и чего-то мог не понять, или понять не до конца, или понять, но неправильно…