May 22, 2011, 2:08 PM
[CLOSED] TableLayout Control adding cell problem
Hi,
I have TableLayout control and I just want to add new cell dynamicly. But, it shows error as below picture. Can you please help?
I have TableLayout control and I just want to add new cell dynamicly. But, it shows error as below picture. Can you please help?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CKEditor.NET;
using Ext.Net;
namespace SysMgmWeb.PageDesign
{
public partial class LayoutDesignPage : System.Web.UI.Page
{
[DirectMethod]
public void Button_AddNewCell_Click(Dictionary<string, PanelDetails> details)
{
Ext.Net.Container newContainer = new Container();
newContainer.ID = "Container" + (details.Count + 1).ToString();
newContainer.Width = new Unit(200);
newContainer.Height = new Unit(200);
Ext.Net.Cell newCell = new Cell();
newCell.Items.Add(newContainer);
TableLayout1.Cells.Add(newCell);
Panel9.Render();
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
}<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Base.Master" AutoEventWireup="true"
CodeBehind="LayoutDesignPage.aspx.cs" Inherits="SysMgmWeb.PageDesign.LayoutDesignPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.invite
{
background-color: #99bbe8 !important;
}
.x-drop-marker
{
background-color: silver;
}
.no-border .x-panel-body
{
border: 0;
}
.cursor-default
{
cursor: default;
}
</style>
<script type="text/javascript" src="../tinymce_3.4.2/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var setResizableEnabled = function (enabled) {
var Panel9 = #{Panel9};
var panels = getPanelsDetails(Panel9);
for (pnlID in panels) {
var panelDetails = panels[pnlID];
var rc = window[panelDetails.containerID + '_resizable'];
var isResizable = enabled && Boolean(panelDetails.resizable == 'true' ? 1 : 0);
rc.east.el.setDisplayed(isResizable);
rc.south.el.setDisplayed(isResizable);
rc.corner.el.setDisplayed(isResizable);
}
};
var getPanelsDetails = function (panel) {
var obj = {};
panel.items.each(function (item, index) {
var url = item.get(0).getAutoLoad().url;
var title = item.get(0).title;
var styleSpec = item.get(0).initialConfig.style;
var bodyStyle = item.get(0).initialConfig.bodyStyle;
var panelInnerHTML = item.get(0).htmlValue;
var header = item.get(0).isVisibleHeader;
var border = item.get(0).isVisibleBorder;
var resizable = item.get(0).isResizable;
obj[item.get(0).id] = {
containerID: item.id,
index: index,
width: item.getWidth(),
height: item.getHeight(),
colSpan: item.container.dom.colSpan,
rowSpan: item.container.dom.rowSpan,
url: url,
header: header,
border: border,
resizable: resizable,
title: title,
styleSpec: styleSpec,
bodyStyle: bodyStyle,
html: Ext.util.Format.htmlEncode(panelInnerHTML)
};
});
return obj;
};
var notifyDrop = function (source, e, data) {
var targetCt = Ext.getCmp(this.el.dom.id);
var targetPanel = targetCt.items.get(0);
var sourceCt = data.panel.ownerCt;
sourceCt.add(targetPanel);
targetCt.add(data.panel);
targetCt.doLayout.defer(10, targetCt);
sourceCt.doLayout.defer(10, sourceCt);
};
var startDrag = function () {
Ext.select(".dropable").addClass("x-drop-marker");
Ext.select(".draggable").hide();
};
var endDrag = function () {
Ext.select(".dropable").removeClass("x-drop-marker");
Ext.select(".draggable").show();
};
var Resizable_Resize = function (container, width, height) {
container.setSize(width, height);
};
var ShowPropertyWindow = function (panel) {
};
var Button_ViewMode_Click = function () {
};
var Button_DisableAll_Click = function () {
setResizableEnabled(false);
};
var Button_EnableAll_Click = function () {
setResizableEnabled(true);
};
var Button_AddNewCell_Click = function () {
var Panel9 = #{Panel9};
Ext.net.DirectMethods.Button_AddNewCell_Click(Ext.encode(getPanelsDetails(Panel9)));
};
var Button_TableLayoutProperties_Click = function () {
};
</script>
</ext:XScript>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel9" runat="server" Layout="FitLayout" Region="Center" Border="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
<Listeners>
<Click Handler="Button_DesignMode_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
<Listeners>
<Click Handler="Button_ViewMode_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_DisableAll" runat="server" Text="Disable all">
<Listeners>
<Click Handler="Button_DisableAll_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_EnableAll" runat="server" Text="Enable all">
<Listeners>
<Click Handler="Button_EnableAll_Click();" />
</Listeners>
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button_AddNewCell" runat="server" Text="Add New Cell">
<Listeners>
<Click Handler="Button_AddNewCell_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_TableLayoutProperties" runat="server" Text="Table Properties">
<Listeners>
<Click Handler="Button_TableLayoutProperties_Click();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
<Cells>
<ext:Cell>
<ext:Container ID="Container1" runat="server" Cls="dropable" Layout="FitLayout" Width="200"
Height="200">
<Items>
<ext:Panel ID="pnl1" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
BodyStyle="padding:0px;" Title="Panel 1" PreventBodyReset="true">
<Tools>
<ext:Tool Type="Gear" Handler="ShowPropertyWindow(#{pnl1});" />
</Tools>
<CustomConfig>
<ext:ConfigItem Name="isVisibleHeader" Value="true" Mode="Value" />
<ext:ConfigItem Name="isVisibleBorder" Value="true" Mode="Value" />
<ext:ConfigItem Name="isResizable" Value="true" Mode="Value" />
<ext:ConfigItem Name="htmlValue" Value="" Mode="Value" />
</CustomConfig>
<DraggableConfig Group="panelDD">
<StartDrag Fn="startDrag" />
<EndDrag Fn="endDrag" />
</DraggableConfig>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
<ext:Cell>
<ext:Container ID="Container2" runat="server" Cls="dropable" Layout="FitLayout" Width="200"
Height="200">
<Items>
<ext:Panel ID="pnl2" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
BodyStyle="padding:0px;" Title="Panel 2" PreventBodyReset="true">
<Tools>
<ext:Tool Type="Gear" Handler="ShowPropertyWindow(#{pnl2});" />
</Tools>
<CustomConfig>
<ext:ConfigItem Name="isVisibleHeader" Value="true" Mode="Value" />
<ext:ConfigItem Name="isVisibleBorder" Value="true" Mode="Value" />
<ext:ConfigItem Name="isResizable" Value="true" Mode="Value" />
<ext:ConfigItem Name="htmlValue" Value="" Mode="Value" />
</CustomConfig>
<DraggableConfig Group="panelDD">
<StartDrag Fn="startDrag" />
<EndDrag Fn="endDrag" />
</DraggableConfig>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:Container ID="Container3" runat="server" Cls="dropable" Layout="FitLayout" Width="200"
Height="200">
<Items>
<ext:Panel ID="pnl3" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
BodyStyle="padding:0px;" Title="Panel 3" PreventBodyReset="true">
<AutoLoad Url="http://www.google.com">
</AutoLoad>
<Tools>
<ext:Tool Type="Gear" Handler="ShowPropertyWindow(#{pnl3});" />
</Tools>
<CustomConfig>
<ext:ConfigItem Name="isVisibleHeader" Value="true" Mode="Value" />
<ext:ConfigItem Name="isVisibleBorder" Value="true" Mode="Value" />
<ext:ConfigItem Name="isResizable" Value="true" Mode="Value" />
<ext:ConfigItem Name="htmlValue" Value="" Mode="Value" />
</CustomConfig>
<DraggableConfig Group="panelDD">
<StartDrag Fn="startDrag" />
<EndDrag Fn="endDrag" />
</DraggableConfig>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Hidden ID="Hidden_ContainerName" runat="server">
</ext:Hidden>
<ext:Hidden ID="Hidden_PanelName" runat="server">
</ext:Hidden>
<ext:Hidden ID="Hidden_TableLayoutColumns" runat="server">
</ext:Hidden>
<ext:Hidden ID="Hidden_Mode" runat="server" Text="DesignMode">
</ext:Hidden>
<ext:DropTarget ID="DropTarget1" runat="server" Target="${.dropable}" Group="panelDD"
OverClass="invite">
<NotifyDrop Fn="notifyDrop" />
<NotifyOut Handler="this.el.removeClass('invite');" />
<NotifyOver Handler="Ext.select('.dropable').removeClass('invite'); this.el.addClass('invite');" />
</ext:DropTarget>
<ext:Resizable ID="Container1_resizable" runat="server" Element="={#{Container1}.el}"
Transparent="true" Handles="None">
<Listeners>
<Resize Handler="Resizable_Resize(#{Container1},width,height);" />
</Listeners>
</ext:Resizable>
<ext:Resizable ID="Container2_resizable" runat="server" Element="={#{Container2}.el}"
Transparent="true" Handles="None">
<Listeners>
<Resize Handler="Resizable_Resize(#{Container2},width,height);" />
</Listeners>
</ext:Resizable>
<ext:Resizable ID="Container3_resizable" runat="server" Element="={#{Container3}.el}"
Transparent="true" Handles="None">
<Listeners>
<Resize Handler="Resizable_Resize(#{Container3},width,height);" />
</Listeners>
</ext:Resizable>
</asp:Content>
Last edited by Daniil; May 22, 2011 at 9:38 PM.
Reason: [CLOSED]
