extjs 布局

it2022-05-05 120

<%@ 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

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); } });

转载于:https://www.cnblogs.com/reita/archive/2013/05/12/3074859.html

相关资源：ExtJS布局之border实例

专利

最新回复(0)