[CLOSED] [#371] panel Collapsible error

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [#371] panel Collapsible error

    my question is :my page has a gridpanel and a Collapsible panel in which there is a usercontrol;
    this uc has a button,and directevent;
    when the panel Collapsed there is an error and button is no showing ,but Collapsing sencond time it can do well. why ,please help me
    <ext:Panel ID="Panel1" runat="server" 
    Region= "South"
    Height="200" 
    Title="South"
    Floatable="true"
    Collapsed="true" 
    Collapsible="true">
    <Content>
    <uc1:UCOne ID="UCOne1" runat="server" OnSubmitUserEvent="event1_Submit">
    </uc1:UCOne>
    </Content>
    </ext:Panel>

    UCOne.ascx

    <ext:Button ID="Button1" runat="server" Text="Test">
    <DirectEvents>
    <Click OnEvent="SaveData">
    <ExtraParams>
    <ext:Parameter Name="Params" Value="Button1"></ext:Parameter>
    </ExtraParams>
    </Click>
    </DirectEvents>
    </ext:Button>
    <ext:Label ID="Label1" runat="server" Icon="Application" />
    Last edited by fabricio.murta; Jun 08, 2018 at 8:37 PM.
  2. #2
    Hi @ping,

    Welcome to the Ext.NET forums!

    Could you, please, provide a full test case? To copy, paste and run.
  3. #3

    re:

    Quote Originally Posted by Daniil View Post
    Hi @ping,

    Welcome to the Ext.NET forums!

    Could you, please, provide a full test case? To copy, paste and run.
    UCOne.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCOne.ascx.cs" Inherits="UCOne" %>
    
    
    <%--<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
    <Items>--%>
    <%--<ext:Panel ID="Panel1" runat="server"  Region="South"  Height="200"  Title="South" Floatable="false"  Collapsed="true"  Collapsible="true">--%>
    
    <ext:Button ID="Button1" runat="server" Text="测试">
    <DirectEvents>
    <Click OnEvent="SaveData">
    <ExtraParams>
    <ext:Parameter Name="Params" Value="Button1"></ext:Parameter>
    </ExtraParams>
    </Click>
    </DirectEvents>
    </ext:Button>
    <ext:Label ID="Label1" runat="server" Icon="Application" />
    
    <%--</Items>
    </ext:Panel>--%>
    <%--</Items>
    </ext:Viewport>--%>
    UCOne.ascx.cs
    using System;
    using System.Collections.Generic;
    using Ext.Net;
    public partial class UCOne : System.Web.UI.UserControl
    {
        public delegate void SubmitUserHandler(object sender, Class1 e);
         public event SubmitUserHandler SubmitUserEvent;  
     
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
        protected void SaveData(object sender, EventArgs e)
        {
            Class1 args = new Class1(this.Button1.Text, "P");
            SubmitUserEvent(this, args);
        }
    
    }
    Default.aspx contents:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Register src="UCOne.ascx" tagname="UCOne" tagprefix="uc1" %>
    
    <script runat="server" >
       protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                this.BindData();
    
            }
        }
    
    
        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindData();
        }
    
        protected void MyData_Refresh1(object sender, StoreReadDataEventArgs e)
        {
    
        }
    
        protected void test(object sender, DirectEventArgs e)
        {//信息编辑
    
    
    
        }
    
        protected void test1(object sender, DirectEventArgs e)
        {
    
        }
    
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now }
                };
            }
        }
    
        private object[] Data1
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "McDonalds Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void event1_Submit(object sender, Class1 e)
        {
       
            string userName = e.UserName;
            string password = e.Password;
          Store store = this.GridPanel1.GetStore();
            
            store.DataSource = this.Data1;
            store.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
                   
            var prepareCommands = function (grid, commands, record, row) {
                if (record.get("price") >= 50) {
                    commands.push({
                            command : "accept",                        
                            iconCls : "icon-accept"                                         
                    });               
                }            
            };
            
            //in PrepareCommand we can modify command
            var prepareCommand = function (grid, command, record, row) {
    
                if (command.command == 'Edit' && record.get("price") < 50) {
                    command.hidden = true;
                    command.hideMode = 'display'; //you can try 'visibility' also                 
                }            
            };
            
            var prepareCellCommand = function (grid, command, record, row, col, value) {
                if (command.command == 'Dollar' && record.get("price") < 50) {
                    command.iconCls = "icon-moneyeuro";               
                }   
            };
            
            var prepareCellCommands = function (grid, commands, record, row, col, value) {
                if (record.get("price") >= 50) {
                   commands.push({
                       iconCls : "icon-moneyadd",
                       command : "moneyadd"
                   });                
                }
            };
    
            var getAdditionalData = function (data, idx, record, orig) {            
                return {
                    rowBodyColspan : record.fields.getCount(),
                    rowBody: Ext.String.format('<div style=\'padding:0 5px 5px 5px;\'>The {0} [{1}] requires light conditions of <i>{2}</i>.<br /><b>Price: {3}</b></div>', data.Common, data.Botanical, data.Light, Ext.util.Format.usMoney(data.Price))
                };
            };
            
    
        </script>
    </head>
    <body>
             <ext:ResourceManager ID="ResourceManager1" runat="server" />  
              <form id="Form1" runat="server" style="height:500px;" >
    
            <p>Notice <b>Last Updated</b> column is revised with a new server-side DateTime stamp when the GridPanel "Refresh" button is clicked.<br />This demonstrates that when the GridPanel is refreshed, the Data is requested again from the server via an DirectEvent, but the Paging and Sorting is done completely client-side in the browser.</p>
    
    
            <ext:Panel runat ="server" Region="North" Height="580px">
            <Content>
    
            <ext:GridPanel  ID="GridPanel1"  runat="server" Title="Array Grid"  Width="700" Height="300">
                <Store>
                    <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server" >
                    <Columns>
                        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
                        <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                        
                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange">
                        </ext:Column>
                        <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                        <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Width="170" Text="操作" Align="Center" >
                            <Commands>
                                <ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="编辑" Style="text-align:center;" >
                                    <ToolTip Text="Edit" />
                                </ext:ImageCommand>
                            </Commands>
                            <DirectEvents>
                            <Command OnEvent = "test"></Command>
                            </DirectEvents>
                            <PrepareCommand Fn="prepareCommand" />
    
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                </SelectionModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" StripeRows="true" />                   
                </View>            
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1"  runat="server"  DisplayMsg="Displaying plants {0} - {1} of {2}"  DisplayInfo="true" EmptyMsg="No plants to display"   />
                </BottomBar>
            </ext:GridPanel>
            </Content>
            </ext:Panel>
          <div>
             <ext:Viewport runat="server" Layout="BorderLayout" Region="South" Height="200">
            <Items>       
            <ext:Panel ID="Panel1" runat="server" 
                        Region= "South"
                        Height="200" 
                        Title="South"
                        Floatable="true"
                        Collapsed="true"                    
                        Collapsible="true">
            <Content>
            <uc1:UCOne ID="UCOne1" runat="server" OnSubmitUserEvent="event1_Submit">
            </uc1:UCOne>
            </Content>
            </ext:Panel>
            </Items>
            </ext:Viewport>
               </div>
        </form>
    </body>
    </html>
  4. #4
    The <ext:Viewport> should be a top level control. All other controls should be "inside" the Viewport.

    Can you simplify your sample any more? I tried running, but an exception was thrown and I gave up.
    Geoffrey McGill
    Founder
  5. #5
    Quote Originally Posted by geoffrey.mcgill View Post
    The <ext:Viewport> should be a top level control. All other controls should be "inside" the Viewport.

    Can you simplify your sample any more? I tried running, but an exception was thrown and I gave up.
    yes,i have try all controls in Viewport,but the result is also error when the sourthpanel click first.Name:  BZ$HAFTSRNHO`3DDEKU9ERM.jpg
Views: 26
Size:  914 Bytes

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Register src="UCOne.ascx" tagname="UCOne" tagprefix="uc1" %>
    
    <script runat="server" >
       protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                this.BindData();
    
            }
        }
    
        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindData();
        }
    
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                };
            }
        }
    
        private object[] Data1
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "McDonalds Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                };
            }
        }
    
        protected void event1_Submit(object sender, Class1 e)
        {
       
            string userName = e.UserName;
            string password = e.Password;
           Store store = this.GridPanel1.GetStore();
            
            store.DataSource = this.Data1;
            store.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
           var prepareCommands = function (grid, commands, record, row) {
                if (record.get("price") >= 50) {
                    commands.push({
                            command : "accept",                        
                            iconCls : "icon-accept"                                         
                    });               
                }            
            };
            
            //in PrepareCommand we can modify command
            var prepareCommand = function (grid, command, record, row) {
    
                if (command.command == 'Edit' && record.get("price") < 50) {
                    command.hidden = true;
                    command.hideMode = 'display'; //you can try 'visibility' also                 
                }            
            };
            
            var prepareCellCommand = function (grid, command, record, row, col, value) {
                if (command.command == 'Dollar' && record.get("price") < 50) {
                    command.iconCls = "icon-moneyeuro";               
                }   
            };
            
            var prepareCellCommands = function (grid, commands, record, row, col, value) {
                if (record.get("price") >= 50) {
                   commands.push({
                       iconCls : "icon-moneyadd",
                       command : "moneyadd"
                   });                
                }
            };
    
        </script>
    </head>
    <body>
             <ext:ResourceManager ID="ResourceManager1" runat="server" />  
              <form id="Form1" runat="server" style="height:500px;" >
             <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" Region="South" Height="200">
            <Items>    
            <ext:Panel runat ="server" Region="North" Height="580px">
            <Content>
    
            <ext:GridPanel  ID="GridPanel1"  runat="server" Title="Array Grid"  Width="700" Height="300">
                <Store>
                    <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server" >
                    <Columns>
                        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
                        <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change">
                            </ext:Column>
                        <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange">
                        </ext:Column>
                        <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                        <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Width="170" Text="operate" Align="Center" >
                            <Commands>
                                <ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="edit" Style="text-align:center;" >
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareCommand" />
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1"  runat="server"  DisplayMsg="Displaying plants {0} - {1} of {2}"  DisplayInfo="true" EmptyMsg="No plants to display"   />
                </BottomBar>
            </ext:GridPanel>
            </Content>
            </ext:Panel>
      
            <ext:Panel ID="Panel1" runat="server"  Region= "South" Title="South" Floatable="true" Collapsed="true" Collapsible="true" Height="200" >
            <Content>
            <uc1:UCOne ID="UCOne1" runat="server" OnSubmitUserEvent="event1_Submit">
            </uc1:UCOne>
            </Content>
            </ext:Panel>
            </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by ping; Nov 07, 2013 at 1:06 AM.
  6. #6
    Sorry, but I'm still getting an exception.

    Compiler Error Message: CS0246: The type or namespace name 'Class1' could not be found (are you missing a using directive or an assembly reference?)
    I'll have to leave this for someone else in the community to answer.
    Geoffrey McGill
    Founder
  7. #7
    Quote Originally Posted by geoffrey.mcgill View Post
    Sorry, but I'm still getting an exception.

    Compiler Error Message: CS0246: The type or namespace name 'Class1' could not be found (are you missing a using directive or an assembly reference?)
    I'll have to leave this for someone else in the community to answer.
    sorry,forget it....,follow,just test params
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    /// <summary>
    ///Class1 的摘要说明
    /// </summary>
    public class Class1 : EventArgs
    {
        public string UserName;
        public string Password;
    
        public Class1(string userName, string password)
    	{
            this.UserName = userName;
            this.Password = password;
    		//
    		//TODO: 在此处添加构造函数逻辑
    		//
    	}
    
    }
  8. #8
    Well, a JavaScript error's message looks quite self-explanatory:
    TypeError: center is null
    A BorderLayout requires a center region.
    <ext:Container runat="server" Region="Center" />
    http://docs-origin.sencha.com/extjs/...ntainer.Border

    If you do not need it, it is better to switch to a VBoxLayout.
    https://examples2.ext.net/#/Layout/VBoxLayout/Basic/
  9. #9
    Quote Originally Posted by Daniil View Post
    Well, a JavaScript error's message looks quite self-explanatory:
    TypeError: center is null
    A BorderLayout requires a center region.
    <ext:Container runat="server" Region="Center" />
    http://docs-origin.sencha.com/extjs/...ntainer.Border

    If you do not need it, it is better to switch to a VBoxLayout.
    https://examples2.ext.net/#/Layout/VBoxLayout/Basic/
    thanks very much ! it has resovled.
    why in my debugging there is an error tell me null error but not like "TypeError: center is null" , thank you
    Last edited by ping; Nov 07, 2013 at 4:51 AM.
  10. #10
    Quote Originally Posted by ping View Post
    why in my debugging there is an error tell me null error but not like "TypeError: center is null" , thank you
    Probably, you use IE, aren't you? Usually, there are more informative messages in FireFox FireBug and Chrome JavaScript console.

    But even in IE you could look at the JavaScript code where the error occurs and see that "center".

    By the way, I discover a bug due to your test case.
    http://www.sencha.com/forum/showthread.php?275502

    Opened an Issue for that.
    https://github.com/extnet/Ext.NET/issues/371
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Problem with collapsible panel.
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 13, 2012, 1:33 PM
  2. [CLOSED] Collapsible Panel problem
    By sailendra in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 18, 2012, 11:43 AM
  3. [CLOSED] Why Collapsible panel not disabled while loading?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 02, 2012, 3:13 PM
  4. Viewport Default Collapsible Panel
    By msutton761 in forum 1.x Help
    Replies: 2
    Last Post: Nov 12, 2011, 11:33 PM
  5. Replies: 1
    Last Post: Sep 16, 2008, 10:45 AM

Posting Permissions