...
renderTo: Ext.get("divID")
...

    Ext.create('Ext.Viewport', {
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [{
            xtype: 'box',
            id: 'header',
            region: 'north',
            html: '<h1>Учет компьютерной техники_</h1>',
            height: 40
        },{
            layout: 'border',
            id: 'layout-browser',
            region:'west',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 275,
            minSize: 100,
            maxSize: 500,
            items: [treePanel, detailsPanel]
        }, 
            contentPanel
        ],
        renderTo: Ext.getBody()
    });
 
var grid = Ext.create('Ext.grid.Panel', {
	title: 'Учет компьтерной техники',
    width: 800,
    columns: gc,

	
  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
        })
    ],
	
    renderTo: Ext.get("computers-details"),
    store: store
}); 

    var layoutExamples = [];
    Ext.Object.each(getBasicLayouts(), function(name, example) {
        layoutExamples.push(example);
    });
    
	
	    var contentPanel = {
         id: 'content-panel',
         region: 'center', // this is what makes this panel into a region within the containing layout
         layout: 'card',
         margins: '2 5 5 0',
         activeItem: 0,
         border: false,
         items: layoutExamples
    };

        computers: {
            id: 'computers-panel',
            title: 'Компьютерная техника',
            layout: 'fit',
            bodyStyle: 'padding:25px',
            contentEl: 'computers-details',  // pull existing content from the page
			},

smthPanel=vp.getLayout().centerRegion.down("panel");
smthPanel.removeAll(); // по необходимости
smthPanel.add(smthItem);

children: [{
    text:'Компьютерная техника',
    expanded: true,
    children:[{
        text:'Компьютеры',
        id:'computers2',
        leaf:true,
		listeners:{
		click: function(){
     		var
			regionCenter = vp.getLayout().centerRegion.down("panel");

			regionCenter.removeAll();
			regionCenter.add(grid)
   }
}
    },{
        text:'Принтеры',
        id:'printers',
        leaf:true
    }]

    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) + '...';
                }}