Extjs相關知識點梳理

滄海一滴發表於2013-09-10
JS

 

store是一個為Ext器件提供record物件的儲存容器,行為和屬性都很象資料表
方法:不列舉繼承來的方法
Store( Object config )
構造,config定義為{
autoLoad : Boolean/Object,    //自動載入
baseParams : Object,    //只有使用httpproxy時才有意義
data : Array,        //資料
proxy : Ext.data.DataProxy,//資料代理
pruneModifiedRecords : boolean,//清除修改資訊
reader : Ext.data.Reader,    //資料讀取器
remoteSort : boolean,    //遠端排序?
sortInfo : Object,    //{field: "fieldName", direction: "ASC|DESC"}這樣的排序物件
url : String,        //利用url構造HttpProxy
}

 

filterBy( Function fn, [Object scope] ) : void
更強悍的過濾方法.fn接收兩個引數record和id
find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
找到符合條件的第一條記錄,引數同filter
findBy( Function fn, [Object scope], [Number startIndex] ) : Number
參見filterBy
getAt( Number index ) : Ext.data.Record
getById( String id ) : Ext.data.Record
依充號/id得到record物件

 

load( Object options ) : void
由指定的Proxy使用指定的reader讀取遠端資料

 

loadData( Object data, [Boolean append] ) : void
用法比load簡單一點,目的是一樣的,只是這次資料由本地讀取

reload( [Object options] ) : void
重新載入,相當於 load(options,false),如果連options都沒有傳入,則取最後一次load時使用的引數


http://blog.csdn.net/xiaohewoai/article/details/4091604

ExtJS本質上也是一個AJAX的框架，但是它和DWR有很大不同，首先，DWR是JAVA世界的產物，而ExtJS是後臺無關的。也就是說，ExtJS的後臺可以是.NET,PHP或者JAVA都可以。其實我們在網上看到的大部分例子都是PHP或者.NET,後臺的。這說明ExtJS在所有後臺都很受青睞。其次，DWR只關注客戶端與伺服器端的互動，沒有自己的介面元件，而ExtJS最讓人驚歎的就是其豐富而強大的介面元件，除此以外，它自身也能輕鬆地非同步訪問後臺元件。

1.      首先是init-main.js，這裡定義了整個應用的主體佈局檢視Viewport。它和我們HTML中的frameset有點類似。在我們的主顯示區裡還放了一個TabPanel，這就是我們桌面應用中常見的選項皮膚。要理解下面的JS呢，你必須先掌握JSON這種資料格式，這個格式我在前面的ExtJS應用中已經詳細講過，如果還不太清楚，到http://www.json.org/json-zh.html 去看看，JSON在整個ExtJS體系裡佔有重要地位，熟悉JSON格式的人會對名/值對，{}，[]很敏感。大家看到，在Viewport類和TabPanel類裡都傳入一個JSON物件來初始化整個元件。其次，你還要有容器和元件的概念，每個容器元件（容器同時也是元件，這是相對的，它放東西的時候是容器，被放置其中的時候就是元件！）都有一個items引數指定一個JSON陣列來表明自己容納的元件。

 

 

 

http://www.cnblogs.com/hannover/archive/2009/09/09/1563671.html

http://www.cnblogs.com/hannover/archive/2009/09/09/1563673.html
DAO裡操作的主要是POJO類，而在我們的Service裡面要做的就是DTO和POJO的轉化工作。因為表現層的程式碼只會直接和DTO打交道。這就是嚴格的JavaEE分層。說到這裡，可能有人開始迷惑了。我們這裡說明一下：在javaEE企業級開發中，我們一般提倡四層架構體系：WEB表現層->業務邏輯層（服務層）->持久層（資料訪問層）->資料庫層，我們這裡分別使用Struts，Spring，Hibernate來充當前三個層次的框架。一般我們把Action歸為Struts所在表現層，Service歸為Spring所在業務邏輯層（實際上，Spring是一個系統級別的框架，它的內涵和外延都比另外兩個框架要來的大！），DAO歸為Hibernate所在持久層，而在每一層上都有特定的傳值元件（呵呵，有人不喜歡用大詞，通俗點說，所謂傳值元件在javaEE體系中就是在頁面和資料庫之間幫忙傳遞資料的用JAVA寫的類！），我們自動，Struts裡有ActionForm，Hibernate裡有POJO,那在Spring管轄的業務邏輯層，主要就是DTO。所以我們的資料經常在這3個傳值元件之間傳遞。

 

