Ext JS 4 - Как отобразить другие виды внутри вида? - PullRequest
Новая
       24

Ext JS 4 - Как отобразить другие виды внутри вида?

0 голосов
/ 29 ноября 2011

В приложении Ext JS 4 в стиле MVC, при условии, что у меня есть один контроллер / представление / магазин / модель, и он загружается должным образом - для примера, скажем, этот пример - моя база кода.

Мое приложение загружает представление с сеткой (список пользователей), затем при щелчке строки оно открывает и редактирует (пользовательское) представление с помощью формы.

Теперь я хочу добавитьдополнительные виды будут отображаться внутри этой формы.

Например, я хочу показать «последние 10 входов в систему» ​​(список записей действий для пользователя) под полями в форме пользователя.У меня будет отдельный вид / контроллер / модель / магазин для «ActivityLog».Поэтому мне нужно создать представление / контроллер ActivityLog List и поместить его в мое представление User (оно также будет иметь собственный код / ​​логику для обработки кликов по этим записям в своей сетке и т. Д.).

Этоправильный подход?

Будет ли пользовательский контроллер загружать представление / контроллер ActivityLog и каким-то образом помещать его в представление редактирования пользователя, или у меня есть данные конфигурации непосредственно в представлении редактирования пользователя, которое загружает его?

Ответы [ 2 ]

1 голос
/ 01 декабря 2011

Хорошо. Возможно, вы можете использовать что-то вроде этого

// Контроллер навигации 

    Ext.define('App.controller.Navigation', {
        extend: 'Ext.app.Controller',
        models: [],
        stores: [],
        views: ['navigation.TabHost'],
        init: function() {
             this.control({
                'tabhost': {
                    'render': function(tabHost) {
                       // Grid panels are panels too. So It does not make any sense to use additional container.
                       tabHost.add(Ext.create('App.view.users.List'));
                       tabHost.add(Ext.create('App.view.activitylogs.List'));
                    }
                }
        }
});

// Пользовательский контроллер 

Ext.define('App.controller.Users', {
    extend: 'Ext.app.Controller',
    models: [],
    stores: [],
    views: ['users.List'],
    init: function() {
         this.control({
            'userslist': {
                'render': function(gridPanel) {
                   console.info('Im here');
                }
            }
    }
});

// контроллер ActivityLog 

Ext.define('App.controller.ActivityLog', {
        extend: 'Ext.app.Controller',
        models: [],
        stores: [],
        views: ['activitylogs.List'],
        init: function() {
             this.control({
                'loglist': {
                    'render': function(gridPanel) {
                       console.info('Im here');
                    }
                }
        }
    });

// Также у вас должны быть файлы в виде дерева

// navigation.TabHost 

Ext.define('App.view.navigation.TabHost', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.tabhost',
    initComponent: function() {
      // ......
    }
});

// users.List 

 Ext.define('App.view.users.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.userslist',
        initComponent: function() {
          // ......
        }
    });

// activitylog.List 

Ext.define('App.view.activitylogs.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.logslist',
    initComponent: function() {
      // ......
    }
});

Контроллер навигации создаст виджеты и вставит их в свой хост.

Но ActivityLog и Users Controllers будут манипулировать своими представлениями.

0 голосов
/ 01 декабря 2011

Будет ли пользовательский контроллер загружать представление / контроллер

Да, вы можете сделать это.

Пользовательский контроллер может использовать вид с другого контроллера. В другом случае контроллер может прослушивать просмотр, который был добавлен в другой контроллер.

Прежде всего вам нужно зарегистрировать контроллеры в app.js 

Ext.application({

    name: 'App',

    autoCreateViewport: true,

    appFolder: 'js/App',



    controllers: [

        'User',
        'ActivityLog'
    ],



    launch: function() {



    }

});

После этого все виды / магазины / модели, которые были описаны в файлах контроллеров, будут загружены автоматически.

У вас будет возможность манипулировать (добавлять / удалять) представлениями в любом месте. Но контроллеры будут прислушиваться к мнениям, которые вы определенно указали.

...