var treePanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        title: 'Навигация',
        region:'north',
        split: true,
        height: 360,
        minSize: 150,
        rootVisible: false,
        autoScroll: true,
        store: store,
		listeners: {
		itemclick : function(view,rec,item,index,eventObj) {
		

    if(rec.get('id')=='computers') {
		    		
			var regionCenter = vp.getLayout().centerRegion;
			
			regionCenter.removeAll();
			regionCenter.add(grid)
    }

regionCenter.add(
	Ext.create('Ext.panel.Panel', {
    title: 'Компьютеры',
    width: 600,
    height: 500,
    layout: {
        type: 'vbox',       // Arrange child items vertically
        align: 'stretch',    // Each takes up full width
        padding: 5
    },
    items: [{               // Results grid specified as a config object with an xtype of 'grid'
        xtype: 'grid',
        columns: gc,            // One header just for show. There's no data,
        store: store, // A dummy empty data store
        flex: 1,                                       // Use 1/3 of Container's height (hint to Box layout)
		bbar: new Ext.PagingToolbar({   // bbar - нижний тулбар с листалкой
            store: store,               // указано хранилище
            displayInfo: true,          // вывести инфо обо общем числе записей
            displayMsg: 'Показано  {0} - {1} из {2}' // формат инфо
        }),
		
		tbar: [  // верхний тулбар с кнопками удаления и вставки
          {
            text: 'Ins',
            handler: function(){
                // при вставке создается пустая запись в  в хранилище.
                store.insert(0, new User());
                // переход к редактированию новой строки
                Editing.startEdit(0, 0);
            }
        },

          {
            itemId: 'delete', // id кнопки, потом пригодится
            text: 'Del',
            handler: function(){
                // определяем какая строка выделена
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                // удаление строки из хранилища
                if (selection) {store.remove(selection);}
            }
        },
        {
			text: 'Save',
			handler: function(){    // обработчик события нажатия кнопки
            grid.store.sync(); // синхронизация
          }
		  },
		
      ],
		
		selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2
        })
    ]
	//end grid

regionCenter.add(
	var grid = Ext.create('Ext.panel.Panel', {

{ dataIndex: 'department', header: 'Department' , editor: {
                xtype: 'combobox',
                store: storecombo,
                displayField: 'department',
                valueField: 'id'
            },
            renderer: function(val){
                index = storecombo.findExact('id',val); 
                if (index != -1){
                    rs = storecombo.getAt(index).data; 
                    return rs.display; 
                }
            }}

<?php
require 'connect.php';

    $result=mysql_query ("SELECT * FROM pc") or die (mysql_error ());    
    
    $data = array();
    
    while ($row=mysql_fetch_object($result))
    {
        $data [] = $row;
    }
	echo json_encode($data);

?>

var store = Ext.create('Ext.data.JsonStore', {
    pageSize: 25,
    model: 'pc',
    
	autoLoad: false,
    autoSync: false,
	
    proxy: {
        type: 'ajax',
        api:{
            create:'php/create.php',
            read:'php/get.php',
            update:'php/upd.php',
            destroy:'php/del.php'
            },
    reader: {
        type: 'json',
		root: 'data'
		}
                
            }

});
...

...
columns: gc,           
store: store, 
features: [filtersCfg],
emptyText: 'No Matching Records',
selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2
        })
    ]
...

var filtersCfg = {
    ftype: 'filters',
	encode: true,
    autoReload: false, //don't reload automatically
    local: true, //only filter locally
    // filters may be configured through the plugin,
    // or in the column definition within the headers configuration
    filters: [{
        type: 'numeric',
        dataIndex: 'id'
    }, {
        type: 'string',
        dataIndex: 'name'
    }, {
        type: 'numeric',
        dataIndex: 'cost'
    }, {
        type: 'string',
        dataIndex: 'department'
    }]
};

	{ dataIndex: 'local', header: 'ЛВС' , width: 50, editor: {
                xtype: 'combobox',
                store: storeAnswers,
                displayField: 'answer',
                valueField: 'id'
            },
     renderer:function(value, metaData, record, rowIndex, colIndex, store, view) {
     var rec;
     return (rec=storeAnswers.getById(value)) ? rec.get("answer") : "!storeAnswers.getById(value)";
}},
	{ dataIndex: 'comments', header: 'Comments' , width: 180, editor: 'textfield' , renderer: function (value, meta, record) {
                    var max = 15;
                    meta.tdAttr = 'data-qtip="' + value + '"';
                    return value.length < max ? value : value.substring(0, max - 3) + '...';
                }}