ext data
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()で判断する
==================================================================================
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
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
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>