не выходит ничего :(((
мне ещё наверное что-то с 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>
