[CLOSED] [#371] panel Collapsible error

**ping** · Nov 06, 2013, 4:01 AM

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" />

**Daniil** · Nov 06, 2013, 5:01 PM

Hi @ping,

Welcome to the Ext.NET forums!

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

**ping** · Nov 07, 2013, 12:12 AM

Originally Posted by Daniil

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>

**geoffrey.mcgill** · Nov 07, 2013, 12:38 AM

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.

**ping** · Nov 07, 2013, 12:57 AM

Originally Posted by geoffrey.mcgill

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>

**geoffrey.mcgill** · Nov 07, 2013, 2:09 AM

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.

Thread: [CLOSED] [#371] panel Collapsible error

Thread Tools

Search Thread

Display

Hybrid View

[CLOSED] [#371] panel Collapsible error

re:

Similar Threads

[CLOSED] Problem with collapsible panel.

[CLOSED] Collapsible Panel problem

[CLOSED] Why Collapsible panel not disabled while loading?

Viewport Default Collapsible Panel

[FIXED] [V0.6] Rendering bug on collapsible panel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [#371] panel Collapsible error

Hybrid View

[CLOSED] [#371] panel Collapsible error

re:

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us