這裡create和convert的配置大家注意下，所謂create就是建立一個JavaScript類和Java類的關聯對映。我們這裡只有一個建立器，它會在客戶端本地動態生成一個houseService.js檔案，然後它對應Spring框架管理的一個名為houseService的Bean，主要客戶端只要引用houseService.js這個檔案，就能呼叫到伺服器端houseService的方法。那麼，要是我只想向外界公開少數幾個方法呢？（涉及到安全問題），我們就可以用include配置了。那麼，這不就行了嗎？還需要convert幹什麼呢？恩，等一下。如果我們要在伺服器端給客戶端傳遞一個DTO物件，或者是放置著若干DTO物件的集合物件時。或者反過來，我們在客戶端給伺服器端傳遞一個JavaScript物件時。DWR怎麼做JavaScript物件和DTO物件之間的解析？如果你不給它相關資訊，它是做不到的，這就是convert的作用了。也就是說，create指定的物件被建立，convert指定的物件（客戶端和伺服器端之間攜帶傳遞的引數）被轉換！

 

 

 

http://www.cnblogs.com/hannover/archive/2009/09/09/1563664.html


ExtJs4.1:取得一個已存在Store的reference

//取得'StoreXiang'的reference 
var StoreXiang = Ext.data.StoreManager.lookup('StoreXiang');  

*  取得Srore的reference，並將其賦給gridPanel的store屬性：

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

http://blog.csdn.net/bq_cui/article/details/8527841

 

在4系中，grid的類是Ext.grid.Panel，由兩個必要的部分組成：Store和columns，其中Store為Ext.data.Store或者Ext.data.DirectStore物件的例項，columns為Ext.grid.Panel例項的屬性。

 

一個最簡單的grid：

測試網頁：test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

    <script src="ext/ext-all.js" type="text/javascript"></script>

    <script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script>

    <script src="js/test.js" type="text/javascript"></script>

</head>

<body>


</body>

</html>

test.js

Ext.onReady(function() {

  Ext.create('Ext.data.Store', {

      storeId:'simpsonsStore',

      fields:['name', 'email', 'phone'],

      data:{'items':[

          {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},

          {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},

          {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        

          {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            

      ]},

      proxy: {

          type: 'memory',

          reader: {

              type: 'json',

              root: 'items'

          }

      }

  });

  

  Ext.create('Ext.grid.Panel', {

      title: 'Simpsons',

      store: Ext.data.StoreManager.lookup('simpsonsStore'),

      columns: [

          {header: 'Name',  dataIndex: 'name'},

          {header: 'Email', dataIndex: 'email', flex:1},

          {header: 'Phone', dataIndex: 'phone'}

      ],

      height: 200,

      width: 400,

      renderTo: Ext.getBody()

  });

})

這是一個最簡單的grid實現過程，使用memoryProxy在記憶體中讀取json資料，只有資料顯示功能。通常情況下，我們不會把grid直接渲染到body，而是到另外的container，所以herght、width、renderTo屬性不是必須的。必須有的兩個屬性分別是store和columns。其中columns直接在Ext.grid.Panel例項化時通過Ext.create引數設定，store為Ext.data.Store或者Ext.data.DirectStore的例項，通常使用Ext.data.StoreManager.lookup()函式搜尋StoreManager中註冊的storeId得到。也可以指定例項名稱，效果完全相同，方法如下：

Ext.onReady(function() {

      var simpsonsStore =  Ext.create('Ext.data.Store', {

      fields:['name', 'email', 'phone'],

      data:{'items':[

          {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},

          {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},

          {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        

          {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            

      ]},

      proxy: {

          type: 'memory',

          reader: {

              type: 'json',

              root: 'items'

          }

      }

  });

  

  Ext.create('Ext.grid.Panel', {

      title: 'Simpsons',

      store: simpsonsStore,

      columns: [

          {header: 'Name',  dataIndex: 'name'},

          {header: 'Email', dataIndex: 'email', flex:1},

          {header: 'Phone', dataIndex: 'phone'}

      ],

      height: 200,

      width: 400,

      renderTo: Ext.getBody()

  });

})

也可以通過4系最新提供的Ext.define函式首先定義自己store類，先不例項化，在Ext.grid.Panel例項化過程中例項化store，優勢是可以根據需要例項化相應的store，節省資源。

可以通過4系提供的new()函式例項化store，如下：

Ext.onReady(function() {

  Ext.define('simpsonsStore',{

    extend:'Ext.data.Store',

    fields:['name', 'email', 'phone'],

    data:{'items':[

        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},

        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},

        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        

        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            

    ]},

    proxy: {

        type: 'memory',

        reader: {

            type: 'json',

            root: 'items'

        }

    }

    });

  

  

  Ext.create('Ext.grid.Panel', {

      title: 'Simpsons',

      store: new simpsonsStore,

      columns: [

          {header: 'Name',  dataIndex: 'name'},

          {header: 'Email', dataIndex: 'email', flex:1},

          {header: 'Phone', dataIndex: 'phone'}

      ],

      height: 200,

      width: 400,

      renderTo: Ext.getBody()

  });

})

最簡單，也是最基礎的使用方法就是上面這個了，今天就說這麼多，明天說說columns的設定。



其它

http://www.cnblogs.com/zhangwei595806165/archive/2012/12/13.html

相關文章