【初學EXT】布局練習

學以致用是最終目的，今天要提升難度了，先給自己打打氣加加油~

計劃：
1、設計介面（盡量整合所學的布局知識）
2、介面實現
3、記錄痛點
4、調整樣式（實現過程中才發現樣式更改是比較不好調的，所以這一次暫不作處理,摘出作為專門學習的章節）

設計：

使用軟體：Diagram Designer

設計圖：

實現介面：

基本按照設計介面完成了實現介面，展示如下：

看著它覺得很有成就感

實現思路：

1、首先確定整體panel為Viewport  layout: "border"
2、其次以panel方式搭建好border各部分
3、從上往下，從左往右更改或填充各個panel
4、north 痛點在於使展示靠右顯示
5、south 痛點在於展示間的間隔控制
6、west 痛點在於TreePanel
7、center 痛點在於TabPanel、GridPanel、PagingToolbar
8、其中GridPanel
   先能展示資料
   再增加序號
   在增加複選框
   在增加頭部工具條
   工具條增加下拉式清單
   資料增加連結
   在增加底部工具列
以上提及痛點控制項，我會在後續文章中詳細羅列學習，他們都是常用的重要控制項

現在先把整體代碼貼出

實現代碼：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Hello World</title><link rel="stylesheet" type="text/css"href="EXT/resources/css/ext-all.css" /><script type="text/javascript" src="EXT/ext-base.js"></script><script type="text/javascript" src="EXT/ext-all.js"></script><script type="text/javascript" src="EXT/ext-lang-zh_CN.js"></script><script type="text/javascript">Ext.onReady(function() {//頁面初始化代碼var toobarTop = new Ext.Toolbar({height : 25,items : [ '->', {xtype : 'tbtext',text : '歡迎 小明登陸'}, {xtype : 'tbspacer',width : 20}, {text : '退出'}, {xtype : 'tbspacer',width : 20} ]})var panelTop = new Ext.Panel({id : "panelTop",region : 'north',height : 25,//   margins: '5 0 0 5',//上   右  下   左  tbar : toobarTop});var toobarFooter = new Ext.Toolbar({height : 25,items : [ {xtype : 'tbtext',text : '模組名稱'}, '->', {text : '目前時間：2013-04-22 13:50:35'}, {xtype : 'tbspacer',width : 20} ]});var panelFooter = new Ext.Panel({id : "panelFooter",region : 'south',height : 25,tbar : toobarFooter});var panelLeft = new Ext.Panel({id : "panelLeft",// title: "資料菜單",  region : 'west',width : 160,minWidth : 50,maxWidth : 250,// collapsible: true,   //可收縮split : true, //可改變框體大小html : "<div id=\"treeDiv\"> </div>"});/*var panelCenter = new Ext.GridPanel({id:"panelCenter",     region: 'center',       collapsible: true,   //可收縮     split: true,   //可改變框體大小     html:"centerPanel content" }); *///列模型// 顯示序號Ext.grid.RowNumberer.prototype = {id : 'numberer',header : "序號",width : 40,align : "center",sortable : false,fixed : true,menuDisabled : true,dataIndex : '',rowspan : undefined,renderer : function(v, p, record, rowIndex) {if (this.rowspan) {p.cellAttr = 'rowspan="' + this.rowspan + '"';}return rowIndex + 1;}};//增加複選框   GridPanel中也要增加var sm = new Ext.grid.CheckboxSelectionModel();//單選// var sm = new Ext.grid.CheckboxSelectionModel({singleSelect: true});//列模型中的dataIndex 必須和Human結構中的name 屬性值一一對應var cm = new Ext.grid.ColumnModel([Ext.grid.RowNumberer.prototype,sm,{header : "姓名",width : 80,dataIndex : "Name",tooltip : "這是您的姓名"},//dataIndex表示記錄結構中的name屬性值。{header : "性別",width : 40,dataIndex : "Sex",align : "center"},{header : "生日",width : 150,format : "Y-m-d",dataIndex : "Birthday",renderer : Ext.util.Format.dateRenderer("Y-m-d")//格式化日期},{header : "學曆",width : 80,dataIndex : "Education",align : "center"},{id : "memo",header : "備忘",dataIndex : "Memo"},{header : "操作",width : 100,dataIndex : "rowId",menuDisabled : true,renderer : function(v) {var modify = "<a href='modify?newsId=" + v+ "'>修改</a>";var remove = "<a href='delete?newsId=" + v+ "'>刪除</a>";return "<span align='center'>" + modify+ " " + remove + "</span>";}} ]);//資料var data = [ {name : "李贊紅",sex : "男",birthday : Date.parseDate("1979-04-11", "Y-m-d"),edu : "本科",memo : "無備忘"}, {name : "陳南",sex : "男",birthday : Date.parseDate("1987-08-06", "Y-m-d"),edu : "本科",memo : "一個小帥哥哈"}, {name : "易珊靜",sex : "女",birthday : Date.parseDate("1980-05-12", "Y-m-d"),edu : "本科",memo : "無備忘"}, {name : "張海軍",sex : "男",birthday : Date.parseDate("1980-12-11", "Y-m-d"),edu : "本科",memo : "北大青鳥最帥的老師"} ];//Proxyvar proxy = new Ext.data.MemoryProxy(data);//Record 定義記錄結果var Human = Ext.data.Record.create([ {name : "Name",type : "string",mapping : "name"}, {name : "Sex",type : "string",mapping : "sex"}, {name : "Birthday",type : "string",mapping : "birthday"}, {name : "Education",type : "string",mapping : "edu"}, {name : "Memo",type : "string",mapping : "memo"} ]);//Readervar reader = new Ext.data.JsonReader({}, Human);//Storevar tableInfo = new Ext.data.Store({proxy : proxy,reader : reader});tableInfo.load();var cities = [ [ 1, "北京" ], [ 2, "西安" ], [ 3, "天津" ], [ 4, "河北" ] ];var proxy = new Ext.data.MemoryProxy(cities);var City = Ext.data.Record.create([ {name : "cid",type : "int",mapping : 0}, {name : "cname",type : "string",mapping : 1} ]);var reader = new Ext.data.ArrayReader({}, City);var comboStore = new Ext.data.Store({proxy : proxy,reader : reader,autoLoad : true//即時載入資料  });//store.load();  var combo = new Ext.form.ComboBox({triggerAction : "all",width : 80,store : comboStore,displayField : "cname",valueField : "cid",mode : "local",emptyText : "請選擇城市"});//頂部工具列var toolsbarTop = new Ext.Toolbar({autoHeight : true,Width : true,items : [ {text : '第一行',tooltip : ''}, {text : '下一行'}, {text : '上一行'}, '-', {text : '全選'}, {text : '全不選'}, {xtype : 'tbseparator'}, { // or '-'  在工具列中的兩個項目之間添加一個垂直的分隔欄text : '反選'}, '->',//在工具列的兩個項目之間添加一個貪婪的(100% 寬度)水平空白區{xtype : 'tbtext',text : '顯示條件'}, combo, {xtype : 'tbspacer',width : 20}, '-', {xtype : 'tbtext',text : '查詢條件'}, {xtype : 'textfield',name : 'field1',emptyText : 'enter search term'}, {text : '檢索',tooltip : ''}, {xtype : 'tbspacer',width : 30} ]});//底部工具列//然後有一個pagingToolbarvar ptb = new Ext.PagingToolbar({pageSize : 20,store : tableInfo,displayInfo : true,displayMsg : "顯示第 {0} 條到 {1} 條記錄，一共 {2} 條",emptyMsg : "沒有記錄"});var tabPanelOne = new Ext.grid.GridPanel({id : "tabPanelOne",title : "中國公民",tbar : toolsbarTop,bbar : ptb,cm : cm,sm : sm,//複選框store : tableInfo,autoExpandColumn : "memo" //自動伸展，佔滿剩餘地區});var panelCenter = new Ext.TabPanel({id : "panelCenter",region : 'center',collapsible : true, //可收縮split : true, //可改變框體大小bodyBorder : true,activeTab : 0, // index or id  items : [ tabPanelOne, {title : 'Tab 2',html : 'This is tab 2 content.'}, {title : 'Tab 3',html : 'This is tab 3 content.'} ]});//整體Ext.Viewport代表瀏覽器視窗的整個顯示地區，將document body作為渲染對象，它會根據瀏覽器視窗的大小自動調整自身的尺寸。在一個頁面中只允許出現一個Viewport執行個體var panel = new Ext.Viewport({id : "allPanel",renderTo : document.body,layout : "border",bodyBorder : true,defaults : {//     bodyStyle: "background-color:yellow;",  frame : true//渲染面板  //    bodyPadding: 15  },items : [ panelTop, panelFooter, panelLeft, panelCenter ]});var panelTree = new Ext.tree.TreePanel({id : "panelTree",width : 140,el : "treeDiv",//應用到的html元素idanimate : true,//以動畫形式伸展,收縮子節點title : "Extjs靜態樹",collapsible : true,rootVisible : true,//是否顯示根節點autoScroll : true,autoHeight : true,lines : true,//節點之間串連的橫豎線loader : new Ext.tree.TreeLoader(),//root : new Ext.tree.AsyncTreeNode({id : "root",text : "根節點",//節點名稱expanded : true,//展開leaf : false,//是否為葉子節點children : [ {text : '子節點一',leaf : true}, {id : 'child2',text : '子節點二',children : [ {text : "111"} ]} ]})});panelTree.render();//不要忘記render()下,不然不顯示哦});</script></head><body><div id="a"></div></body></html>