ExtJS 3.2.1使用學習
阿新 • • 發佈：2019-01-09
Ext.onReady(function(){
// 彈出框，第一個引數為標題，第二個引數為顯示內容
// Ext.MessageBox.alert('Title','Content text !');
// 含內容的視窗
// var win = new Ext.Window({
// title : "面板1",
// html : "面板1內容",
// height : 100,
// width : 100
// });
// win.show();
// 元件可以直接通過new關鍵字建立
// 建立一個視窗使用 new Ext.Window();
// 建立一個表格new Ext.gridPanel();
// 除一些普通元件以外，一般都會在建構函式中通過傳遞引數來建立元件‘
// 元件根據建構函式中的引數屬性值來初始化元件
// var user = {
// title : title,
// html : hello,
// width : 200,
// height :200,
// };
// var panel = new Ext.Panel(user);
// 渲染時需要有相應的dom,render的引數為dom的id屬性值
// panel.render("panel");
// 對於容器中的子元素元件，都支援延遲載入的方式建立控制元件，
// 此時可以直接通過在需要父元件的建構函式中通過給屬性items傳遞陣列的方式實現構造
// var panel = new Ext.TabPanel({
// width : 600,
// height : 300,
// items :[{
// title : '面板one',
// },{
// title : '面板2',
// },{
// title : '面板3',
// }]
// });
// panel.render("panel");
// 除了一些特殊的元件或類以外，
// 所有的元件在初始化的時候都可以在建構函式使用一個包含屬性名及值的物件，
// 該物件中的資訊也就是指元件的配置屬性
// 例如：
// var a = new Ext.Panel({
// title : "面板",
// html : "面板內容",
// height :100,
// //不新增width，預設顯示視窗的大小
// width : 200
// });
// a.render("panel");
// var b = new Ext.Button({
// text : '新增',
// // true為不可按
// pressed : false,
// height : 30,
// width : 60,
// handler : Ext.emptyFn()
// });
// b.render("button");
// Ext事件處理事件統一由Ext.EventManager物件管理
// Ext封裝了一個Ext.EventObject事件物件
// 支援事件處理的類為Ext.util.Observable
// 凡是繼承該類的元件或類都支援王物件中新增事件及響應功能
//Ext.get()的引數為dom的id屬性值
// Ext.get("button")得到一個與頁面中的按鈕關聯的Ext.Element物件
// 可直接呼叫該物件上的addListerner方法來個物件新增事件
// 在呼叫addListerner方法的程式碼中，第一個引數表示事件的名稱，第二個引數表示處理器或響應函式
// ExtJs支援時間佇列，可以在物件中新增多個響應函式
// function a() {
// alert("do some thing");
// }
// function c() {
// alert("do some thing !");
// }
// var b = new Ext.Button({
// text : '新增',
// // true為不可按
// pressed : false,
// height : 30,
// width : 60,
// handler : Ext.emptyFn()
// });
// b.render("button");
// Ext.get("button").addListener("click", a);
// // addListerner方法的簡寫形式是on
// Ext.get("button").on("click", c);
// //ExtJS還支援事件延遲處理及事件處理快取等功能
// Ext.get("button").on("click", a, this, {delay : 2000});
// 在使用Ext的事件時，我們一般是直接在控制元件上實現
// 每一個控制元件包含哪些事件，在什麼時候觸發時，觸發時傳遞的引數等
// 在ExtJS專案文件中有詳細說明
// 比如對於所有的元件Component，都包含一個beforedestroy事件
// 該事件會在Ext銷燬一個元件的時候觸發
// 如果事件響應函式返回false
// 則會取消元件的銷燬操作
// var win = new Ext.Window({
// title : '不能關閉的視窗',
// height : 200,
// width : 300
// });
// win.on("beforedestroy",function (obj) {
// alert("不能關閉");
// obj.show();
// return false;
// });
// win.show();
// 面板Panel是ExtJS控制元件的基礎
// 由頂部工具欄、底部工具欄、面板頭部、面板底部、面板主區域組成
// 內建面板展開和關閉功能，面板可以放入其他任何容器中，面板也可以包含其他元件
// 面板的類名為Ext.Panel，其xtype為panel，以下顯示面板的組成部分
// var panel = new Ext.Panel({
// title : '面板頭部header',
// width : 200,
// height : 200,
// html : '<h1>O(^_^)O</h1>',
// // 渲染到某個dom上
// renderTo : 'hello',
// tbar : [{
// text : 'tbar',
// // pressed :true
// }],
// bbar : [{
// text : 'bbar'
// }],
// buttons : [{
// text : 'button2'
// },{
// text : 'button1'
// }]
// });
// panel.render("panel");
// Ext工具欄由Ext.Toolbar()類表示
// 工具欄可以存放按鈕、文字、分隔符等內容
// new Ext.Panel({
// // 渲染到某個dom上
// renderTo : 'hello',
// title : 'hello',
// width : 300,
// height : 200,
// html : '<h1>Hello,easy</h1>',
// tbar:[{
// pressed : true,
// text : '重新整理'
// }],
// tools : [{
// id : 'save'
// },{
// id : 'help'
// },{
// id : 'close',
// //按下去的處理函式
// handler : function(){
// var hello = Ext.get('hello');
// hello.remove();
// }
// }]
// });
// 在頂部或底部還可以加入包括按鈕、文字、空白、填充條、分隔符等的工具欄選項
// new Ext.Panel({
// renderTo : 'hello',
// title : 'hello',
// width : 300,
// height : 200,
// html : '<h1>Hello,easy</h1>',
// tbar : [
// new Ext.Toolbar.TextItem('工具欄'),
// //對齊方式：tbfill 右對齊
// {xtype : 'tbfill'},
// {
// //無論是否為true，都可以按，只不過true顯示無背景，看不出是個按鈕
// pressed : true,
// text :'新增',
// handler : function(){
// Ext.get('hello').remove();
// }
// },
// //有距離分隔
// {xtype : 'tbseparator'},
// {
// pressed :true,
// text : '儲存'
// }
// ]
// });
// 在前面的示例中，為了顯示一個面板，我們需要在頁面上新增一個，
// 然後把Ext控制元件渲染到這個div上
// Viewport代表這個瀏覽器顯示區域，該物件渲染到頁面中的body區域
// 並會隨著瀏覽器顯示區域的大小自動改變，一個頁面只有一個Viewport例項
// Viewport不需要指定renderTo
// new Ext.Viewport({
// enableTabScroll : true,
// // 佈局，常用fit、border
// layout : 'fit',
// items :[{
// title : '面板',
// html : '',
// bbar :[{text :'按鈕1'},{text : '按鈕2'}]
// }]
// });
// new Ext.Viewport({
// enableTabScroll : true,
// layout : 'border',
// items : [{
// title : '選單',
// //佈局方式，按照上北下南左西右東，面板按照items的順序放置
// region : 'west',
// width : 200,
// collapsoble : true,
// html : '選單欄'
// },{
// title : '面板',
// region : 'south',
// height : 50,
// html : '<h1>後臺</h1>'
// },{
// xtype : 'tabpanel',
// region : 'center',
// items : [{title : '面板1'},{title : '面板2'}]
// }]
// });
// ExtJS視窗由Ext.Window()類定義，該類繼承自Panel
// 視窗是一種特殊的Panel
// var i = 0;
// function newWin() {
// var win = new Ext.Window({
// title : '視窗'+i++,
// width : 400,
// height : 300,
// // 是否顯示可最大化視窗按鈕
// maximizable : true,
// });
// win.show();
// }
// button = new Ext.Button({
// text : '新視窗',
// width : 100
// });
// button.render('bin');
// Ext.get('bin').on('click',newWin);
// 視窗是分組進行管理的，可以對一組視窗進行操作
// 預設情況下的視窗都在預設的組Ext.WindowMgr中
// 視窗分組由類Ext.WindowGroup()定義
// 該類包括bringToFront、getActive、hideAll、sendToBack等方法用來對分組中的視窗進行操作
// var i = 0 , myGroup;
// function newWin() {
// var win = new Ext.Window({
// title : '視窗'+i++,
// width : 400,
// height : 300,
// // 是否顯示可最大化視窗按鈕
// maximizable : true,
// // 視窗歸屬於哪個組
// manager : myGroup
// });
// win.show();
// }
// function toBack() {
// myGroup.sendToBack(myGroup.getActive());
// }
// function hideAll() {
// myGroup.hideAll();
// }
// // 顯示怎麼辦？
// myGroup = new Ext.WindowGroup();
// Ext.get("bin").on('click', newWin);
// Ext.get('toback').on('click', toBack);
// Ext.get('hide').on('click', hideAll);
// Ext.get('show').on('click', showAll);
// ExtJS的對話方塊封裝在Ext.MessageBox()類，簡寫形式為Ext.Msg
// 可以直接通過呼叫響應的對話方塊方法來顯示Ext對話方塊
// 包括但不限於：alert/confirm/prompt/progress/wait
// 也可自定義對話方塊
// 普通對話方塊一般包含四個引數：
// title 對話方塊標題
// msg 提示資訊
// Function fn 可選引數，關閉對話方塊執行的回撥函式
// Object scope 回撥函式執行作用域
// 可以在回撥函式中通過button引數判斷使用者做了什麼選擇
// 通過text來讀取在對話方塊中輸入的內容
// Ext.get('bin').on('click', function(){
// // confirm
// // Ext.MessageBox.confirm('請確認', '是否刪除指定內容', function (button, text){
// // alert(button);
// // alert(text);
// // });
// // prompt
// Ext.get('bin').on('click', function(){
// Ext.MessageBox.prompt('輸入提示框', '請輸入...', function (button, text) {
// Ext.MessageBox.alert('選按的是'+button+' 輸入內容是'+text);
// });
// });
// });
// 實際應用中，可以直接使用MessageBox的show方法來顯示自定義的對話方塊
// function save(button) {
// Ext.MessageBox.alert(button);
// }
// Ext.get('bin').on('click', function () {
// Ext.MessageBox.show({
// title : '儲存資料',
// msg : '儲存修改？',
// // 不加，則無選擇項
// buttons : Ext.Msg.YESNOCANCEL,
// fn : save,
// // 文字前的圖示
// icon : Ext.MessageBox.QUESTION
// });
// });
// ExtJS的佈局基類為Ext.layout.ContainerLayout,其他佈局繼承該類
// ExtJS的容器元件包含一個layout及layoutConfig配置屬性
// 這兩個屬性用來指定容器使用的佈局及佈局的詳細配置資訊
// 如果沒有指定容器的layout，則預設會使用ContainerLayout作為佈局
// 該佈局只是簡單的把元素放到容器中，有的佈局需要layoutConfig配置，有的不需要
// TabPanel使用card佈局 FromPanel使用form佈局 GridPanel使用column佈局
// 在使用這些元件的時候，不能給這些容器再指定另外的佈局
// new Ext.Panel({
// renderTo : 'hello',
// width : 400,
// height : 200,
// layout : 'column',
// items:[{
// // 佔父面板的百分比
// columnWidth : 0.5,
// title : '面板1'
// },{
// columnWidth :0.5,
// title : '面板2'
// }]
// });
// Border區域佈局由類Ext.layout.BorderLayout定義,佈局名稱為border
// 改佈局把容器分成東南西北中:est/sourth/west/north/center
// center區域必須設定
// 在往容器中新增子元素的時候，只需指定子元素的位置，border會自動把子元素放到佈局指定的位置
// new Ext.Viewport({
// layout : 'border',
// items : [
// {region : 'north', height : 50, title : '頂部面板'},
// {region : 'south', height : 50, title : '底部面板'},
// {region : 'center', width : 100, title : '中間面板'},
// {region : 'west', width : 250, title : '左邊面板'},
// {region : 'east', width : 250, title : '右邊面板'}]
// });
// Column佈局由Ext.layout.ColumnLayout類定義,名稱為column
// 列布局把整個容器元件看成一列
// 往裡面存放子元素的時候
// 可以通過在子元素中指定使用columnWidth或width指定子元素所佔列的寬度
// columnWidth表示使用百分比的形式指定列的寬度
// width使用絕對畫素的方式指定列的寬度
// 在實際情況中，可以混合使用
// new Ext.Panel({
// renderTo : 'hello',
// title : '父容器',
// layout : 'column',
// width : 500,
// height : 100,
// items : [
// {title : '列1', width : 100},
// {title : '列2', width : 200},
// {title : '列3', width : 100},
// //總和不大於父容器寬度，按絕對畫素填充，空就空著
// // {title : '列4', width : 50}
// // 總和大於父容器寬度，誰都不削減，誰在後面誰起一行
// // {title : '列4', width : 150}
// // 絕對畫素的先佔，剩餘的按照百分比分配比例
// {title : '列4', columnWidth : 0.5}
// ]
// });
// 不啟用佈局，元件會以非貪婪模式佔位，儘量擠佔最小的空間
// 啟用fit佈局，則會以貪婪模式擠佔空間,第一個佔完
// 比較：
// new Ext.Panel({
// renderTo : 'panel',
// title : '容器元件1',
// width : 500,
// height : 100,
// items : [
// {title : '子元素1', html : '子元素1內容'},
// {title : '子元素2', html : '子元素2內容'}
// ]
// });
// new Ext.Panel({
// renderTo : 'hello',
// title : '容器元件2',
// layout : 'fit',
// width : 500,
// height : 300,
// items : [
// {title : '子元素1', html : '子元素1內容'},
// {title : '子元素2', html : '子元素2內容'}
// ]
// });
// form佈局由類定義Ext.layout.FormLayout()定義，名稱是form
// 是一種專門用於管理表單中輸入欄位的佈局
// 這種佈局主要用於在程式中建立表單欄位或表單元素等使用
// new Ext.Panel({
// renderTo : 'hello',
// title : '容器元件',
// layout : 'form',
// width : 300,
// // 是否隱藏標籤
// hideLabels : false,
// // 標籤對齊方式
// labelAlign : 'right',
// height : 120,
// defaultType : 'textfield',
// items :[
// {fieldLabel : '請輸入姓名', name : 'name'},
// {fieldLabel : '請輸入地址', name : 'add'},
// {fieldLabel : '請輸入電話', name : 'tel'}
// ]
// });
// Accordion佈局由Ext.layoutAccordion定義，名稱為accordion
// 表示可摺疊的佈局，也就是說使用該佈局的容器元件中的子元素是可摺疊的形式
// new Ext.Panel({
// renderTo : 'hello',
// title : '容器元件',
// layout : 'accordion',
// width : 500,
// height : 200,
// // 佈局配置引數
// layoutConfig : {
// // 是否開啟摺疊動畫
// animate :true
// },
// items : [
// {title : '子元素1', html : '1內容'},
// {title : '子元素2', html : '2內容'},
// {title : '子元素3', html : '3內容'}
// ]
// });
// Table佈局由類Ext.TableLayout定義，名稱為table
// 該佈局負責吧容器中的子元素按照類似普通html標籤<table>排列
// new Ext.Panel({
// renderTo : 'hello',
// title : '容器元件',
// width : 600,
// height : 200,
// layout : 'table',
// layoutConfig : {
// // 父容器分成的列數
// columns : 3
// },
// items : [
// // rowspan/colspan指定橫跨單元格數
// // 單元格寬度按照內容多少劃分
// // 支援內容中使用br標籤換行
// {title : '子元素1', html : '子元素1內容111<br>111', rowspan : 2, height : 100},
// {title : '子元素2', html : '子元素2內容', colspan : 2},
// {title : '子元素3', html : '子元素3內容'},
// {title : '子元素4', html : '子元素4內容'}
// ]
// });
// 表格由類Ext.grid.GridPanel定義,繼承自Panel，其xtype為grid
// 在ExtJS中，表格Grid必須包含列定義資訊，並指定表格到的資料儲存器Store
// 表格的列資訊由列Ext.grid.ColumnModel定義
// 而表格的資料儲存器有Ext.data.Store定義
// 資料儲存根據解析的資料不同分為
// JsonStore/SimpleStore/GroupingStore
// 定義表格中顯示的資料，這是二維資料
// var data = [
// [1, 'A', 'A', 'A'],
// [2, 'B', 'B', 'B']
// ];
// 建立資料儲存，負責建立一個表格
// 表二包含的列由columns配置屬性來描述
// columns是一個數組,每一行資料元素描述表格的一列資訊
// 表格的列資訊包含列頭顯示文字header、列對應的記錄集欄位dataIndex
// 列是否排序sortable、列的渲染函式renderer、寬頻width、格式化資訊format
// var store = new Ext.data.SimpleStore({
// data : data,
// fields : ['id', 'name', 'organization', 'homepage']
// });
// function showUrl(value) {
// return "<a href='http://wwww."+value+".com'>"+value+"</a>";
// }
// var grid = new Ext.grid.GridPanel({
// renderTo : 'hello',
// title : 'ZZZ',
// height : 150,
// width : 500,
// columns : [
// // header列標題,dataIndex store中的那一列,width指定列的寬度
// {header : '專案名稱', dataIndex : 'name', sortable : true, width : 100},
// {header : '開發團隊', dataIndex : 'organization', width : 100},
// { header : '網址',
// dataIndex : 'homepage',
// width : 150,
// renderer : showUrl
// // format : {
// // fontSize : 20
// // }
// }
// ],
// store : store,
// autoExpandColumn : 0
// });
// EditorGridPanel可以直接在表格的資料進行編輯，
// ExtJS的可便捷表格由Ext.grid.EditorGridPanel表示
// xtype為etidorgrid
// 使用EditorGridPanel與使用普通帆軟GridPanel方式一樣
// 區別只是在定義列資訊的時候，可以指定某一類使用的編輯即可
// var data = [{
// id : 1,
// name : '小王',
// email : '