extjs 布局
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <HTML> <HEAD> <TITLE>ExtJs Test</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="./ext/resources/css/portal.css" /> <script type="text/javascript" src="./ext/ext-all.js"></script> <script type="text/javascript" src="./ext/examples.js"></script> <script type="text/javascript"> Ext.Loader.setPath('Ext.app', 'classes'); </script> <script type="text/javascript" src="./js/portal.js"></script> <script type="text/javascript"> Ext.require([ 'Ext.layout.container.*', 'Ext.resizer.Splitter', 'Ext.fx.target.Element', 'Ext.fx.target.Component', 'Ext.window.Window', 'Ext.app.Portlet', 'Ext.app.PortalColumn', 'Ext.app.PortalPanel', 'Ext.app.Portlet', 'Ext.app.PortalDropZone', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet' ]); Ext.onReady(function(){ Ext.create('Ext.app.Portal'); }); </script> </HEAD> <body> <span id="app-msg" style="display:none;"></span> </body> </HTML>
index.jsp
portal.js
/** * @class Ext.app.Portal * @extends Object * A sample portal layout application class. */ Ext.define('Ext.app.Portal', { extend: 'Ext.container.Viewport', requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'], getTools: function(){ return [{ xtype: 'tool', type: 'gear', handler: function(e, target, portlet, tool){ portlet.setLoading('Loading...'); Ext.defer(function() { portlet.setLoading(false); }, 2000); } }]; }, 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' // pad the layout from the window edges }, items: [{ id: 'app-header', xtype: 'box', region: 'north', height: 40, html: '系统测试' },{ xtype: 'container', region: 'center', layout: 'border', items: [{ id: 'app-options', title: '菜单', region: 'west', animCollapse: true, width: 200, minWidth: 150, maxWidth: 400, split: true, collapsible: true, layout:{ type: 'accordion', animate: true }, items: [{ html: content, title:'子菜单1', autoScroll: true, border: false, iconCls: 'nav' },{ title:'子菜单2', html: content, border: false, autoScroll: true, iconCls: 'settings' }] },{ id: 'app-portal', xtype: 'portalpanel', region: 'center', items: [{ id: 'col-1', items: [{ id: 'portlet-1', title: '网元', tools: this.getTools(), items: Ext.create('Ext.app.GridPortlet'), listeners: { 'close': Ext.bind(this.onPortletClose, this) } }] }] }] }] }); this.callParent(arguments); }, 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(); } } });
examples.js
/** * @class Ext.app.Portal * @extends Object * A sample portal layout application class. */ Ext.define('Ext.app.Portal', { extend: 'Ext.container.Viewport', requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'], getTools: function(){ return [{ xtype: 'tool', type: 'gear', handler: function(e, target, portlet, tool){ portlet.setLoading('Loading...'); Ext.defer(function() { portlet.setLoading(false); }, 2000); } }]; }, 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' // pad the layout from the window edges }, items: [{ id: 'app-header', xtype: 'box', region: 'north', height: 40, html: '系统测试' },{ xtype: 'container', region: 'center', layout: 'border', items: [{ id: 'app-options', title: '菜单', region: 'west', animCollapse: true, width: 200, minWidth: 150, maxWidth: 400, split: true, collapsible: true, layout:{ type: 'accordion', animate: true }, items: [{ html: content, title:'子菜单1', autoScroll: true, border: false, iconCls: 'nav' },{ title:'子菜单2', html: content, border: false, autoScroll: true, iconCls: 'settings' }] },{ id: 'app-portal', xtype: 'portalpanel', region: 'center', items: [{ id: 'col-1', items: [{ id: 'portlet-1', title: '网元', tools: this.getTools(), items: Ext.create('Ext.app.GridPortlet'), listeners: { 'close': Ext.bind(this.onPortletClose, this) } }] }] }] }] }); this.callParent(arguments); }, 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(); } } });
GridPortlet.js
Ext.define('Ext.app.GridPortlet', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridportlet',
uses: [
'Ext.data.ArrayStore'
],
height: 500,
myData: [
['10.1.1.2', '8080'],
['10.2.3.4', '8089']
],
/**
* Custom function used for column renderer
* @param {Object} val
*/
change: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
/**
* Custom function used for column renderer
* @param {Object} val
*/
pctChange: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},
initComponent: function(){
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'IP'},
{name: 'PORT'}
],
data: this.myData
});
Ext.apply(this, {
//height: 300,
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id :'IP',
text : 'IP',
//width: 120,
flex: 1,
sortable : true,
dataIndex: 'IP'
},{
text : 'PORT',
width : 75,
sortable : true,
dataIndex: 'PORT'
}]
});
this.callParent(arguments);
}
});
浙公网安备 33010602011771号