ExtJS 3.2 學習筆記（1）

     

        嗨，開源中國的各位網友你們好，我是開源中國的菜鳥，由於作軟件工做這麼久一直沒註冊開源中國帳號，很OUT的吧。。。各位見笑了。。

      工做也兩年多了，作了好幾個基於EXTJS的項目，因此對ExtJS有蠻深入的印象，從今天開始在這裏一塊兒和你們學習和分享ExtJS，之後的日誌裏有錯誤的還請各位網友多多指教，畢竟我是菜鳥嘛 呵呵~~    因爲工做比較忙，又得陪女友，因此爭取一週寫兩篇學習筆記，本人文筆比較差，一些定義性的語句不得不摘抄自一些參考書上，各位大蝦就不要吐槽我這個菜鳥哈~~~

      好啦不廢話了。。。

ExtJS 最重要的就是其核心組件，最難掌握的也是這些核心組件的使用，以及配置等等。

今天就主要歸納下Extjs 組件，首先看來看一張官網doc截圖：

      

    上圖是ext組件的繼承樹。下面咱們挑幾個枝幹來說：

上面左右組件可籠統分爲三類：

      1，基本組件     2，工具條組件    3，表單組件

 一，Ext.Component

        這個類是Ext全部組件的基類，它的全部子類都自動享有標準EXT組件的生命週期，包括建立，渲染，銷燬，隱藏，顯示，啓用，禁用等。

二，Ext.BoxComponent

     Ext.BoxComponent是一個比較重要的基礎類，它直接繼承自Component，而且實現了定位和控制自身大小的功能。其實，顧名思義，從Box這個單詞就能看出來這個類的做用。看一個代碼：

var box=new Ext.BoxComponent({
      el:'test',
      style:'.....樣式代碼....',
      pageX:100,
      pageY:100,
      width:500,
      height:100
});
 box.render();

 從代碼能夠看出，pageX，pageY分別設置了面板在平面座標軸上的位置，固然也包括寬度和高度的設置。  說 明瞭 BoxComponent 這個類裏頭實現了設置面板大小和位置的功能，若是要製做一個具備可控制大小和位置的組件，能夠直接從Ext.BoxComponent繼承。（備註：代碼中的el 表示要渲染的位置，其實也能夠用renderTo，可是使用el須要手動渲染，例如代碼中的box.render()；而使用renderTo則會在加載代碼後自動渲染到指定位置。

   

   三，Ext.Container

      Ext.Container是繼承自Ext.BoxComponent，除了擁有能夠設置自身大小和麪板位置以外，它提供了layout和items 兩個參數。 layout參數配置指定當前所用哪種佈局；items參數包含的是當前組件中的全部子組件。

  正是因爲Ext.Container提供了layout參數，因此Ext.Container是一個能夠佈局組件的超類，關於佈局我打算放在下一節學習。今天繼續學習其餘組件。。

  四，Ext.panel

      Ext.panel是咱們項目中最經常使用的一個組件，從繼承圖中能夠看出它直接繼承自Ext.Container。既然是最經常使用的，那也就是說這個組件能夠直接使用而不須要繼承，也就是說咱們能夠直接用這個類的對象來渲染出一個真實的看得見的UI，咱們來看個代碼：

var panel=new Ext.Panel({
     title:'測試面板',
     el:'test1',
     shadow:true,
     draggable:true,
     collapsilble:true,
     pageX:100,
     pageY:100,
     width:100,
     height:100,
     html:'測試內容',
     floating:true
});
   panel.render()

   代碼中：shadow爲true時候表示用來在panel後面顯示一個陰影，draggable可拖拉配置，collapsilble可伸展配置，floating 爲true表示爲浮動面板，當爲false時候在渲染的地方之內嵌的方式顯示panel，也就是沒有陰影的，這個也是默認值。html 填充panel內容，顧名思義html也能夠包含html標籤，ext也會渲染所包含的標籤。

   五，Ext.TabPanel

      官網稱這個爲選項卡面板，我更喜歡叫作可切換面板，直接看代碼:

var tabs=new Ext.TabPanel({
    renderTo:'test2',
    height:100
});
   tabs.add({
    title:'測試1',
    html:'內容1'
});
  tabs.add({
      title:'測試1',
     autoLoad:{url:'xxx.html',scripts:true},
      closable:true
});
  tabs.activate(0);

  首先定義一個可切換面板，而後爲面板添加兩個子面板（當未指定xtype時候，默認爲xtype爲panel ），

   而後使用activate()函數顯示第一個面板。代碼中renderTo指定面板要渲染的位置，而且無需手動渲染。第二個子面板的closable爲true表示能夠關閉該面板。

    第二個面板的autoLoad表示自動從xxx.html 加載頁面內容,scripts爲ture表示執行xxx.html中js代碼(若是有       的話)。

  固然之後咱們還能夠往tabpanel中添加各類複雜的組件，在實際項目中tabpanel更多時候都充當一個容器用來承載要顯示。

  今天先到這裏，下一篇咱們學習ExtJS的佈局。