extjs 4 mvc, разбираемся с model & store
 

Если я в чем-либо ошибаюсь, поправьте меня, плз.

Задача: CRUD-админка для таблички клиентов.

Серверная часть:
Django, django-piston, REST


/api/clients - тут можно GET POST PUT DELETE
/api/clientslist - тут можно GET (в отличие от GET /api/clients тут не весь набор полей, а только id и имя клиента, это сделано для ускорения загрузки)

Что я хочу в ExtJS 4? Чтобы у меня был список клиентов, при нажатии открывалась информация о клиенте. Также кнопки создать/редактировать/удалить, открывающие соответствующие формы...

И ещё будет 1 большой отчет по клиентам со списком всех полей...

Мой вопрос в следующем - как лучше всего всё это организовать в модели и хранилища?

1. Мне нужна одна или две модели? Полагаю, что одна (просто клиенты, а не клиенты (все поля таблицы) и список клиентов ( с полями client_id, text=client_name, leaf=true)
2. Мне нужно TreeStore для списка клиентов и Store для отчёта
3. Какие Proxy использовать?
- основной это REST, url /api/clients
- для дерева (списка) клиентов ajax, api read: /api/clientslist
оно не может быть POST, PUT, DELETE
4. куда мне прописывать прокси?
- основной прямо на модель клиента
- в хранилище клиента ничего не прописывать
- в хранилище дерева (списка) клиентов переопределить дефолтный Proxy ajax, api read: /api/clientslist
5. как мне сохранять нового клиента? мне работать с моделью или с хранилищем? полагаю, что с моделью...

что я бы хотел: чтобы я добавил клиента через модель, далее произошел POST на /api/clients и обновилось основное хранилище, далее хранилище для дерева прочитало бы /api/clientslist и обновило себя (POST на /api/clientslist не поддерживается, оно должно просто синхронизироваться с /api/clientslist)

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

Вообщем, чтобы было понятнее:

модель

Ext.define('GksksAisk.model.Client', {
    extend: 'Ext.data.Model',
    idProperty: 'clientId',
    fields: [
        { name: 'clientId',                 mapping: 'client_id',                   type: 'int',        disabled: false,         submitValue: false },
        { name: 'clientName',               mapping: 'client_name',                 type: 'string' },
        { name: 'clientChairman',           mapping: 'client_chairman',             type: 'string' },
        { name: 'clientChiefAccountant',    mapping: 'client_chief_accountant',     type: 'string' },
        { name: 'clientContractNumber',     mapping: 'client_contract_number',      type: 'string' },
        { name: 'clientContractIndex',      mapping: 'client_contract_index',       type: 'string' },
        { name: 'clientContractDate',       mapping: 'client_contract_date',        type: 'date',       dateFormat: 'd.m.Y'},
        { name: 'clientContact',            mapping: 'client_contact',              type: 'string' },
        { name: 'clientCommission',         mapping: 'client_commission',           type: 'float' },
        { name: 'clientDebt',               mapping: 'client_debt',                 type: 'float' },
        { name: 'clientComments',           mapping: 'client_comments',             type: 'string' },
        { name: 'clientManager',            mapping: 'client_manager',              type: 'string' },
        {
            name: 'text',
            convert: function(value, record) {
                return record.get('clientName');
            }
        },
        { name: 'leaf',                                                             type: 'bool',       defaultValue: true }
    ],

    validations: [
        { type: 'presence',  field: 'clientName' },
        { type: 'presence',  field: 'clientChairman' },
        { type: 'presence',  field: 'clientChiefAccountant' },
        { type: 'presence',  field: 'clientContractNumber' },
        { type: 'presence',  field: 'clientContractIndex' },
        { type: 'presence',  field: 'clientContractDate' },
        { type: 'presence',  field: 'clientContact' },
        { type: 'presence',  field: 'clientCommission' },
        { type: 'presence',  field: 'clientDebt' }
    ],

    proxy: {
        type: 'rest',
        url: '/api/clients',
        api: {
            read: '/api/clients',
            create  : '/api/clients',
            update  : '/api/clients',
            destroy : '/api/clients'
        },
        reader: {
            type: 'json',
            root: 'children',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            writeAllFields: false
        }
    }
});

хранилища:

Ext.define('GksksAisk.store.Clients', {
    extend: 'Ext.data.Store',
    model: 'GksksAisk.model.Client',

    autoLoad: true,
    autoSync: true,

    sorters: ['clientName']

});

и

Ext.define('GksksAisk.store.ClientsList', {
    extend: 'Ext.data.TreeStore',
    model: 'GksksAisk.model.Client',

    proxy: {
        type: 'ajax',
        url: '/api/clientslist',
        api: {
            read: '/api/clientslist'
        },
        reader: {
            type: 'json',
            root: 'children',
            successProperty: 'success'
        }
    },

    autoLoad: true,
    autoSync: true,

    sorters: ['text']
});

контроллер:

Ext.define('GksksAisk.controller.Clients', {
    extend: 'Ext.app.Controller',

    stores: [
        'Clients',
        'ClientsList'
    ],

    models: [
        'Client'
    ],

    views: [
        'client.Complex',
        'client.List',
        'client.Show',
        'client.Add',
        'client.Edit'
    ],
    
    init: function() {
        var me = this;

        me.control({
            'clientadd button[action=create]': {
       		    click: me.onCreateClientClick
           	},
...
        });

        Client = me.getClientModel();
        ClientsList = me.getClientsListStore();
    },


    onCreateClientClick: function(view, records) {
        var me = this;
        var win = Ext.getCmp("clientadd"),
            form = win.down('form'),
            formpanel = form.getForm();
            formpanelvalues = formpanel.getValues();
        if (!formpanel.isValid()) {
            Ext.Msg.alert('Ошибка при заполнении формы', 'Пожалуйста, исправьте ошибку и отправьте форму снова.')
        } else {
            form.setLoading({
                msg: 'Пожалуйста, подождите...'
            });

            var newclient = Ext.create('Client', formpanelvalues);
            newclient.save({
                success: function(newclient) {
                    form.setLoading(false);
                    console.log("Saved Client! His ID is " + newclient.getId());
                    ClientsList.sync();
                    console.log(ClientsList); // тут нет моего добавленного клиента!
                    win.close();
                },
                failure: function(newclient) {
                    form.setLoading(false);
                    Ext.Msg.alert('Failed');
                }
            });


        }
    },
...

});

То есть я прошу подсказать, правильно ли я решаю задачу добавления нового клиента? И если всё верно, почему не обновляется ClientsList? (я не вижу в списке клиентов вновь добавленного после закрытия окна формы)