After playing the portal page, the random Chart content is transformed according to the demo of extjs. One of the five projects is randomly selected for statistics. Each time you see the statistics items, it may be different.
/**
* @ Class Ext. app. Portal
* @ Extends Object
*/
Ext. define ("Ext. app. Portal ',{
Extend: 'ext. container. viewport ',
// Requires: ['ext. diag. layout. ContextItem ', 'ext. diag. layout. context'],
Uses: ['ext. app. portalPanel ', 'ext. app. portalColumn ', 'ext. app. gridport', 'ext. app. chartPortlet ', 'ext. app. gridmyinfo', 'ext. app. gridNews '],
GetTools: function (){
Return [{
Xtype: 'tool ',
Type: 'gear ',
Handler: function (e, target, panelHeader, tool ){
Var portlet = panelHeader. ownerCt;
Portlet. setLoading ('loading ...');
Ext. defer (function (){
Portlet. setLoading (false );
},2000 );
}
}];
},
InitComponent: function (){
Var responseArray = [];
Ext. Ajax. request ({
Url: '../IndexPage. aspx ',
Async: false,
Success: function (response ){
ResponseArray = Ext. JSON. decode (response. responseText );
},
Failure: function (response ){
Ext. MessageBox. alert ('error', 'Contact the backend Service ');
}
});
Ext. apply (this ,{
Id: 'app-viewport ',
Layout :{
Type: 'border ',
Padding: '0 5 5 5' // pad the layout from the window edges
},
Items :[{
Id: 'app-head ',
Xtype: 'box ',
Region: 'north ',
Height: 40,
Html: responseArray. dwmc
},{
Xtype: 'Container ',
Region: 'center ',
Layout: 'border ',
Items :[{
Id: 'app-options ',
Title: 'portal information ',
Region: 'west ',
AnimCollapse: true,
Width: 150,
MinWidth: 140,
MaxWidth: 400,
Split: true,
Collapsible: true,
Layout :{
Type: 'accordion ',
Animate: true
},
Items :[{
Title: 'System statistics ',
Border: false,
AutoScroll: true,
IconCls: 'nav ',
Html: responseArray. tjxx
},{
Title: 'upload rank ',
Border: false,
AutoScroll: true,
IconCls: 'nav ',
Html: responseArray. upcount
},{
Title: 'points ranking ',
Border: false,
AutoScroll: true,
IconCls: 'nav ',
Html: responseArray. integration
},{
Title: 'software version ',
Border: false,
AutoScroll: true,
IconCls: 'info ',
Html: responseArray. copyright
}]
},{
Id: 'app-portal ',
Xtype: 'portalpanel ',
Region: 'center ',
Items :[{
Id: 'col-1 ',
Items :[{
Id: 'portlet-1 ',
Title: 'random resource statistical table ',
Tools: this. getTools (),
Items: Ext. create ('ext. app. gridport '),
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
},{
Id: 'portlet-2 ',
Title: 'news Platform ',
Tools: this. getTools (),
Items: Ext. create ('ext. app. GridNews '),
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
}]
},{
Id: 'col-2 ',
Items :[{
Id: 'portlet-3 ',
Title: 'recent login ',
Tools: this. getTools (),
Html: responseArray. lastlogin,
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
},{
Id: 'portlet-5 ',
Title: 'Personal Statistical Information ',
Tools: this. getTools (),
Items: Ext. create ('ext. app. gridmyinfo '),
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
},{
Id: 'portlet-7 ',
Title: 'hottest resource ',
Collapsed: true,
Tools: this. getTools (),
Html: responseArray. browcount,
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
}]
},{
Id: 'col-3 ',
Items :[{
Id: 'portlet-4 ',
Title: 'random resource statistics ',
Tools: this. getTools (),
Items: Ext. create ('ext. app. chartport '),
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
},{
Id: 'portlet-6 ',
Title: 'latest resource ',
Tools: this. getTools (),
Html: responseArray. fileupdate,
Listeners :{
'Close': Ext. bind (this. onPortletClose, this)
}
}]
}]
}]
}]
});
This. callParent (arguments );
},
OnPortletClose: function (portlet ){
This. showMsg ('"' + portlet. title + '" deleted ');
},
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 ();
}
}
});
Zookeeper