[zmaxon]

не выходит ничего ((

мне ещё наверное что-то с xtype: 'panel' сделать надо, см.рис



вместо 2222 - гридпанел
хочется так, при изменении south панели всё изменялось подстать





намучался с разными параметрами... могу привести исходный код

<script>
Ext.BLANK_IMAGE_URL = '/js/ext3/resources/images/default/s.gif';
   
Ext.onReady(function(){

    var tabs = new Ext.TabPanel({
        renderTo: 'tabs',
        resizeTabs: true,
        minTabWidth: 115,
        tabWidth: '100%',
        enableTabScroll: true,
        width: '100%',
        height: 570,
        
        plain: true,
        defaults: { autoScroll: true }
    });
    
    function firstTab() {
        var tab = tabs.add({
            title: 'one',
            bodyStyle: 'padding: 5px;',
            html: 'one'
        });       
        tab.show();
    }
    
    
var visitPagesFunc = function(sm,index,record,id) {
    if(id)
        var visitId = id;
    else
        var visitId = record.id;
    //Ext.Msg.alert('You Selected', visitId);
    
    document.getElementById('detailPanel').innerHTML = '';
    //t.innerHTML = '';

    var visits2 = new Ext.data.JsonStore({
        url: 'grid-row-expander2.php?id='+visitId,
        root: 'movies',
        idProperty: 'id',
        totalProperty: 'totalCount',
        fields: ['id', 'title', 'category'],
        remoteSort: true
    });
    
    var grid2 = new Ext.grid.GridPanel({
        store: visits2,
        columns: [
                {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
                { id: 'title-col',
                    header: "Title",
                    width: 180,
                    dataIndex: 'title',
                    sortable: true
                    
                },
                { header: "Category", width: 65, dataIndex: 'category', sortable: true }
            ],
        autoExpandColumn: 'title-col',
        renderTo: 'detailPanel',
        autoWidth: true,
        autoHeight: true,
        autoScroll: true,
        bodyBorder: false,
        loadMask: true,
        columnLines: true
    });

    visits2.load({ params: { start: 0, limit: 15} });
}
    

    var visits2 = new Ext.data.JsonStore({
        url: 'grid-row-expander2.php?id=18',
        root: 'movies',
        idProperty: 'id',
        totalProperty: 'totalCount',
        fields: ['id', 'title', 'category'],
        remoteSort: true
    });
    
    var grid2 = new Ext.grid.GridPanel({
        store: visits2,
        columns: [
                {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
                { id: 'title-col',
                    header: "Title",
                    width: 180,
                    dataIndex: 'title',
                    sortable: true
                    
                },
                { header: "Category", width: 65, dataIndex: 'category', sortable: true }
            ],
        autoExpandColumn: 'title-col',
        bodyBorder: false,
        //autoWidth: true,
        //autoHeight: true,
        autoScroll: true,
        loadMask: true,
        columnLines: true
    });

    visits2.load({ params: { start: 0, limit: 15} });
    
    
    ////
    
    var visits = new Ext.data.JsonStore({
    url: 'grid-row-expander.php',
    root: 'movies',
    idProperty: 'id',
    totalProperty: 'totalCount',
    fields: ['id', 'title', 'category', 'rating', 'actors',
    { name: 'length', type: 'int' },
    { name: 'price', type: 'float' }],
    remoteSort: true
});
visits.setDefaultSort('title', 'asc');

var rowExpander = new Ext.grid.RowExpander({
    tpl: new Ext.Template(
        '<div class="row-preview "><img src="img/star_yellow.png" align="left" style="padding-right:5px;"/><p>{actors}</p></div>'
    )
}); 

    var grid = new Ext.grid.GridPanel({
        store: visits,
        
        bodyBorder: false,
        columns: [
                rowExpander,
                {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
                { id: 'title-col',
                    header: "Title",
                    width: 180,
                    dataIndex: 'title',
                    sortable: true
                    
                },
                { header: "Category", width: 65, dataIndex: 'category', sortable: true },
                { header: "Rating",
                    width: 65,
                    dataIndex: 'rating',
                    sortable: true
                },
                { header: "Length",
                    width: 65,
                    dataIndex: 'length',
                    sortable: true,
                    align: 'right',
                    renderer : function(v){
                        return v + ' min';
                    } 
                },
                { header: "Price",
                    width: 65,
                    dataIndex: 'price',
                    sortable: true,
                    align: 'right',
                    renderer: Ext.util.Format.usMoney
                }
            ],
        autoExpandColumn: 'title-col',
       // renderTo: 'grid',
        width: '100%',
      //  autoHeight: true,
        height: 327,
        bodyBorder: false,
        //autoScroll: true,
        loadMask: true,
        columnLines: true,
        plugins: rowExpander,
        sm: new Ext.grid.RowSelectionModel({ 
            singleSelect: false,
            listeners: {
                     rowselect: visitPagesFunc
                   }
        })
    });

    visits.load({ params: { start: 0, limit: 15} });
    

    //////
    
    
    function addrTab() {
        var tab = tabs.add({
            title: 'two',
            layout: 'border',
            border: false,
            closable: true,        
            items: [{
                 region: 'west',
                 title: 'left',
                 iconCls: 'icon-filter',
                 collapsible: true,
                 xtype: 'panel',
                 split: true,
                 width: 220,
                 html: 'left'
              },{
                  region: 'center',
                  xtype: 'panel',
                  
                  autoScroll: true,
                  items: [{
                     region: 'north',
                     xtype: 'panel',
                     bodyBorder: false,                     
                     html: '1111'
                  },{
                     region: 'center',
                     xtype: 'panel',
                    
                    // bodyBorder: false,
                     
                     autoScroll: true,
                     
                    // items: [grid]
                    html: '2222'
                  },{
                     region: 'south',
                     xtype: 'panel',
                     html: '3333'
                     /*    
                     bodyBorder: false,                         
                     bbar: new Ext.PagingToolbar({
                        pageSize: 15,
                        store: visits,
                        displayInfo: true,
                        style: 'border: 0',
                        displayMsg: 'Displaying movies {0} - {1} of {2}',
                        emptyMsg: "No movies found"
                     })
                     */
                  }]
                      
              },{
                 region: 'south',
                 autoScroll: true,
                 id: 'detailPanel',
                 xtype: 'panel',
                // autoHeight: true,
                 height: 150,
                
                 split: true,
                 bodyStyle: {
                        background: '#ffffff',
                        padding: '10px'
                    },
                items: [grid2]
              }]
        });       
        tab.show();
    }
    
    // Create some tabs.
    firstTab();
    addrTab();
    visitPagesFunc('','','','19');

});
  
   </script>
</head>
<body>
<div id="tabs" style="margin-top: 5px;"></div>
</body>