9c8869,调教坏男人,向华强是不是黑社会
本文内容
• Store.getAt(…) 和 Store.getById(…)
• Store.getCount(…) 和 getTotalCount() 以及 Store.each(…)
• Store.filter(…) 和 Store.filterBy(…)
• Store.find(…) 和 Store.findBy(…) 以及 Store.findExact(…)
• Store.queryBy(…)
Ext.Net 框架是用 .net 封装的 Ext JS。在 Ext.Net 程序中，仍然可以使用 Ext JS 写脚本。虽然用 Ext.Net 开发比直接用 Ext JS 方便、快捷很多，比如，你可以将 Ext.Net 控件直接拖放页面上……可若想更好地使用 Ext.Net 框架，能在程序中写 Ext JS 脚本很有必要。
GridPanel 标记
假设页面有个 Ext.Net.Store 和 Ext.Net.GridPanel 控件，其中 GridPanel 控件不分页，并且在 Page_Load 事件中已加载数据。标记如下：
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="500" Title="植物">
<Store>
<ext:Store ID="Store1" runat="server" OnRefreshData="MyRefreshData" GroupField="Light">
<Reader>
<ext:JsonReader IDProperty="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Common" />
<ext:RecordField Name="Botanical" />
<ext:RecordField Name="Zone" Type="Int" />
<ext:RecordField Name="ColorCode" />
<ext:RecordField Name="Light" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Availability" Type="Date" />
<ext:RecordField Name="Indoor" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Key" DataIndex="Id" />
<ext:Column Header="Common Name" DataIndex="Common" />
<ext:Column Header="Light" DataIndex="Light" />
<ext:Column Header="Price" DataIndex="Price" Align="right" Groupable="false" />
<ext:Column Header="Price" DataIndex="Price" Align="right" Groupable="false" />
<ext:DateColumn Header="Available" DataIndex="Availability" Groupable="false" Format="yyyy-MM-dd" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GroupingView ID="GroupingView1" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
那么在客户端用 Ext JS 编写脚本，遍历、检索、过滤 Ext.Net.Store 将很有用。尤其是那些实时性不强，用户只操作自己的数据。
Store.getAt(…) 和 Store.getById(…)
getAt( Number index ) : Ext.data.Model
getById( String id ) : Ext.data.Model
Store.getAt(…) 方法根据索引返回 Record。
Store.getById(…) 方法根据你在 Store 中设置的 Id 返回 Record。其中，Record 是脚本类。页面放几个按钮，后边的演示类似，如下所示：
<p style="float: left">
<p>
<ext:Button ID="Button1" runat="server" Icon="Accept" Text="演示 store.getAt">
<Listeners>
<Click Handler="yourGetAt(Store1);" />
</Listeners>
</ext:Button>
</p>
<br />
<p>
<p style="float: left">
<ext:TextField ID="TextField1" runat="server" FieldLabel="'Id' 字段" Text="7">
</ext:TextField>
</p>
<p style="float: left">
<ext:Button ID="Button2" runat="server" Icon="Accept" Text="演示 store.getById">
<Listeners>
<Click Handler="yourGetById(Store1, TextField1.getValue());" />
</Listeners>
</ext:Button>
</p>
</p>
</p>
脚本如下：
<script type="text/javascript">
var yourGetAt = function(store) {
var vals = [];
for (var i = 0; i < store.getCount(); i++) {
vals.push(store.getAt(i).data.Id + "-" + store.getAt(i).data.Common);
}
Ext.net.Notification.show({
iconCls: 'icon-information',
pinEvent: 'click',
height: 500,
width: 500,
html: vals.join(','),
title: 'Title'
});
};
var yourGetById = function(store, getByIdValue) {
var record = store.getById(getByIdValue);
alert(record.data.Id + " " + record.data.Common);
}
</script>
Store.getCount(…) 和 getTotalCount() 以及 Store.each(…)
getCount( ) : Number
each( Function fn, [Object scope] ) : void
Store.getCount(…) 可以获得已缓存的记录数量。若使用分页，则这个数量不是数据集的全部数量。若使用 Reader 数据对象包含数据集的大小，则 getTotalCount 函数返回数据集的大小。也就是说，若使用分页，则该方法返回当前页的数据大小。
Store.each(…) 对缓存中的每个 Record 调用你指定的函数。
<script type="text/javascript">
var yourGetCount = function(store) {
var vals = [];
//for (var i = 0; i < store.getTotalCount(); i++) {
// vals.push(store.getAt(i).data.Id + "-" + store.getAt(i).data.Common);
//}
for (var i = 0; i < store.getCount(); i++) {
vals.push(store.getAt(i).data.Id + "-" + store.getAt(i).data.Common);
}
Ext.net.Notification.show({
iconCls: 'icon-information',
pinEvent: 'click',
height: 500,
width: 500,
html: vals.join(','),
title: 'Title'
});
};
var yourEach = function(store) {
var vals = [];
store.each(function(r) {
vals.push(r.data.Id + "-" + r.data.Common);
}, this);
Ext.net.Notification.show({
iconCls: 'icon-information',
pinEvent: 'click',
height: 500,
width: 500,
html: vals.join(','),
title: 'Title'
});
}
</script>
Store.filter(…) 和 Store.filterBy(…)
filter( Mixed filters, String value ) : void
filterBy( Function fn, [Object scope] ) : void
Store.filter(…) 根据你指定的字段，过滤并加载数据集。
Store.filterBy(…) 根据过滤函数来过滤。Store 中的每个 Record 都会调用该过滤函数。若函数返回 true，则包含该 Record，否则过滤掉。
<script type="text/javascript">
var yourFilter = function(store, filterValue) {
store.filter('Common', filterValue);
};
var yourFilterBy = function(store, filterByValue) {
store.filterBy(function(r) {
return r.data.Light == filterByValue;
}, this);
}
</script>
Store.find(…) 和 Store.findBy(…) 以及 Store.findExact(…)
find( String fieldName, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive], Boolean exactMatch ) : Number
findBy( Function fn, [Object scope], [Number startIndex] ) : Number
findExact( String fieldName, Mixed value, [Number startIndex] ) : Number
Store.find(…) 通过一个指定的字段值，在 Store 中查找第一个匹配的 Record 的索引。
Store.findBy(…) 通过一个指定的函数，在 Store 中查找第一个匹配的 Record 的索引。如果函数为 true，则返回该 Record。
Store.findExact(…) 通过一个指定的字段值，在 Store 中查找第一个匹配的 Record 的索引。
<script type="text/javascript">
var yourFind = function(store, findValue) {
var index = store.find('Id', findValue, 0, true, true, true);
if (index < 0)
alert('未找到.');
else
alert(store.getAt(index).data.Id + " " + store.getAt(index).data.Common);
};
var yourFindBy = function(store, findByValue) {
var index = store.findBy(function(r) {
return r.data.Light == findByValue;
}, this, 0);
if (index < 0)
alert('未找到.');
else
alert(store.getAt(index).data.Id + " " + store.getAt(index).data.Common);
};
var yourFindExact = function(store, findExactValue) {
var index = store.findExact('Light', findExactValue, 0);
if (index < 0)
alert('未找到.');
else
alert(store.getAt(index).data.Id + " " + store.getAt(index).data.Common);
}
</script>
Store.queryBy(…)
queryBy( Function fn, [Object scope] ) : MixedCollection
通过一个过滤函数，在 Store 中，查找已缓存的 Recors。Store 中的每个 Record 都会调用过滤函数。若该函数返回 true，则该 Record 包含在结果中。
Store.queryBy(…) 与 Store.find*** 的区别：前者返回一个集合，该集合是一个脚本类，不同于 Records，而后者只是返回索引；前者返回所有匹配过滤函数的 Record，而后者只是返回第一个匹配的 Record。
<script type="text/javascript">
var yourQueryBy = function(store, queryByValue) {
var records = store.queryBy(function(record) {
return record.data.Light == queryByValue;
}, this);
if (records.length > 0) {
var vals = [];
Ext.each(records.items, function(r) {
vals.push(r.data.Id + "-" + r.data.Common);
}, this);
Ext.net.Notification.show({
iconCls: 'icon-information',
pinEvent: 'click',
height: 500,
width: 500,
html: vals.join(','),
title: 'Title'
});
}
else {
alert('未找到.');
}
};
</script>
下载 Demo
摘自 IGod接口
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
我要评论
网友评论