ext data

8097 ワード

ext.data  store reader proxy
Ext.data.Recordは内部データ型が設定されたオブジェクトで、storeの最も基本的な構成部分であり、storeを2次元テーブルと見なすと、recordは対応する行である
recordの主な機能は、データを保存し、内部データが変更されたときに変更の状態を記録することであり、変更前の元の値を保持することもできます.
var PersonRecord=Ext.data.Record.create([
    {name:'name',type:'string'},
    {name:'sex',type:'int'}
]);
PersonRecordは、name sexの2つの属性を含む新しい定義のタイプです.
次に「new」を使用してpersonRecordインスタンスを作成します.
var boy=new PersonRecord({
   name:'boy',
   sex:0
});
以下の3つを見て、name属性を得ることができます
alert(boy.data.name);
alert(boy.data['name']);
alert(boy.get('name'));
boy属性値の変更にはset()関数を使用する必要があります
boy.set('name','body name');
set関数は属性値が変化するかどうかを判断し、変化すると現在のオブジェクトのdirty属性値をtrueに設定し、変更前の値をmodifyオブジェクトに入れ、他の関数で使用し、変更後に実行します.
commit()dirtyをfalseに設定modifyオブジェクトの値を削除
reject()元の値を元に戻す
getChanges()変更を取得した部分の戻りタイプは{name:'body name'}
isModified()は、現在のレコードの値が変更されているかどうかを判断します.
ext.data.Store
Record配列が含まれています.少なくとも2つのコンポーネントサポートが必要です.proxy reader proxyにあるルートからデータを取得し、readerは元のデータをrecordインスタンスに変換します.
var data=[['boy',0],['girl',1]];
var store=new Ext.data.Store({
   proxy: new Ext.data.MemoryProxy(data);
  reader:new Ext.data.ArrayReader({},PersonRecord)
});
srore.load();
データのソート
var store=new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader:new Ext.data.ArrayReader({},PersonRecord),
   sortInfo:{fiels:name,direction:'DESC'}
});
ソートに関するパラメータにはremoteSortがあり、このパラメータはバックグラウンドソート機能を実現し、
store.setDefaultSort('name','DESC');
ソート情報の取得:getSortState()は{field:[name],direction:[DESC]}jsonオブジェクトを返す
RemoteSortもあります.このパラメータはバックグラウンドソート機能を実現し、remoteSort:true storeがバックグラウンドにデータを要求するときにsort,dirの2つのパラメータを自動的に追加し、sort()を実行するたびにバックグラウンドにデータを再ロードし、ローカルデータを並べ替えることはできません.
storeからデータを取得
store.getAt(0).get('name')
for(var i=0;i   var record=store.getAt(i);
   alert(record.get('name');
}
または
store.each(function(record){
    alert(record.get('name');
}
getRange()関数を使用して複数のrecordを取得する練習もできます.終了時に開始するインデックス値を設定するだけです.
var records=store.getRange(0,1);
for(var i=0;i    var record=records[i];
   alert(record.get('name');
}
レコードidを知らない場合は、レコードに基づいて
find(String property, String/RegExp value,[Number startIndex],[Boolean anyMatch],[Boolean caseSensitive]):Number
検索を表す最初のフィールド名.2番目のvalueが一致する文字列または正規表現、3番目の行から
4番目がTRUEの場合、最初からマッチングを開始する必要はありません.5つ目はTRUEが大文字と小文字を区別するものである.前の2つは必須です
var index=store.find('name','g');
alert(store.getAt(index).get('name');
find対応とfindBy
findBy(Function fn,[Object scope],[Nmber index])Number
index=store.findBy(function(record,id){
    return record.get('name')=='girl'&&record.get('sex')==1;
});
alert(store.getAt(index).get('name'));
また、queryとqueryByでstoreをクエリーすることもできます.findとは異なり、query queryByは検索したデータを含むMixCollectionオブジェクトを返します.
alert(store.query('name','boy'));
alert(store.queryBy(function(record){
     return record.get('name')=='girl'&& record.get('sex')==1;
}));
storeのデータの更新
add(Ext.data.Record[]records)はstoreの末尾に1つ以上のrecordを追加し、パラメータはrecordインスタンスであってもよい
store.add(new PersonRecord({
      name: 'other',
      id:   0
}));
レコード配列を追加し、
store.add([new PersonRecord({
      name:'other1',
      sex:0
}),
new PersonRecord({
     name:'other2',
     sex: 0
})]);
add関数を使用すると、元のソートが破壊されます.
したがってaddSorted()を使用すると、新しいデータが追加された直後にstoreがソートされ、storeのデータが秩序正しく表示されることが保証されます.
store.addSorted(new PersonRecord({
    name:'1111',
    sex:1
}));
挿入:store.insert(3,new PersonRecord({
    name:'other',
    sex:0
}));//配列同様
削除:store.remove(store.getAt(0));
     store.removeAll();
storeでは、行のレコードを変更する操作は特に提供されていません.まずレコードを取得する必要があります.このレコードの内部データの変更はstoreに直接反映されます.
    store.getAt(0).set('name','XXXXX');
修正後、2つの選択肢があります:1.rejectChanges()は、すべての変更を取り消し、最初の金額状態に戻ります.
                       2.commitChanges()修正のコミット
元に戻すかコミットする前に、storeで変更されたrecord配列をgetModifiedRecords()で取得できます.
データの変更に関するパラメータはpruneModifiedRecordsであり、trueに設定すると削除、reload操作が実行されるたびにすべてのデータが空になります.これにより、getModifiedRecords()は空の配列を返します.そうしないと、前回変更したrecordレコードになります.
データのロードと表示
store.load({
params:{start:0,limit:20},//ロード時に追加パラメータを送信
  callback:function(records,options,success){
//recordsで取得したパラメータ
//options load()伝達を実行するパラメータ
//successが正常にロードされたかどうか
    Ext.Msg.alert('info','ロード完了'); 
},
scope:store//コールバック関数実行時の役割ドメイン
add:true//TRUEに元のstoreデータの末尾に追加します.元のデータを空にしないと、
//得られたデータをstoreに入れる
});
通常storeのデータを初期化するためにload()関数は一度だけ実行し、paramsパラメータで使用するパラメータを指定した場合、後でreload()を実行してデータを再ロードする場合、
storeは、前回load()に含まれるparamsパラメータの内容を自動的に使用します.
フィルタデータfilterの使用方法とfind
store.filter('name','boy');
store.filter(function(record){
      return record.get('name')=='girl'&& record.get('sex')==-1;
});
フィルタを解除し、すべてのデータを表示し、clearFilter()を呼び出します.
store.clearFilter();
storeにフィルタが設置されているか否かを判断し、isFiltered()で判断する
==================================================================================
  
 <script type="text/javascript" src="../../ext-all.js"></script>
 <script type="text/javascript">
Ext.onReady(function(){
     var cm = new Ext.grid.ColumnModel([
        {header:'  ',dataIndex:'id',width:35},
        {header:'  ',dataIndex:'name',width:80},
        {header:'  ',dataIndex:'descn',width:120}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();
    var grid = new Ext.grid.GridPanel({
       autoHeight: true,
          renderTo: 'grid',
          store: store,
          cm: cm,
          viewConfig: {
            forceFit: true
         }
        
       
    });
   grid.on('mouseover',function(e){//  mouseover  
  var index = grid.getView().findRowIndex(e.getTarget());//  mouse   target        
  if(index!==false){//         ,(       target           false)
   var record = store.getAt(index);//    record   
   var str = Ext.encode(record.data);//       ,          ,        
   var rowEl = Ext.get(e.getTarget());// target   Ext.Element  
   rowEl.set({
    'ext:qtip':str  //    tip  
   },false);
   
  }
   });
   
    var win = new Ext.Window({
     id:'window',
        el:'window-win',
        layout:'fit',
        width:500,
        height:270,
        closeAction:'hide',
        items: [grid]

    });
    win.show();
 Ext.QuickTips.init();//  ,         

});
        </script>