看示例得知:左边为导航栏,右侧为内容栏,
看这代码后有这样的一个想法,可不可以点击左侧的链接或者按钮右侧显示页面呢.
JS源示例如下:var viewport = new Ext.Viewport({
layout:'fit',
items:[{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Tickets',
layout: 'fit',
iconCls: 'x-icon-tickets',
tabTip: 'Tickets tabtip',
style: 'padding: 10px;',
items: [new SampleGrid([0,1,2,3,4])]
},
{
xtype: 'portal',
title: 'Dashboard',
tabTip: 'Dashboard tabtip',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: 'Subscriptions',
iconCls: 'x-icon-subscriptions',
tabTip: 'Subscriptions tabtip',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 1,
items: [{
title: 'Nested Tabs',
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: 'Users',
iconCls: 'x-icon-users',
tabTip: 'Users tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}, {
expanded: true,
items: [{
title: 'Configuration',
iconCls: 'x-icon-configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}, {
title: 'Email Templates',
iconCls: 'x-icon-templates',
tabTip: 'Templates tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
这里的html属性指的是右侧页中的内容
按照我的想法我想问一下EXTJS高手们,应该如何更改
我想改成.点击左侧的链接后,右面内容页显示 例如http://www.baidu.com这个网址的内容.请教大家应该如何更改.
默认的html是文本或者EXT的对象.
看这代码后有这样的一个想法,可不可以点击左侧的链接或者按钮右侧显示页面呢.
JS源示例如下:var viewport = new Ext.Viewport({
layout:'fit',
items:[{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Tickets',
layout: 'fit',
iconCls: 'x-icon-tickets',
tabTip: 'Tickets tabtip',
style: 'padding: 10px;',
items: [new SampleGrid([0,1,2,3,4])]
},
{
xtype: 'portal',
title: 'Dashboard',
tabTip: 'Dashboard tabtip',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: 'Subscriptions',
iconCls: 'x-icon-subscriptions',
tabTip: 'Subscriptions tabtip',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 1,
items: [{
title: 'Nested Tabs',
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: 'Users',
iconCls: 'x-icon-users',
tabTip: 'Users tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}, {
expanded: true,
items: [{
title: 'Configuration',
iconCls: 'x-icon-configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}, {
title: 'Email Templates',
iconCls: 'x-icon-templates',
tabTip: 'Templates tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
这里的html属性指的是右侧页中的内容
按照我的想法我想问一下EXTJS高手们,应该如何更改
我想改成.点击左侧的链接后,右面内容页显示 例如http://www.baidu.com这个网址的内容.请教大家应该如何更改.
默认的html是文本或者EXT的对象.
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货