Эксперт
Профиль
Группа: Завсегдатай
Сообщений: 1100
Регистрация: 27.9.2006
Репутация: нет
Всего: 12
|
У меня вопрос, как заменять блоки в layout, например у меня есть правая колонка с кнопками и левая , рабочая область. Как изменять содержимое левой, рабочей области, например по нажатию на одну из кнопок подгружать и работать с Grid, для другой размещать в левом поле Panel с различными элементами например, как мне вместо grid вгрузить произвольный Ext.Panel(... ? | Код |
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: 'Accordion Item 1',
html: '<empty panel>',
cls:'empty'
});
var item2 = new Ext.Panel({
title: 'Accordion Item 2',
html: '<empty panel>',
cls:'empty'
});
var item3 = new Ext.Panel({
title: 'Accordion Item 3',
html: '<empty panel>',
cls:'empty'
});
var item4 = new Ext.Panel({
title: 'Accordion Item 4',
html: '<empty panel>',
cls:'empty'
});
var item5 = new Ext.Panel({
title: 'Accordion Item 5',
html: '<empty panel>',
cls:'empty'
});
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3, item4, item5]
});
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort('lastpost', 'desc');
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
var grid = new Ext.grid.GridPanel({
//width:700,
//height:500,
// margins:'0 5 5 0',
//title:'ExtJS.com - Browse Forums',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
// grid columns
columns:[
{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: 'author',
width: 100,
// hidden: true,
sortable: true
},{
header: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true
}],
// customize view config
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
layout:'fit',
items:[grid]
}]
});
store.load({params:{start:0, limit:25}});
});
|
--------------------
Пусть популярную музыку слушают те, среди кого она популярна |
extjs замена блоков в layout 
(голосов:1)
Загрузка ...
