例子 ：將一個grid新增到一個panel中去
panel

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myPanel',//與controller中ref的selector關聯
    height: 250,
    id: 'panel',
    width: 400,
    layout: 'fit',
    title: 'My Panel',
    initComponent: function() {
        var me = this;
        me.callParent(arguments
 
);
    }
});

grid

Ext.define('MyApp.view.mygrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',//與controller中ref的selector關聯
    requires: [
        'Ext.grid.column.Number',
        'Ext.grid.column.Date',
        'Ext.grid.column.Boolean',
        'Ext.grid.View'
    ],
    height: 250
 
,
    id: 'grid',
    width: 400,
    title: 'My Grid Panel',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'String'
                },
                {
                    xtype: 'numbercolumn'
 
,
                    dataIndex: 'number',
                    text: 'Number'
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'date',
                    text: 'Date'
                },
                {
                    xtype: 'booleancolumn',
                    dataIndex: 'bool',
                    text: 'Boolean'
                }
            ]
        });
        me.callParent(arguments);
    }
});

controller

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    views: [
        'mygrid',
        'MyPanel'
    ],
    refs: [
        {
            autoCreate: true,//必須自動建立物件，因為程式啟動時只建立了主view（myPanel），這是在app.js中定義了的
            ref: 'grid',//引用名隨意起，但是在生成get方法後首字母強制大寫，如：getGrid（）
            selector: 'myGrid',//必須與alias中widget.後的部分字元相同
            xtype: 'myGrid'//必須與alias中widget.後的部分字元相同，autoCreate必須宣告xtype
        },
        {
            ref: 'myPanel',//主view
            selector: 'myPanel'
        }
    ],
    onLaunch: function() {
        var panel = this.getMyPanel();//controller根據ref生成的get方法，注意get後的首字母強制大寫。
        panel.removeAll(true);//刪 最好先刪再定義grid 如果在按鈕事件中，這樣重複點選按鈕不會出現addcls為null錯誤，大概是刪的時候會清除css樣式，如果這個時候已經有grid物件，則樣式會丟失
        var grid = this.getGrid();//controller根據ref生成的get方法，注意get後的首字母強制大寫。
        panel.add(grid);//添
        panel.doLayout();//重新整理
    }
});