How to set Component's style at GridPanel(ComponentColumn Editor) in Ext.Net 2.0

  1. #1

    How to set Component's style at GridPanel(ComponentColumn Editor) in Ext.Net 2.0

    Hi Ext.Net term,

    In Ext.Net 1.x, I can use MainGrid.getView().editors[0][1] to get the component I specifically want to set the style.
    But I can't use the same method to retrieve the component from Grid in Ext.Net 1.x.
    Thanks for your reply in advance.


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    //new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                    //new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                    //new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                    //new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                    //new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                    //new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                    //new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                    //new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 9, 9, "Text 9", DateTime.Now.Date }
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>ComponentColumn Editor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
        <style>
            .myclass {background-color:green; text-align:right; border:1 solid black; font-size: 8pt; padding: 2px; height:20px; cursor: hand;}
        </style>
        <script type="text/javascript">
            var change = function (src) {
                var rowIndex = src.column.rowIndex;
                //Ext.Net1.x: set TextField's style
                //var ctl4Detail = MainGrid.getView().editors;
                //ctl4Detail[rowIndex][1].container.dom.firstChild.className = "myclass";
            }
        
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>ComponentColumn as Editor</h1>
    
            <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                Title="ComponentColumn Editor" 
                Width="600" 
                Height="300">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="IntField" Type="Int" />
                                    <ext:ModelField Name="ComboField" Type="Int" />
                                    <ext:ModelField Name="TextField" Type="String" />
                                    <ext:ModelField Name="DateField" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>                                
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:ComponentColumn ID="ComponentColumn1" 
                            runat="server" 
                            Editor="true"
                            DataIndex="IntField"
                            Flex="1"
                            Text="Integer">
                            <Component>
                                <ext:NumberField ID="NumberField1" runat="server">
                                    <Listeners>                                 
                                        <Change Handler="change(this);" />
                                    </Listeners>
                                </ext:NumberField>
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn ID="ComponentColumn3" 
                            runat="server" 
                            Editor="true"
                            DataIndex="TextField"
                            Flex="1"
                            Text="Text">
                            <Component>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>          
            </ext:GridPanel>  
        </form>
    </body>
    </html>
  2. #2
    Hey, it's been a while. Is there anybody can help me deal with this problem.
    I'll be really appreciate. Thanks
    Last edited by geoffrey.mcgill; Jun 25, 2014 at 4:39 AM.

Similar Threads

  1. Replies: 0
    Last Post: May 01, 2013, 4:35 PM
  2. [CLOSED] ComponentColumn editor does not save values
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2013, 8:55 AM
  3. [CLOSED] How to use DirectEvents in ComponentColumn as Over Editor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 30, 2012, 1:00 PM
  4. [CLOSED] Razor - ComponentColumn as Over Editor
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 23, 2012, 11:37 AM
  5. ComponentColumn Editor Bug?
    By Doug.Morrow in forum 2.x Help
    Replies: 6
    Last Post: Aug 08, 2012, 7:30 PM

Posting Permissions