extjs_08_界面布局

来源：互联网发布：阿里数据分析面试编辑：程序博客网时间：2024/06/05 00:19
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>My JSP 'index.jsp' starting page</title><!-- 引入样式，可以把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式--><link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css"><!-- 开发模式引入ext-all-debug.js，发布模式引入ext-all.js --><script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script><!-- 语言包 --><script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">Ext.onReady(function() {//绝对布局Ext.create("Ext.form.Panel", {title : "Absolute Layout",width : 300,height : 275,layout : {type : "absolute"},defaultType : "textfield",//默认为文本类型items : [ {x : 10,y : 10,xtype : "label",text : "用户名:"}, {x : 80,y : 10,name : "to",anchor : "90%"//定义位置(锚)}, {x : 10,y : 40,xtype : "label",text : "密码:"}, {x : 80,y : 40,name : "subject",anchor : "90%"}, {x : 0,y : 80,xtype : "textareafield",name : "msg",anchor : "100% 100%",//宽和高value : "文本域默认值"} ],renderTo : Ext.getBody()});//手风琴布局Ext.create("Ext.panel.Panel", {title : "Accordion Layout",width : 300,height : 300,defaults : {bodyStyle : "padding:15px"//用户自定义CSS样式被应用到panel的body元素上},layout : {type : "accordion",titleCollapse : true,//允许通过点击标题栏的任意位置来展开/收缩子项Panelanimate : true,//表示对所含面板进行展开/收缩时, 面板的打开/关闭使用动画效果//'true'表示当每个面板展开时, 都将面板移动到容器的第一个. 'false' 则保持顺序不变.activeOnTop : true},items : [ {title : "Panel 1",html : "Panel content!"}, {title : "Panel 2",html : "Panel content!"}, {title : "Panel 3",html : "Panel content!"} ],renderTo : Ext.getBody()});//锚定布局Ext.create("Ext.Panel", {width : 500,height : 400,title : "AnchorLayout Panel",layout : "anchor",renderTo : Ext.getBody(),items : [ {xtype : "panel",title : "75% Width and 20% Height",anchor : "75% 20%"}, {xtype : "panel",title : "Offset -300 Width & -200 Height",anchor : "-300 -200"}, {xtype : "panel",title : "Mixed Offset and Percent",anchor : "-250 20%"} ]});//自动布局Ext.create("Ext.Panel", {width : 500,height : 280,title : "AutoLayout Panel",layout : "auto",renderTo : document.body,items : [ {xtype : "panel",title : "Top Inner Panel",width : "75%",height : 90}, {xtype : "panel",title : "Bottom Inner Panel",width : "75%",height : 90} ]});//边界布局Ext.create("Ext.panel.Panel", {width : 500,height : 300,title : "Border Layout",layout : "border",items : [ {title : "South Region is resizable",region : "south", // position for regionxtype : "panel",height : 100,split : true, // 手动调整大小// 如果有四个值, 则分别依次应用于上,右,下,左.margins : "0 5 5 5"}, {// xtype: "panel" implied by defaulttitle : "West Region is collapsible",region : "west",xtype : "panel",margins : "5 0 0 5",width : 200,collapsible : true, // 是否允许收缩id : "west-region-container",layout : "fit"}, {title : "Center Region",region : "center", // center region is required, no width/height specifiedxtype : "panel",layout : "fit",margins : "5 5 0 0"} ],renderTo : Ext.getBody()});//卡片布局var p = Ext.create("Ext.tab.Panel", {width : 500,height : 300,layout : "card",title : "Card Layout",items : [ {title : "Card 1",html : "Card 1"}, {title : "Card 2",html : "Card 2"} ],renderTo : Ext.getBody()});p.getLayout().setActiveItem(0);//激活指定的面板.//列布局// All columns are percentages -- they must add up to 1Ext.create("Ext.panel.Panel", {title : "Column Layout - Percentage Only",width : 350,height : 250,layout : "column",items : [ {title : "Column 1",columnWidth : 0.25}, {title : "Column 2",columnWidth : 0.55}, {title : "Column 3",columnWidth : 0.20} ],renderTo : Ext.getBody()});// Mix of width and columnWidth -- all columnWidth values must add up// to 1. The first column will take up exactly 120px, and the last two// columns will fill the remaining container width.Ext.create("Ext.Panel", {title : "Column Layout - Mixed",width : 350,height : 250,layout : "column",items : [ {title : "Column 1",width : 120}, {title : "Column 2",columnWidth : 0.7}, {title : "Column 3",columnWidth : 0.3} ],renderTo : Ext.getBody()});//填充布局Ext.create("Ext.panel.Panel", {title : "Fit Layout",width : 300,height : 150,layout : "fit",items : {title : "Inner Panel",html : "This is the inner panel content",bodyPadding : 20,//这个值被应用到所有的边界border : false},renderTo : Ext.getBody()});//横向布局Ext.create("Ext.Panel", {width : 500,height : 300,title : "HBoxLayout Panel",layout : {type : "hbox",align : "stretch"},renderTo : document.body,items : [ {xtype : "panel",title : "Inner Panel One",width : 200}, {xtype : "panel",title : "Inner Panel Two",flex : 1}, {xtype : "panel",title : "Inner Panel Three",flex : 1} ]});//纵向布局Ext.create("Ext.Panel", {width : 500,height : 400,title : "VBoxLayout Panel",layout : {type : "vbox",align : "center"},renderTo : document.body,items : [ {xtype : "panel",title : "Inner Panel One",width : 250,flex : 2}, {xtype : "panel",title : "Inner Panel Two",width : 250,flex : 4}, {xtype : "panel",title : "Inner Panel Three",width : "50%",height : 200} ]});//表格布局Ext.create("Ext.panel.Panel", {title : "Table Layout",width : 300,height : 150,layout : {type : "table",// The total column count must be specified herecolumns : 3},defaults : {// applied to each contained panelbodyStyle : "padding:20px"},items : [ {html : "Cell A content",rowspan : 2}, {html : "Cell B content",colspan : 2}, {html : "Cell C content",cellCls : "highlight"}, {html : "Cell D content"} ],renderTo : Ext.getBody()});})</script></head><body><br></body></html>
2 0