grid in grid in window
 

Здравствуйте. Пишу MVC приложение.

Есть два класса grid:

Grid1 с кнопкой "добавить телефоны":

Ext.define('AM.view.Grid1' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.employeeList',
    title: 'Сотруднички',
    store: 'Employees',
    columns: [
        {header: 'Имя',
           dataIndex: 'name',
           flex: 1}
],
    bbar: [
        {text: 'Добавить телефоны',
        action: 'add'}
         ]
})

Grid2:

Ext.define('AM.view.Grid2' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.phoneList',
    title: 'Телефоны',
     store: 'Phones',
    columns: [
        {header: 'Телефон',
            dataIndex: 'phones',
            flex: 1}
    ]
})

Grid1 отображается с запуска приложения.
app.js:

Ext.application({
    name: 'AM',

    appFolder: 'app',

    controllers: [
        'Employees'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'employeeList'
            }
        });
    }
});

По нажатию на кнопку в grid1 "добавить телефоны" , вызывается окно с grid2:

Ext.define('AM.view.EmployeeWindowAdd', {
    extend: 'Ext.window.Window',
    alias : 'widget.employeeAdd',
    title : 'Добавить телефоны',
    layout: 'column',

    items: [{
        xtype: 'phoneList',
    }],

:help: Вот тут и проблема. Окно (EmployeeWindowAdd) делается продолжением панели grid1, т.е к панели gri1 прикрепляется еше панелька окна(EmployeeWindowAdd). Если например убрать

items: [{
        xtype: 'phoneList',
    }],

, то окно будет открывается как надо, т.е поверх grid1. .:help:

Я думаю это из-за того что мы делаем и в грид1 и в грид2 extend: 'Ext.grid.Panel', т.е расширяем одну и ту же стандартную панель? Если да, то подскажите пожалуйста как сделать правильно.

Вот контроллер:

Ext.define('AM.controller.Employees', {
    extend: 'Ext.app.Controller',

     views: [
         'Grid1',
         'Grid2',
         'EmployeeWindowAdd',
     ],
    stores: ['Employees', 'Phones'],
    models: ['Employee', 'Phone'],


    init: function(){
        this.control({
            'employeeList button[action=add]': {
                click: this.editPersonAddClick
            }


        })
    },

    editPersonAddClick : function(){
      var view = Ext.widget('employeeAdd');
    },       
})

kolikolikoli попробуй так

Ext.define( 'AM.view.EmployeeWindowAdd', {
            extend: 'Ext.window.Window',
            alias : 'widget.employeeAdd',
            title : 'Добавить телефоны',

            //----------
            height: 200,
            width: 400,
            layout: 'fit',
            //----------

            items: {  
                xtype: 'phoneList'
            }
        });

Вот ссылка на живой пример