Ext JS學習第五天 Ext_window組件（一）

Ext JS學習第五天 Ext_window組件（一）
第一個組件：Ext.window.Window。對於組件，也就是Ext最吸引開發人員的地方，那麼我們要真正的使用Ext的組件，首先必須學會閱讀API文檔。–xtype：組件的別名–Hierarchy 階層–Inherited mixins 混入的類–Requires 該組件需要使用的類–configs：組件的配置資訊–properties：組件的屬性–methods：組件的方法–events：組件的事件•window組件常用屬性和方法講解:•configs:–constrain:布爾值，true為限制視窗只能在其容器內移動，預設值為false，允許視窗在任何位置移動。(另：constrianHeader屬性)–modal:布爾值，true為設定模態視窗。預設為false–plain：布爾值，true為視窗設定透明背景。false則為正常背景，預設為false–x、y 設定視窗左上方座標位置。–onEsc：複寫onEsc函數，預設情況下按Esc鍵會關閉視窗。–closeAction：string值，預設值為'destroy'，可以設定'hide'關閉時隱藏視窗–autoScroll：布爾值，是否需要捲軸，預設false•properties 屬性•methods 方法•events 事件 附上栗子代碼複製代碼 1 Ext.onReady(function () { 2     //Ext.create方法相當於建立一個執行個體對象 3     Ext.create('Ext.window.Window', { 4         title: '我的第一個組件,window', 5         width: 400,     //Number型  也可以是字串類型  width: '90%' 6         height: 300, 7         layout: 'fit', 8         constrain: true,        //限制視窗不超出瀏覽器邊界 9         modal: true,            //設定一個模態視窗10         //plain:true ,11         icon: 'JS/Ext/icons/used/browser_window.pngg',                //字串參數,圖片的路徑12         //iconCls:'' ,           //CSS樣式13         x: 50,14         y: 50,15         autoScroll: true,        //添加捲軸16         html: '<div style=width:200px;height:200px>我是一個div</div><div style=width:200px;height:200px>我是第二個div</div>',17         //constrainHeader:true,    //不允許該視窗的title超出瀏覽器邊界18         renderTo: Ext.getBody()    //新建立的組件 渲染到什麼位置19     }).show();20 21 });