Javascript ExtJS4门户示例
我想说的是，我很难理解ExtJS4中的门户演示。有人能给我提供一个容器的通用示例以及如何添加portlet项吗。当我进行搜索时，下载提供的文档没有portal或portlet这个词。当我查看示例的源代码时，还有类文件和额外的CSS文件。需要这些吗？我在网上到处搜索，似乎只找到其他人问同样的问题。如果您能提供任何帮助，甚至链接到ExtJS4的演示，我们将不胜感激。也许我的谷歌没有 当我使用演示并开始修改边框布局时，我遇到了各种各样的问题。中心区域不能包含选项卡面板，我对东部、西部和北部区域使用手风琴布局。西区和手风琴布局似乎存在问题，因为它不能正确显示，即手风琴像半开的，里面的任何图像都不会显示，除非你折叠然后重新打开。有人能为我提供一个示例，演示如何在没有任何附加功能的情况下创建基本门户吗？下面是我使用的代码，它工作不正常，但在仅使用视口时显示和工作良好（门户部分除外） 下面是一些示例代码Javascript ExtJS4门户示例,javascript,extjs,extjs4,portal,Javascript,Extjs,Extjs4,Portal,我想说的是，我很难理解ExtJS4中的门户演示。有人能给我提供一个容器的通用示例以及如何添加portlet项吗。当我进行搜索时，下载提供的文档没有portal或portlet这个词。当我查看示例的源代码时，还有类文件和额外的CSS文件。需要这些吗？我在网上到处搜索，似乎只找到其他人问同样的问题。如果您能提供任何帮助，甚至链接到ExtJS4的演示，我们将不胜感激。也许我的谷歌没有 当我使用演示并开始修改边框布局时，我遇到了各种各样的问题。中心区域不能包含选项卡面板，我对东部、西部和北部区域使用手风
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel'],
initComponent: function(){
Ext.apply(this, Ext.create('Ext.Viewport', {
id: 'main-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [{
title: 'My Notifications',
id: 'My-Notifications-Panel',
region: 'north',
height: 300,
split: true,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'accordion',
items: [
{
title: 'Alerts'
},{
title: 'Communications'
}
]
},{
title: 'My Support',
id: 'My-Support-Panel',
region: 'east',
width: 140,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'column',
autoScroll: true,
defaults: {
margins: '10 5 0 0',
xtype: 'panel',
height: 100,
width: '100%',
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items:[
{
title: 'Customer Services'
},{
title: 'Technical Support',
listeners: {
afterrender: function(c){
c.el.on('click', function(){
CreateChatSession();
Ext.getCmp('My-Support-Chat-Panel').update('<iframe width="100%" height="700" src="/pub/" frameborder="0"></iframe>');
});
}
}
}
]
},{
xtype: 'panel',
region: 'west',
collapsible: true,
collapsed: true,
title: 'My Apps',
width: 275,
layout:'accordion',
split: true,
margins: '0 0 0 0',
defaults: {
bodyStyle: 'padding:15px',
layout: 'column'
},
items: [{
title: 'Internal Apps',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Favorites',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Reporting',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
}]
},
Ext.create('Ext.tab.Panel', {
region: 'center',
layout: 'fit',
items: [{
id: 'Workspace-1',
title: 'Workspace 1',
layout: 'fit',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-2',
title: 'Portlet 2',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
})
]
}));
this.callParent(arguments);
}
});
Ext.define（'Ext.app.Portal'{
扩展：“Ext.container.Viewport”，
用法：['Ext.app.PortalPanel']，
initComponent:function（）{
Ext.apply（这个，Ext.create（'Ext.Viewport'）{
id:“主视口”，
布局：{
键入：“边框”，
填充：“0 5”
},
项目：[{
标题：“我的通知”，
id:“我的通知面板”，
地区：'北'，
身高：300，
斯普利特：是的，
可折叠的：是的，
对,，
边距：“0”，
布局：“手风琴”，
项目：[
{
标题：“警报”
},{
标题：“通信”
}
]
},{
标题:"我的支持",，
id:“我的支持小组”，
地区：'东'，
宽度：140，
可折叠的：是的，
对,，
边距：“0”，
布局：“列”，
autoScroll：是的，
默认值：{
边距：“1050”，
xtype:'面板'，
身高：100，
宽度：“100%”，
标题位置：“底部”，
边界：错，
cls:“我的图标”，
bodyStyle:'背景图像：url（images/icon.png）；背景重复：无重复；背景位置：中间；'
},
项目：[
{
标题：“客户服务”
},{
标题：“技术支持”，
听众：{
afterrender:函数（c）{
c、 el.on（'点击'，函数（）{
CreateChatSession（）；
Ext.getCmp（'My-Support-Chat-Panel'）。更新（''；
});
}
}
}
]
},{
xtype:'面板'，
地区：'西部'，
可折叠的：是的，
对,，
标题：“我的应用程序”，
宽度：275，
布局：'手风琴'，
斯普利特：是的，
边距：“0”，
默认值：{
车身风格：“衬垫：15px”，
布局：“列”
},
项目：[{
标题：“内部应用程序”，
默认值：{
填充：“5”，
xtype:'面板'，
身高：100，
宽度：80，
标题位置：“底部”，
边界：错，
cls:“我的图标”，
bodyStyle:'背景图像：url（images/icon.png）；背景重复：无重复；背景位置：中间；'
},
项目：[]
},{
标题：“收藏夹”，
默认值：{
填充：“5”，
xtype:'面板'，
身高：100，
宽度：80，
标题位置：“底部”，
边界：错，
cls:“我的图标”，
bodyStyle:'背景图像：url（images/icon.png）；背景重复：无重复；背景位置：中间；'
},
项目：[]
},{
标题：“报告”，
默认值：{
填充：“5”，
xtype:'面板'，
身高：100，
宽度：80，
标题位置：“底部”，
边界：错，
cls:“我的图标”，
bodyStyle:'背景图像：url（images/icon.png）；背景重复：无重复；背景位置：中间；'
},
项目：[]
}]
},
Ext.create（'Ext.tab.Panel'{
地区：'中心'，
布局：“适合”，
项目：[{
id:'Workspace-1'，
标题：“工作区1”，
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
getTools: function() {
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool) {
var portlet = panelHeader.ownerCt,
el = portlet.getEl();
el.mask('Working...');
Ext.defer(el.unmask, 2000, el);
} //eo handler function
}]; //eo return
}, //eo get tools
initComponent: function() {
var content = '<div class="portlet-content">' + Ext.example.shortBogusMarkup + '</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
}, //eo layout
items: [{ //header : item 1 of app-viewport
id: 'app-header',
xtype: 'box',
region: 'north',
height: 50,
html: 'myPortal'
},
{ //container : item 2 of app-viewport
xtype: 'container',
region: 'center',
layout: 'border',
items: [{ //options: item 1 of container
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{ //item 1 of app-options
title: 'title',
autoScroll: true,
border: false,
iconCls: 'nav',
items: [{
xtype: 'treepanel',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
region: 'west',
split: true,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
/*Dashboard
MultiServices
Reporting
Global Options
*/
}]
},
{ //settings : item 2 of app-options
title: 'Settings',
html: '<div class="portlet-content">' + 'details ??' + '</div>',
border: false,
autoScroll: true,
iconCls: 'settings'
}
] //eo items options
},
{ //item 2 of container
id: 'tabpanel1', // id: 'app-portal', ???
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [{
title: 'tab1',
layout: 'column', //
closable: true,
items: [{
id: 'col-1',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
items: new Ext.app.GridPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}, {
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-1
}, {
id: 'col-2',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-2
}, {
id: 'col-3',
columnWidth: 0.5,
flex: 1,
margins: '0 26 0 0',
items: [{
id: 'portlet-4',
title: 'Chart Portlet',
tools: this.getTools(),
items: new Ext.app.ChartPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-3
}] //eo tab1
}, {
title: 'tab2',
closable: true
}] //eo items tabpanel
}
] //eo ietms container
}
] //eo viewport
}); //eo apply
this.callParent(arguments);
}, //eo initcomponent
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});