GridView Headergrouprows in combination with headerrow does not display well

Page 2 of 2 FirstFirst 12
  1. #11

    get Combobox control

    Hi Daniil,

    One more question, if you start from your example, the combobox is rendered to the gridpanel headergrouprow. How can i get this control back? i need to now the selected value when something changes.

    Thanx!
  2. #12
    Quote Originally Posted by Birgit View Post
    Hi Daniil,

    One more question, if you start from your example, the combobox is rendered to the gridpanel headergrouprow. How can i get this control back? i need to now the selected value when something changes.

    Thanx!
    I don't understand the requirement.

    To get a selected value you could use just:

    ComboBox1.getValue()
  3. #13
    I mean from the server side i want to get the control or push a javascript code to the client side,something like: "#{ComboBox1}.getSelectedItem().value". But because the combobox is rendered to the grid header, i can't find the control from server-side or via javascript.

    Thanx!
  4. #14
    Hi,

    Here is an example:

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void GetValue(object sender, DirectEventArgs e)
        {
            string value = X.GetCmp<ComboBox>("ComboBox1").SelectedItem.Text;
            X.Msg.Alert("Server", value).Show();
        }    
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
     
        <script type="text/javascript">
            var renderCombo = function(grid) {
                var el = grid.getView().el.child(".x-grid3-td-1");
                el.update("");
     
                new Ext.form.ComboBox({
                    id: "ComboBox1",
                    renderTo: el,
                    displayField: "state",
                    triggerAction: "all",
                    valueField: "abbr",
                    store: new Ext.data.Store({
                        autoLoad: true,
                        reader: new Ext.data.ArrayReader({
                            fields: [{ name: "abbr" }, { name: "state" }, { name: "nick"}]
                        }),
                        proxy: new Ext.data.MemoryProxy(
                            [
                                [60, "Alabama", "The Heart of Dixie"],
                                [1, "Alaska", "The Land of the Midnight Sun"],
                                [0, "Arizona", "The Grand Canyon State"],
                                [3, "Arkansas", "The Natural State"]
                            ],
                            false)
                    })
                });
            }
        </script>
     
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="ComboBox1 = null;"/>
            </Listeners>
        </ext:ResourceManager>
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="general" />
                                <ext:RecordField Name="FirstName" />
                                <ext:RecordField Name="SecondName" />
                                <ext:RecordField Name="ThirdName" />
                                <ext:RecordField Name="FourthName" />
                                <ext:RecordField Name="FifthName" />
                                <ext:RecordField Name="SixthName" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column DataIndex="general" Header="general" />
                    <ext:Column DataIndex="FirstName" Header="First Name" />
                    <ext:Column DataIndex="SecondName" Header="Second Name" />
                    <ext:Column DataIndex="ThirdName" Header="Third Name" />
                    <ext:Column DataIndex="FourthName" Header="Fourth Name" />
                    <ext:Column DataIndex="FifthName" Header="Fifth Name" />
                    <ext:Column DataIndex="SixthName" Header="Sixth Name" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander runat="server" />
            </Plugins>
            <View>
                <ext:GridView runat="server" ForceFit="true">
                    <HeaderGroupRows>
                        <ext:HeaderGroupRow>
                            <Columns>
                                <ext:HeaderGroupColumn ColSpan="1" />
                                <ext:HeaderGroupColumn ColSpan="1" />
                                <ext:HeaderGroupColumn Header="First & Second" ColSpan="2" Align="Center" />
                                <ext:HeaderGroupColumn Header="Thirth & Fourth" ColSpan="2" Align="Center" />
                                <ext:HeaderGroupColumn Header="Fifth & Sixth" ColSpan="2" Align="Center" />
                            </Columns>
                        </ext:HeaderGroupRow>
                    </HeaderGroupRows>
                    <Listeners>
                        <Refresh Handler="  if (ComboBox1) {
                                                if (Ext.isIE) {
                                                    ComboBox1.destroy();
                                                    renderCombo(this.grid);   
                                                } else {
                                                    var el = this.grid.getView().el.child('.x-grid3-hd-inner.x-grid3-hd-1');
                                                    el.replaceWith(ComboBox1.getEl().parent().dom);
                                                }
                                            }"/>   
                    </Listeners>
                </ext:GridView>
            </View>
            <Listeners>
                <ViewReady Handler="renderCombo(this);" />
            </Listeners>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Get combo's value from client side">
            <Listeners>
                <Click Handler="alert(ComboBox1.getValue());"/>
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Get combo's value from server side" OnDirectClick="GetValue" />
        </form>
    </body>
    </html>
  5. #15
    Quote Originally Posted by Birgit View Post
    I mean from the server side i want to get the control or push a javascript code to the client side,something like: "#{ComboBox1}.getSelectedItem().value". But because the combobox is rendered to the grid header, i can't find the control from server-side or via javascript.

    Thanx!
    There is no getSelectedItem() method in the ComboBox's client side API.

    ComboBox Client Side API
    http://dev.sencha.com/deploy/dev/doc....form.ComboBox
  6. #16
    The thread is related to this one.
    http://forums.ext.net/showthread.php?23353
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 2
    Last Post: Apr 19, 2013, 9:10 PM
  2. Replies: 4
    Last Post: Jul 30, 2012, 7:24 PM
  3. Replies: 1
    Last Post: Nov 16, 2010, 12:53 PM
  4. Replies: 1
    Last Post: Jun 09, 2010, 11:47 PM
  5. Replies: 1
    Last Post: May 18, 2010, 10:53 PM

Tags for this Thread

Posting Permissions