<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    最愛Java

    書山有路勤為徑,學海無涯苦作舟

    ExtJs----數據存儲與傳輸

    Ext.data.Connection
        Ext.data.Connection是對Ext.lib.Ajax的封裝,它提供了配置使用Ajax的通用方式,它在內部通過Ext.lib.Ajax實現與后臺的異步調用。與底層的Ext.lib.Ajax相比,Ext.data.Connection提供了更簡潔的配置方式,使用起來更方便。
        Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中執行與后臺交互的任務,它會從指定的URL獲取數據,并把后臺返回的數據交給HttpProxy或ScriptTagPrxoy處理。
     1var conn = new Ext.data.Connection({
     2    autoAbort:false,
     3    defaultHeaders:{
     4        referer:'http://localhost:8080'
     5    }
    ,
     6    disableCaching:false,
     7    extraParams:{
     8        name:'name'
     9    }
    ,
    10    method:'GET',
    11    timeout:300,
    12    url:'01-01.txt'
    13}
    );
    14
    15conn.request({
    16    success:function(response){
    17        Ext.Msg.alert('info',response.responseText);
    18    }
    ,
    19    failure:function(){
    20        Ext.Msg.alert('warn','failure');
    21    }

    22}
    );

        url:String: 請求url。
        params:Object/String/Function: 請求傳遞的參數。
        methos:String:請求方法,通常為GET或POST
        callback:Function:請求完成后的回調函數,無論是否成功還是失敗,都會執行。
        success:Function:請求成功時的回調函數。
        failure:Function:請求失敗時的回調函數。
        scope:Object:回調函數的作用域。
        form:Object:綁定的form表單。
        isUpload:Boolean:是否執行文件上傳。
        headers:Object:請求首部信息
        xmlData:Object:XML文檔對象,可以通過URL附加參數的方式發起請求。
        disableCaching:Boolean:是否禁用緩存,默認為禁用。
        Ext.data.Connection還提供了abort([Number transactionId]函數),當同時有多個請求發生時,根據指定的事務id放棄其中的某一個請求。如果不指定事務id,就會放棄最后一個請求。isLoading(Number transactionId)函數的用法與abort()類似,可以根據事務id判斷對應的請求是否完成。如果未指定事務id,就判斷最后一個請求是否完成。

    Ext.data.Record
        
    Ext.data.Record就是一個設定了內部數據類型的對象,它是Ext.data.Store的最基本組成部分。如果Ext.data.Store看作是二維表,那么它的每一行就對應一個Ext.data.Record實例。
     1var PersonRecord = Ext.data.Record.create({
     2    {name:'name',type:'string'},
     3    {name:'sex',type:'int'}
     4}
    );
     5
     6var boy = new PersonRecord({
     7    name:'boy',
     8    sex:0
     9}
    );
    10
    11alert(boy.data.name);
    12alert(boy.data['name']);
    13alert(boy.get('name'));
    14
    15boy.data.name = 'boy name';
    16boy.data['name'] = 'boy name';
    17boy.set('name','boy name');

         實例中,15--17行都對屬性賦值,但建議使用set()方法。因為set()函數會判斷屬性值是否發生了變化,如果改變了,就要將當前對象的dirty屬性設置為true,并將修改之前的原始值放入modified對象中,供其他函數調用。
        Record的屬性數據被修改后,可以執行如下幾種操作:
        commit():這個函數的效果是設置dirty為false,并刪除modified中保存的原始數據。
        reject():這個函數的效果是將data中已經修改的屬性值恢復為modified的原始數據,然后設置dirty為false,并刪除保存在原始數據的modified對象。
        getChanges():這個函數會把data中經過修改的屬性和數據放在一個JSON對象并返回。
        我們還可以調用isModified()判斷當前record中的數據是否被修改。還可以使用copy()函數復制record實例。

    Ext.data.Store
        
    Ext.data.Store中有一個Ext.data.Record數組,所有數據都存放在這些Ext.data.Record實例中。
    //Ext.data.Store的基本用法
    var data = [
        ['boy',
    0],
        ['girl',
    1]
    ];

    var store = new Ext.data.Store({
        proxy:
    new Ext.data.MemoryProxy(data),
        render:
    new Ext.data.ArrayReader({}, PersonRecord)
    }
    );
    store.load();
        每個store最少需要兩個組件的支持,分別是proxy和reader,proxy用于從某個途徑讀取原始數據,reader用于將原始數據轉換成Record實例。實例中使用Ext.data.MemoryProxy和Ext.data.ArrayReader,將data數組中的數據轉換成對應的幾個PersonRecord實例,然后放入store中。store創建完畢后,執行store.load()實現這個轉換過程。

    //對name字段進行降序排列
    var store = new Ext.data.Store({
        proxy:
    new Ext.data.MemoryProxy(data),
        reader:
    new Ext.data.ArrayReader({},PersonRecord),
        sortInfo:
    {field:'name',direction:'DESC'}
    }
    );

     1//更新store中的數據
     2store.add(new PersonRecord({
     3    name:'other',
     4    sex:0
     5}
    ));
     6
     7//add()也可以添加一個record數組
     8store.add([new PersonRecord({
     9    name:'other1',
    10    sex:0
    11}
    ),new PersonRecord({
    12    name:'other2',
    13    sex:1
    14}
    )]);
    15
    16//add()方法會將數據添加入最后一條數據,這樣破壞了原本的排序方式
    17//addSorted()可以保證數據有序
    18store.addSorted(new PersonRecord({
    19    name:'other',
    20    sex:0
    21}
    ));
    22
    23//使用insert()指定插入位置
    24store.insert(3,new PersonRecord({
    25    name:'other',
    26    sex:0
    27}
    ));
    28
    29//刪除操作
    30store.remove(store.getAt(0));
    31store.removeAll();
    32
    33//修改數據
    34store.getAt(0).set('name','xxx');
    35
    36

        修改record的內部數據之后有兩種選擇:執行rejectChanges()撤銷所有修改,將修改過的record恢復到原來的狀態;執行commitChanges()提交數據修改。在執行撤銷和提交操作之前,可以使用getModifiedRecords()獲得store中修改過的record數組。與修改數據相關的參數是pruneModifiedRecoreds,如果將它設置為true,當每次執行刪除或reload操作時,都會清空所有修改。這樣,在每次執行刪除或reload操作之后,getModifiedRecords()返回的就是一個空數組,否則仍然會得到上次修改過的record記錄。

    1store.load({
    2    params:{start:0,limit:20}  //參數
    3     callback:function(records,options,success){
    4        Ext.Msg.alert('info','加載完畢');  //回調函數
    5}

    6    scope:store,
    7    add:true
    8}
    );
        callback是加載完畢時執行的回調函數,records參數表示獲得的數據;options表示執行load()時傳遞的參數,success表示加載是否成功。
        為store加載數據之后,有時不需要把所有的數據都顯示出來,這是可以使用函數filter和filterBy對store中的數據進行過濾,只顯示符合條件的部分;如果想取消過濾,則使用clearFilter()函數。
        store還有其他一些有用的函數:
        collect(String dataIndex, [Boolean allowNull], [Boolean bypassFilter]):Array 獲得指定的dataIndex對應的那一列的數據。當allowNull參數為true時,返回的結果中可能會包含null, undefined或空字符串,否則collect函數會自動將這些空數據過濾掉。當bypassFilter參數為true時,collect的結果不會受查詢條件的影響,無論查詢條件是什么都會忽略掉,返回的信息是所有的數據
        getTotalCount():用于翻頁時獲得后臺傳遞過來的數據總數。如果沒有設置翻頁,getTotalCount()結果與getCount()相同,都是返回當前的數據總數。
        indexOf(Ext.data.Record record)和indexOfId(String id)函數根據record或record的id獲得record對應的行號。
        loadData(object data,[Boolean append])從本地JavaScript變量中讀取數據,append為true時,將讀取的數據附加到原數據后,否則執行整體更新。
        Sum(String property, Number start, Number end):用于計算某一列從start到end的總數

    MemoryProxy
        
    MemoryProxy只能從JavaScript對象獲得數據,可以直接把數組,或JSON和XML格式的數據交給它處理。
    HttpProxy
        
    HttpProxy使用Http協議,通過Ajax去后臺取數據,構造它時需要設置url:'xxx.jsp'參數。需要注意的是,HttpProxy不支持跨域,只能從同一域中獲取數據。如果想跨域,參考ScriptTagProxy。
    ScriptTagPrxoy
       
    ScriptTagProxy的用法幾乎和HttpProxy一樣,var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
        前臺看不出它是如何支持跨域的,我們還需要在后臺進行相應的處理,如:
    1String cb = request.getParameter("callback");
    2response.setContentType("text/javascript");
    3Writer out = response.getWriter();
    4out.write(cb + "(");
    5out.print("[" + 
    6    "['id1','name1','descn1']" +
    7    "['id2','name2','descn2']" +
    8"]");
    9out.wirte(");");
        其中的關鍵就在于從請求中獲得的callback參數,這個參數叫做回調函數。ScriptTagProxy會在當前的HTML頁面添加一個<script type="text/javascript" scr="xxx.jsp"></script>標簽,然后把后臺返回的內容添加到這個標簽中,這樣就可以解決跨域訪問數據的問題。為了讓后臺返回的內容可以再動態生成的標簽中運行,EXT會生成一個名為callback的回調函數,并把回調函數的名稱傳遞給后臺,由后臺生成callback(data)形式的響應內容,然后返回給前臺自動運行。   

    posted on 2009-10-27 11:00 Brian 閱讀(1398) 評論(1)  編輯  收藏

    評論

    # re: ExtJs----數據存儲與傳輸[未登錄] 2012-02-29 17:01 BECKY

    最近正在學習extjs .有一點讓我很困惑。
    grid.getStore().getProxy().extraParams['name']='張三'。
    我查找文檔 并沒有發現Ext.data.proxy.Proxy 有extramParams的使用。
    麻煩您幫忙解答一下。謝謝!  回復  更多評論   


    只有注冊用戶登錄后才能發表評論。


    網站導航:
     

    公告


    導航

    <2009年10月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    統計

    常用鏈接

    留言簿(4)

    隨筆分類

    隨筆檔案

    收藏夾

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 国产精品亚洲一区二区在线观看| 亚洲日韩精品无码专区| 男女一进一出抽搐免费视频| 国产区卡一卡二卡三乱码免费| 亚洲人成网站18禁止| 国产精品国产午夜免费福利看| 亚洲成av人片在线天堂无| 在线视频免费国产成人| 成人午夜影视全部免费看| 亚洲午夜精品一级在线播放放 | 亚洲精品国产情侣av在线| 黄色免费网站网址| 亚洲乱码一区二区三区国产精品| 91九色精品国产免费| 亚洲精品一二三区| 国产午夜鲁丝片AV无码免费| 永久免费精品影视网站| 亚洲中文字幕在线乱码| 四虎影视在线影院在线观看免费视频 | 亚洲精品国产精品国自产观看| 一区二区三区视频免费| 亚洲αv久久久噜噜噜噜噜| 91精品国产免费入口| 亚洲 日韩经典 中文字幕| 午夜免费福利在线| 国产精品永久免费视频| 国产亚洲精品精华液| **真实毛片免费观看| 亚洲日韩一中文字暮| 亚洲国产成人乱码精品女人久久久不卡 | 妞干网免费视频观看| 五月天婷婷精品免费视频| 亚洲成av人在线视| 在线jlzzjlzz免费播放| 一级特黄录像免费播放中文版 | 亚洲AV无码成人专区| 免费a级黄色毛片| 国产精品免费观看调教网| 亚洲天堂2017无码中文| 亚洲综合色视频在线观看| 日韩国产免费一区二区三区|