Ext.Net/Ext JS_Ext.Net.Store检索

本文内容
• 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>

下载 Demohttp://up.2cto.com/2012/0425/20120425091225414.rar



摘自 IGod接口