ExtJs template

Base.js

// КОНТРОЛЛЕР

Ext.define('C300.controller.Base', {
    extend: 'Ext.app.Controller',

    stores:[
        'C300.store.streetStore'
    ],

    views: [
        'Viewport'
        ,'Left'
        ,'CenterBase'
        ,'Header'
        ,'Footer'
        ,'C300.view.tabs.TabStreetGrid'
        //,'C300.view.items.ItemWorkers'
        /*,'items.ItemOrganization'
        ,'items.ItemServices'*/
    ],
    refs: [
        {
            ref: 'itemWorkers',
            selector: '#itemWorkers'
        },{
            ref: 'itemOrganization',
            selector: '#itemOrganization'
        },{
            ref: 'itemServices',
            selector: '#itemServices'
        },{
            ref: 'itemAddress',
            selector: '#itemAddress'
        },{
            ref: 'centerBase',
            selector: '#centerBase'
        }
    ],

    init: function() {
        console.log('controller activated');
        this.control({
            'button': {
                //click: function() {console.log('Tab click')}
            },
            '#itemAddress':{
                itemclick:function(view,rec,item,index,eventObj){
                    //console.log(rec.raw.name);
                    this.onElementClick(rec.raw.name, rec.data.text);
                }
            },
            '#itemWorkers':{
                itemclick:function(view,rec,item,index,eventObj){
                    this.onElementClick(rec.data.id, rec.data.text);
                }
            },
            '#itemOrganization':{
                itemclick:function(view,rec,item,index,eventObj){
                    this.onElementClick(rec.data.id, rec.data.text);
                }
            },
            '#itemServices':{
                itemclick:function(view,rec,item,index,eventObj){
                    this.onElementClick(rec.data.id, rec.data.text);
                }
            }

        });

    },


    /**
     * Открытие \ активация + загрузка таба в центральной области
     *
     * @param id
     * @param title
     */
    onElementClick: function(id, title) {
        console.log('вызвали ' +id+ ' | ' +title);

        var t = this.getCenterBase(); // находим панель вкладок
        var g = t.items.findIndex('title', title); // ищем вкладку по названию

        //var a = t.getActiveTab();
        //var idx = t.items.indexOf(a);

        if (g >= 0){
            console.log('tab id ' +g+ ' | "' +title+ '" set Active')
        } else {
            console.log('tab id ' +g+ ' | "' +title+ '" Created')
            // создаём вкладку с контентом
            t.add({
                title : title
                ,items :[
                    Ext.create('C300.view.tabs.Tab'+id)
                ]
                //,html : 'i am tab '
                ,closable : true
            });
        }

        // для немедленной активации вкладки
        var current = t.items.findIndex('title', title);
        t.setActiveTab(current);

    }
});

Street.js

// МОДЕЛЬ
Ext.define('C300.model.Street', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int', useNull: true},
        {name: 'name'}
    ]
});

streetStore.js

// ХРАНИЛИЩЕ

Ext.define('C300.store.streetStore', {
    extend: 'Ext.data.Store',
    storeId: 'streetStore',

    autoLoad: true,
    autoSync: true, // указание на автосохранения при каждом изменении одно записи

    pageSize: 10,                 // количество записей

    requires  : [
        'C300.model.Street'
        ,'Ext.data.proxy.Ajax'
    ],
    model: 'C300.model.Street',

    proxy: {
        type: 'ajax',
        url: 'manager/testapi/',


        reader: {
            type: 'json'
            ,root: 'data'
        }
    }


});

TabStreetGrid.js

// Компонент с гридом

Ext.define('C300.view.tabs.TabStreetGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.centerBase',
    itemId: 'centerBase',
    requires:[],

    store: Ext.getStore('C300.store.streetStore'),

    initComponent: function() {
        Ext.applyIf(this, {
            title:'fdfsfsdf',
            columns: [
                {text: 'название', sortable : false, dataIndex: 'name'}
            ]

});
        this.callParent(arguments);
    }
});

urls.py

# -*- coding: utf-8 -*-
from django.conf.urls import url, patterns

urlpatterns = patterns('c300.manager.views',
    url(r'^$', 'index', name='manager_base'),
    url(r'testapi/(?P<type>.*)$', 'testapi', name='testapi'),
)

views.py

# -*- coding: utf-8 -*-
from django.views.generic.simple import direct_to_template
from django.http import HttpResponse
from django.utils import simplejson
from django.core import serializers

from models import TestModel

def index(request):
    return direct_to_template(request, 'manager/manager-base.html')

def testapi(request, type):
    q = TestModel.objects.all()
    q_count = q.count()

    q_array = []
    for i in q:
        q_array.append({'id': i.pk ,'name': i.name})
    data = simplejson.dumps(q_array)
    req = {
        'success' : True,
        'data': q_array,
        'total' : q_count
    }
    response = simplejson.dumps(req)
    return HttpResponse(response, mimetype="application/json")