標籤：spec border UI 指定 font utf-8 tag article exactly
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >
<%@ 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 : "username:"}, {x : 80,y : 10,name : "to",anchor : "90%"//定義位置(錨)}, {x : 10,y : 40,xtype : "label",text : "password:"}, {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>
extjs_08_介面布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
