[CLOSED] Local datastore filtering param when getting data to combo in local mode

  1. #1

    [CLOSED] Local datastore filtering param when getting data to combo in local mode

    Hi,

    I would like to query a local datastore in a combo, with a "hidden" parameter.

    If you take this very much simplified example below:

    Before the combo is populated, i would like to pass a "TypeID=1" filter parameter, so the combo is only populated with the first 3 records, without having to repopulate the datastore.

    Can you help me in the right direction?

    <%@ Page Language="VB" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server" >
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not Ext.Net.X.IsAjaxRequest Then
                Dim l As New List(Of FooData)
                l.Add(New FooData(1, 1, "Record 1"))
                l.Add(New FooData(2, 1, "Record 2"))
                l.Add(New FooData(3, 1, "Record 3"))
                l.Add(New FooData(4, 20, "Record 4"))
                l.Add(New FooData(5, 20, "Record 5"))
                l.Add(New FooData(6, 20, "Record 6"))
                Me.Store1.DataSource = l
                Me.Store1.DataBind()
            End If
        End Sub
        Public Class FooData
            Public ID As Integer
            Public TypeID As String
            Public Name As String
            Public Sub New(ByVal ID As Integer, ByVal TypeID As Integer, ByVal Name As String)
                Me.ID = ID
                Me.TypeID = TypeID
                Me.Name = Name
            End Sub
        End Class
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
        </head>
        <body>
            <form id="form1" runat="server">
                <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
                <script type="text/javascript">
                  
                </script>
                <div>
                    <ext:Store ID="Store1" runat="server" SerializationMode="Complex">
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" Type="Int" />
                                    <ext:RecordField Name="Name" />
                                    <ext:RecordField Name="TypeID" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                    <ext:GridPanel runat="server" 
                                   ID="GridPanel1"
                                   Height="300"
                                   StripeRows="true"
                                   StoreID="Store1">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column ColumnID="TypeID" DataIndex="TypeID" Sortable="true" Header="TypeID" Width="75">
                                    <Editor>
                                        <ext:ComboBox ID="AssetTypeCombo" runat="server" 
                                                      Mode="Local" 
                                                      TriggerAction="All" 
                                                      StoreID="Store1" 
                                                      ValueField="ID"
                                                      DisplayField="Name">
                                        </ext:ComboBox>
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="ID" DataIndex="ID" Header="ID" />
                                <ext:Column ColumnID="Name" DataIndex="Name" Header="Name" />
                            </Columns>
                        </ColumnModel>
                    </ext:GridPanel>
                </div>
            </form>
        </body>
    </html>
    Last edited by Daniil; Nov 11, 2010 at 11:57 AM. Reason: [CLOSED]
  2. #2
  3. #3
    Hi Daniil

    Thanks for the quick reply.

    I've been looking through the examples, but i don't see any example of querying a local data store?
    In my example i want to query Store1, without having to re-bind the store - if that makes any sense?

    Perhaps i should also mention i am using a webservice to bind the grid and combo in my application, so i guess that makes it impossible to use ex. the DirectMethod.

    Basically it's because i already have the data on the page(in the store), and i don't want to re-query the database.
  4. #4
    Hi,

    To achieve your requirement it needs to override the ComboBox's query mechanism.

    Hope the following example will help you to realize how it works. See comments in .js code. Also please note that it's required a separate Store for a ComboBox to get it working.

    Example
    <%@ Page Language="VB" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not Ext.Net.X.IsAjaxRequest Then
                Dim l As New List(Of FooData)
                l.Add(New FooData(1, 1, "Record 1"))
                l.Add(New FooData(2, 1, "Record 2"))
                l.Add(New FooData(3, 1, "Record 3"))
                l.Add(New FooData(4, 20, "Record 4"))
                l.Add(New FooData(5, 20, "Record 5"))
                l.Add(New FooData(6, 20, "Record 6"))
                Me.Store1.DataSource = l
                Me.Store1.DataBind()
                Me.StoreCombo.DataSource = l
                Me.StoreCombo.DataBind()
            End If
        End Sub
        Public Class FooData
            Public ID As Integer
            Public TypeID As String
            Public Name As String
            Public Sub New(ByVal ID As Integer, ByVal TypeID As Integer, ByVal Name As String)
                Me.ID = ID
                Me.TypeID = TypeID
                Me.Name = Name
            End Sub
        End Class
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        <ext:ResourcePlaceHolder runat="server" />
    
        <script type="text/javascript">
    
            Ext.form.ComboBox.override({
                onTriggerClick: function() {
                    if (this.readOnly || this.disabled) {
                        return;
                    }
                    if (this.isExpanded()) {
                        this.collapse();
                        this.el.focus();
                    } else {
                        this.onFocus({});
                        if (this.triggerAction == 'all') {
                            this.doQuery(this.allQuery, true);
                        } else {
                            this.doQuery(this.typeId); //changed, before was this.doQuery(this.getRawValue());
                        }
                        this.el.focus();
                    }
                },
    
                doQuery: function(q, forceAll) {
                    q = Ext.isEmpty(q) ? '' : q;
                    var qe = {
                        query: q,
                        forceAll: forceAll,
                        combo: this,
                        cancel: false
                    };
                    if (this.fireEvent('beforequery', qe) === false || qe.cancel) {
                        return false;
                    }
                    q = qe.query;
                    forceAll = qe.forceAll;
                    if (forceAll === true || (q.length >= this.minChars)) {
                        if (this.lastQuery !== q) {
                            this.lastQuery = q;
                            if (this.mode == 'local') {
                                this.selectedIndex = -1;
                                if (forceAll) {
                                    this.store.clearFilter();
                                } else {
                                    this.store.filter('TypeID', q);    //changed, before was this.store.filter(this.displayField, q);
                                }
                                this.onLoad();
                            } else {
                                this.store.baseParams[this.queryParam] = q;
                                this.store.load({
                                    params: this.getParams(q)
                                });
                                this.expand();
                            }
                        } else {
                            this.selectedIndex = -1;
                            this.onLoad();
                        }
                    }
                }
            });
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Store ID="Store1" runat="server" SerializationMode="Complex">
            <Reader>
                <ext:JsonReader IDProperty="ID">
                    <Fields>
                        <ext:RecordField Name="ID" Type="Int" />
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="TypeID" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="StoreCombo" runat="server" SerializationMode="Complex">
            <Reader>
                <ext:JsonReader IDProperty="ID">
                    <Fields>
                        <ext:RecordField Name="ID" Type="Int" />
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="TypeID" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel runat="server" StoreID="Store1" Height="300">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column DataIndex="TypeID" Header="TypeID">
                        <Editor>
                            <ext:ComboBox 
                                runat="server"
                                StoreID="StoreCombo" 
                                Mode="Local" 
                                TriggerAction="Query"
                                ValueField="ID" 
                                DisplayField="Name">
                                <Listeners>
                                    <BeforeQuery Handler="delete queryEvent.combo.lastQuery;" />
                                </Listeners>
                            </ext:ComboBox>
                        </Editor>
                        <EditorOptions>
                            <Listeners>
                                <BeforeStartEdit Handler="this.field.typeId = value;" />
                            </Listeners>
                        </EditorOptions>
                    </ext:Column>
                    <ext:Column DataIndex="ID" Header="ID" />
                    <ext:Column DataIndex="Name" Header="Name" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    P.S. I not sure what the meaning of the following column. Maybe if you clarify what you are trying to achieve we can suggest you an alternative solution.

    What is the meaning?
    <ext:Column 
        ColumnID="TypeID" 
        DataIndex="TypeID" 
        Sortable="true" 
        Header="TypeID" 
        Width="75">
        <Editor>
            <ext:ComboBox 
                ID="AssetTypeCombo" 
                runat="server"
                Mode="Local"
                TriggerAction="All"
                StoreID="Store1"
                ValueField="ID"
                DisplayField="Name">
            </ext:ComboBox>
        </Editor>
    </ext:Column>
    Last edited by Daniil; Nov 11, 2010 at 11:33 AM.
  5. #5
    Hi Daniil,

    Thank you very much! - this was exactly what i needed :-)

Similar Threads

  1. Replies: 11
    Last Post: Jun 13, 2012, 4:53 PM
  2. Replies: 0
    Last Post: Aug 16, 2010, 10:28 PM
  3. [CLOSED] [1.0] Gridview local data paging with remote data
    By BerndDA in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 15, 2010, 10:29 AM
  4. Replies: 0
    Last Post: May 11, 2010, 10:35 PM
  5. remote and local filtering
    By marcmvc in forum 1.x Help
    Replies: 0
    Last Post: Oct 13, 2009, 12:38 PM

Tags for this Thread

Posting Permissions