Jan 20, 2011, 8:40 AM
[CLOSED] Panel header and border visibility
I have panel controls and all of them have a property button on header that opens a property window like below picture. And, I can keep in mind all properties related with panel control except Header and Border properties. What can I do to save this properties? Below is my sample code. I hope that I can tell my problem correctly.
(I tried to use for Header panel.header.visibilityMode and for Border panel.initialConfig.border . But, After I use Ext.net.DirectMethods.Button_ApplyTableLayoutPrope rties_Click(Ext.encode(getPanelsDetails(Panel9))); code, All panel controls are clear, and create again. Therefore panel.header.visibilityMode and Border panel.initialConfig.border properties are changed.)
Attachment 2211
(I tried to use for Header panel.header.visibilityMode and for Border panel.initialConfig.border . But, After I use Ext.net.DirectMethods.Button_ApplyTableLayoutPrope rties_Click(Ext.encode(getPanelsDetails(Panel9))); code, All panel controls are clear, and create again. Therefore panel.header.visibilityMode and Border panel.initialConfig.border properties are changed.)
Attachment 2211
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace WebApplication9
{
public partial class WebForm8 : System.Web.UI.Page
{
//private void ChangeMode(string mode)
//{
// foreach (Ext.Net.Cell item in TableLayout1.Cells)
// {
// Ext.Net.Container cnt = item.Items[0] as Ext.Net.Container;
// Ext.Net.Panel pnl = cnt.Items[0] as Ext.Net.Panel;
// bool header = true;
// bool border = true;
// if (mode == "DesignMode")
// {
// //pnl.AddScript(pnl.ClientID + ".header.show();");
// //pnl.AddScript(pnl.ClientID + ".removeClass('no-border');");
// header = true;
// border = true;
// }
// else if (mode == "ViewMode")
// {
// //pnl.AddScript(pnl.ClientID + ".header.hide();");
// //pnl.AddScript(pnl.ClientID + ".addClass('no-border');");
// //pnl.AddScript(pnl.ClientID + ".header.addClass('x-hide-display');");
// //pnl.AddScript(pnl.ClientID + ".header.setStyle('border','1');");
// //pnl.AddScript(pnl.ClientID + ".addClass('dd');");
// header = false;
// border = true;
// }
// X.Js.Call("setBorder", new JRawValue(pnl.ClientID), border, header);
// }
//}
//[DirectMethod]
//public void Button_DesignMode_Click()
//{
// ChangeMode("DesignMode");
//}
//[DirectMethod]
//public void Button_ViewMode_Click()
//{
// ChangeMode("ViewMode");
//}
public class PanelDetails
{
[Newtonsoft.Json.JsonProperty(PropertyName = "containerID")]
public string ContainerID
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "index")]
public int Index
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "width")]
public int Width
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "height")]
public int Height
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "colSpan")]
public int ColSpan
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "rowSpan")]
public int RowSpan
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "url")]
public string Url
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "header")]
public bool Header
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "border")]
public bool Border
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "title")]
public string Title
{
get;
set;
}
[Newtonsoft.Json.JsonProperty(PropertyName = "html")]
public string Html
{
get;
set;
}
}
[DirectMethod]
public void Button_ApplyTableLayoutProperties_Click(System.Collections.Generic.Dictionary<string, PanelDetails> details)
{
var items = new System.Collections.Generic.Dictionary<string, Container>();
List<string> resizables = new List<string>();
foreach (Ext.Net.Cell item in TableLayout1.Cells)
{
var ct = item.Items[0] as Ext.Net.Container;
items.Add(ct.Items[0].ClientID, ct);
item.Items.Clear();
}
TableLayout1.Items.Clear();
foreach (string id in details.Keys)
{
if (items.Keys.Contains(id) == false)
{
Ext.Net.Container newContainer = X.GetCmp<Ext.Net.Container>(details[id].ContainerID);
newContainer.Layout = "Fit";
newContainer.Cls = "dropable";
Ext.Net.Panel newPanel = X.GetCmp<Ext.Net.Panel>(id);
newPanel.Cls = "draggable";
newPanel.Frame = false;
newPanel.StyleSpec = "padding: 5px";
newPanel.DraggableConfig.Group = "panelDD";
newPanel.DraggableConfig.StartDrag.Fn = "startDrag";
newPanel.DraggableConfig.EndDrag.Fn = "endDrag";
newPanel.Title = details[id].Title;
bool header = details[id].Header;
bool border = details[id].Border;
//if (string.IsNullOrEmpty(details[id].Url)==false)
//{
// newPanel.AutoLoad.Url = details[id].Url;
// newPanel.LoadContent(details[id].Url);
//}
Ext.Net.Tool tool = new Tool();
tool.Type = ToolType.Gear;
tool.Handler = "ShowWindow(" + id + ");";
newPanel.Tools.Add(tool);
newContainer.Items.Add(newPanel);
Ext.Net.Cell newCell = new Cell();
newCell.Items.Add(newContainer);
TableLayout1.Cells.Add(newCell);
items.Add(newContainer.Items[0].ClientID, newContainer);
TableLayout1.Cells[details[id].Index].Items.Clear();
X.Js.Call("setBorder", new JRawValue(newPanel.ClientID), border, header, Hidden_Mode.Text);
resizables.Add(id);
}
var panelDetails = details[id];
foreach (string key in items.Keys)
{
if (key == id)
{
var ct = items[key];
ct.Width = panelDetails.Width;
ct.Height = panelDetails.Height;
((Ext.Net.Panel)items[key].Items[0]).Title = details[id].Title;
((Ext.Net.Panel)items[key].Items[0]).ClearContent();
bool header = details[id].Header;
bool border = details[id].Border;
if (string.IsNullOrEmpty(details[id].Url) == false)
{
((Ext.Net.Panel)items[key].Items[0]).AutoLoad.Url = details[id].Url;
((Ext.Net.Panel)items[key].Items[0]).LoadContent(details[id].Url);
}
else
{
string html = Server.HtmlDecode(details[id].Html);
((Ext.Net.Panel)items[key].Items[0]).Update(html, true);
}
TableLayout1.Cells[panelDetails.Index].Items.Add(ct);
TableLayout1.Cells[panelDetails.Index].ColSpan = panelDetails.ColSpan;
TableLayout1.Cells[panelDetails.Index].RowSpan = panelDetails.RowSpan;
X.Js.Call("setBorder", new JRawValue(((Ext.Net.Panel)items[key].Items[0]).ClientID), border, header, Hidden_Mode.Text);
break;
}
}
}
int columns = 2;
if (string.IsNullOrEmpty(TextField_ColumnNumber.Text) == false)
Hidden_TableLayoutColumns.Text = TextField_ColumnNumber.Text;
if(string.IsNullOrEmpty(Hidden_TableLayoutColumns.Text)==false)
columns = int.Parse(Hidden_TableLayoutColumns.Text);
TableLayout1.Columns = columns;
Panel9.Render();
foreach (string item in details.Keys)
{
Resizable resizable = new Resizable();
resizable.ID = item + "_resizable";
resizable.Element = "={" + item + ".el}";
resizable.Transparent = true;
resizable.Listeners.Resize.Handler = "var p = " + item + "; p.el.setStyle({width:'', height:''});p.setSize(width, height); p.ownerCt.setSize(width, height);";
resizable.Render();
}
DropTarget1.Render();
}
[DirectMethod]
public void Button_AddNewCell_Click(Dictionary<string, PanelDetails> details)
{
PanelDetails panelDetails=new PanelDetails();
panelDetails.ContainerID = "Container" + (details.Count + 1).ToString();
panelDetails.Index = details.Count;
panelDetails.Width = 200;
panelDetails.Height = 200;
panelDetails.ColSpan = 1;
panelDetails.RowSpan = 1;
panelDetails.Url = "";
panelDetails.Header = true;
panelDetails.Border = true;
panelDetails.Title = "Panel " + (details.Count + 1).ToString();
details.Add("pnl" + (details.Count + 1).ToString(), panelDetails);
//Ext.Net.Container container4 = new Container();
//container4.ID = "Container4";
//container4.Layout = "Fit";
//container4.Cls = "dropable";
//container4.Width = new Unit(200);
//container4.Height = new Unit(200);
//Ext.Net.Panel pnl4 = new Ext.Net.Panel();
//pnl4.ID = "pnl4";
//pnl4.Cls = "draggable";
//pnl4.Frame = false;
//pnl4.StyleSpec = "padding: 5px";
//pnl4.DraggableConfig.Group = "panelDD";
//pnl4.DraggableConfig.StartDrag.Fn = "startDrag";
//pnl4.DraggableConfig.EndDrag.Fn = "endDrag";
//Ext.Net.Tool tool = new Tool();
//tool.Type = ToolType.Gear;
//tool.Handler = "ShowWindow(pnl4);";
//pnl4.Tools.Add(tool);
//container4.Items.Add(pnl4);
////container4.AddTo(Container_Row2);
//Ext.Net.Cell cell = new Cell();
//cell.Items.Add(container4);
//TableLayout1.Cells.Add(cell);
//Panel9.Render();
//Resizable resizable = new Resizable();
//resizable.ID = "pnl4_resizable";
//resizable.Element = "={pnl4.el}";
//resizable.Transparent = true;
//resizable.Listeners.Resize.Handler = "var p = pnl4; p.el.setStyle({width:'', height:''});p.setSize(width, height); p.ownerCt.setSize(width, height);";
//resizable.Render();
//Resizable1.Render();
//Resizable2.Render();
//Resizable3.Render();
//DropTarget1.Render();
Button_ApplyTableLayoutProperties_Click(details);
}
protected void Page_Load(object sender, EventArgs e)
{
Container[] panels = new Container[] { this.Container1, this.Container2, this.Container3 };
foreach (Container region in panels)
{
Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];
p.DraggableConfig.Group = "panelDD";
p.DraggableConfig.StartDrag.Fn = "startDrag";
p.DraggableConfig.EndDrag.Fn = "endDrag";
}
if (!X.IsAjaxRequest)
{
//Client side coding
List<Resizable> resizables = Ext.Net.Utilities.ControlUtils.FindControls<Resizable>(this.Form);
string[] resizableIds = new string[resizables.Count];
int i = 0;
foreach (var r in resizables)
{
resizableIds[i++] = r.ID;
}
X.Js.AddScript("resizables = {0}", JSON.Serialize(resizableIds));
}
}
}
}<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication9.WebForm8"
ValidateRequest="false" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title></title>
<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>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
<script type="text/javascript">
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 ChangeMode = function (mode) {
var header = true;
var border = true;
if (mode == "DesignMode") {
header = true;
border = true;
}
else if (mode == "ViewMode") {
header = true;
border = true;
}
var Panel9 = Ext.getCmp('<%= Panel9.ClientID %>');
Panel9.items.each(function (item, index) {
var p = Ext.getCmp(item.get(0).id);
setBorder(p, border, header, mode);
});
};
var setBorder = function (panel, useBorder, useHeader, mode) {
var method = (useBorder && (mode == "DesignMode" || panel.initialConfig.border == undefined)) || (useBorder && panel.initialConfig.border !== 'undefined' && panel.initialConfig.border == true) ? "removeClass" : "addClass";
panel.el[method](panel.baseCls + '-noborder');
panel.body[method](panel.bodyCls + '-noborder');
if (mode == "DesignMode") {
panel.tools.gear.show();
}
else if (mode == "ViewMode") {
panel.tools.gear.hide();
}
if (panel.header) {
panel.header[method](panel.headerCls + '-noborder');
if (mode == 'ViewMode') {
panel.header[panel.header.visibilityMode == 1 ? "removeClass" : "addClass"]("x-hide-display");
panel.body[panel.header.visibilityMode == 1 ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
} else {
panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
panel.body[useHeader ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
}
// panel.header[method](panel.headerCls + '-noborder');
// panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
// panel.body[useHeader ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
}
if (panel.footer) {
panel.footer[method](panel.footerCls + '-noborder');
}
if (panel.tbar) {
panel.tbar[method](panel.tbarCls + '-noborder');
}
if (panel.bbar) {
panel.bbar[method](panel.bbarCls + '-noborder');
}
//added
panel.syncSize();
if (panel.ownerCt) {
panel.ownerCt.doLayout();
}
};
var Button_DesignMode_Click = function () {
//Ext.net.DirectMethods.Button_DesignMode_Click();
var Hidden_Mode = Ext.getCmp('<%= Hidden_Mode.ClientID %>');
Hidden_Mode.setValue('DesignMode');
// Ext.net.DirectMethods.Button_ApplyTableLayoutProperties_Click(Ext.encode(getPanelsDetails(Panel9)));
ChangeMode('DesignMode');
};
var Button_ViewMode_Click = function () {
//Ext.net.DirectMethods.Button_ViewMode_Click();
var Hidden_Mode = Ext.getCmp('<%= Hidden_Mode.ClientID %>');
Hidden_Mode.setValue('ViewMode');
// Ext.net.DirectMethods.Button_ApplyTableLayoutProperties_Click(Ext.encode(getPanelsDetails(Panel9)));
ChangeMode('ViewMode');
};
var ShowWindow = function (panel) {
var Hidden_ContainerName = Ext.getCmp('<%= Hidden_ContainerName.ClientID %>');
var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
Hidden_ContainerName.setValue(panel.ownerCt.id);
Hidden_PanelName.setValue(panel.id);
var Window1 = Ext.getCmp('<%= Window1.ClientID %>');
var cnt = panel.ownerCt;
var containerCell = cnt.container.dom;
var NumberField_Width = Ext.getCmp('<%= NumberField_Width.ClientID %>');
var NumberField_Height = Ext.getCmp('<%= NumberField_Height.ClientID %>');
var TextField_Url = Ext.getCmp('<%= TextField_Url.ClientID %>');
var TextField_ColSpan = Ext.getCmp('<%= TextField_ColSpan.ClientID %>');
var TextField_RowSpan = Ext.getCmp('<%= TextField_RowSpan.ClientID %>');
var TextField_RowSpan = Ext.getCmp('<%= TextField_RowSpan.ClientID %>');
var Checkbox_Header = Ext.getCmp('<%= Checkbox_Header.ClientID %>');
var Checkbox_Border = Ext.getCmp('<%= Checkbox_Border.ClientID %>');
var TextField_Title = Ext.getCmp('<%= TextField_Title.ClientID %>');
var panelInnerHTML = panel.body.dom.innerHTML;
SetFCKeditorHTML('<%= FCKeditor1.ClientID %>', panelInnerHTML);
Checkbox_Header.setValue(Boolean(panel.header.visibilityMode));
Checkbox_Border.setValue(Boolean(panel.initialConfig.border !== 'undefined' && panel.initialConfig.border !== false ? 1 : 0));
NumberField_Width.setValue(cnt.getWidth());
NumberField_Height.setValue(cnt.getHeight());
TextField_ColSpan.setValue(containerCell.colSpan);
TextField_RowSpan.setValue(containerCell.rowSpan);
TextField_Title.setValue(panel.title);
var autoLoad = panel.getAutoLoad();
if (autoLoad != null)
TextField_Url.setValue(autoLoad.url);
Window1.show();
};
var FCKeditor_OnComplete = function (editorInstance) {
editorInstance.SetHTML('');
};
window.onload = function () {
};
var Resizable_Resize = function (container, width, height) {
//container.el.setStyle({ width: '', height: '' });
container.setSize(width, height);
//container.doLayout();
};
var GetFCKeditorHTML = function (instanceName) {
//Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance(instanceName);
//Get the editor contents as XHTML.
return oEditor.GetXHTML(true); // "true" means you want it formatted.
};
var SetFCKeditorHTML = function (instanceName, html) {
var FCKeditor = FCKeditorAPI.GetInstance(instanceName);
if (FCKeditor.EditingArea.Textarea != null) {
FCKeditor.EditingArea.Textarea.innerText = '';
// FCKeditor.EditingArea.Textarea.innerHTML = '';
FCKeditor.EditingArea.Textarea.value = '';
if (html != null && html != '') {
FCKeditor.EditingArea.Textarea.innerText = html;
// FCKeditor.EditingArea.Textarea.innerHTML = html;
FCKeditor.EditingArea.Textarea.value = html;
if (FCKeditor.EditMode == 0) {
FCKeditor.SwitchEditMode();
}
} else if (FCKeditor.EditMode == 1) {
FCKeditor.SwitchEditMode();
}
} else if (FCKeditor.IsDirty() == false && FCKeditor.EditMode == 1) {
FCKeditor.SwitchEditMode();
}
};
var Button_ApplyChanges_Click = function () {
var Hidden_ContainerName = Ext.getCmp('<%= Hidden_ContainerName.ClientID %>');
var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
var TextField_Url = Ext.getCmp('<%= TextField_Url.ClientID %>');
var TextField_ColSpan = Ext.getCmp('<%= TextField_ColSpan.ClientID %>');
var TextField_RowSpan = Ext.getCmp('<%= TextField_RowSpan.ClientID %>');
var NumberField_Width = Ext.getCmp('<%= NumberField_Width.ClientID %>');
var Checkbox_Header = Ext.getCmp('<%= Checkbox_Header.ClientID %>');
var Checkbox_Border = Ext.getCmp('<%= Checkbox_Border.ClientID %>');
var TextField_Title = Ext.getCmp('<%= TextField_Title.ClientID %>');
var Checkbox_Resizable = Ext.getCmp('<%= Checkbox_Resizable.ClientID %>');
var pnl = Ext.getCmp(Hidden_PanelName.getValue());
var cnt = pnl.ownerCt;
var containerCell = cnt.container.dom;
var html = GetFCKeditorHTML('FCKeditor1');
var width = NumberField_Width.getValue();
var height = NumberField_Height.getValue();
var colSpan = TextField_ColSpan.getValue();
var rowSpan = TextField_RowSpan.getValue();
var header = Checkbox_Header.checked;
var border = Checkbox_Border.checked;
var resizable = Checkbox_Resizable.checked;
var url = TextField_Url.getValue();
var title = TextField_Title.getValue();
Resizable_Resize(cnt, width, height);
containerCell.colSpan = colSpan;
containerCell.rowSpan = rowSpan;
pnl.header.visibilityMode = Checkbox_Header.checked ? 1 : 0;
pnl.initialConfig.border = Boolean(Checkbox_Border.checked ? 1 : 0);
pnl.setTitle(title);
if (url == '') {
pnl.autoLoad = null;
pnl.clearContent();
pnl.update(html, true);
} else {
pnl.load({
url: url,
nocache: false,
text: 'Loading...',
timeout: 30,
scripts: true
});
}
Ext.net.DirectMethods.Button_ApplyTableLayoutProperties_Click(Ext.encode(getPanelsDetails(Panel9)));
};
var Button_TableLayoutProperties_Click = function () {
var Window_TableProperties = Ext.getCmp('<%= Window_TableProperties.ClientID %>');
var TableLayout1 = Ext.getCmp('<%= TableLayout1.ClientID %>');
var TextField_ColumnNumber = Ext.getCmp('<%= TextField_ColumnNumber.ClientID %>');
var Panel9 = Ext.getCmp('<%= Panel9.ClientID %>');
var columns = Panel9.layoutConfig.columns;
TextField_ColumnNumber.setValue(columns);
Window_TableProperties.show();
};
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 panelInnerHTML = item.get(0).body.dom.innerHTML;
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: Boolean(item.get(0).header.visibilityMode),
border: Boolean((item.get(0).initialConfig.border == undefined) || (item.get(0).initialConfig.border !== 'undefined' && item.get(0).initialConfig.border == true) ? 1 : 0),
title: title,
html: Ext.util.Format.htmlEncode(panelInnerHTML)
};
});
return obj;
};
var Button_ApplyTableLayoutProperties_Click = function () {
Ext.net.DirectMethods.Button_ApplyTableLayoutProperties_Click(Ext.encode(getPanelsDetails(Panel9)));
};
var Button_AddNewCell_Click = function () {
Ext.net.DirectMethods.Button_AddNewCell_Click(Ext.encode(getPanelsDetails(Panel9)));
};
var setResizableEnabled = function (enabled) {
for (var i = 0; i < resizables.length; i++) {
var rc = window[resizables[i]];
rc.east.el.setDisplayed(enabled);
rc.south.el.setDisplayed(enabled);
rc.corner.el.setDisplayed(enabled);
}
};
</script>
</ext:ResourcePlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Store ID="Store1" runat="server">
</ext:Store>
<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:Window ID="Window1" runat="server" Collapsible="false" Height="705" Icon="Application"
Title="Title" Width="950" Padding="10" Hidden="true" Frame="true" Modal="true">
<Items>
<ext:TextField ID="TextField_Title" runat="server" FieldLabel="Title">
</ext:TextField>
<ext:NumberField ID="NumberField_Width" runat="server" FieldLabel="Width" MinValue="0"
MaxValue="1000">
</ext:NumberField>
<ext:NumberField ID="NumberField_Height" runat="server" FieldLabel="Height" MinValue="0"
MaxValue="1000">
</ext:NumberField>
<ext:TextField ID="TextField_ColSpan" runat="server" FieldLabel="ColSpan">
</ext:TextField>
<ext:TextField ID="TextField_RowSpan" runat="server" FieldLabel="RowSpan">
</ext:TextField>
<ext:TextField ID="TextField_Url" runat="server" FieldLabel="Url">
</ext:TextField>
<ext:Checkbox ID="Checkbox_Header" runat="server" Checked="true" FieldLabel="Header">
</ext:Checkbox>
<ext:Checkbox ID="Checkbox_Border" runat="server" Checked="true" FieldLabel="Border">
</ext:Checkbox>
<ext:Checkbox ID="Checkbox_Resizable" runat="server" Checked="true" FieldLabel="Resizable">
</ext:Checkbox>
<ext:Panel ID="Panel2" runat="server" Height="400" Layout="Fit" FieldLabel="HTML">
<Content>
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Height="398" ToolbarSet="RedPanel"
Value="">
</FCKeditorV2:FCKeditor>
</Content>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="Button_ApplyChanges" runat="server" Text="Apply Changes">
<Listeners>
<Click Handler="Button_ApplyChanges_Click();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
<ext:Window ID="Window_TableProperties" runat="server" Collapsible="false" Height="100"
Icon="Application" Title="Table Properties" Width="270" Padding="10" Hidden="true"
Frame="true" Modal="true">
<Items>
<ext:TextField ID="TextField_ColumnNumber" runat="server" FieldLabel="Column Number">
</ext:TextField>
</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Apply Changes">
<Listeners>
<Click Handler="Button_ApplyTableLayoutProperties_Click();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
<ext:Viewport ID="Viewport1" runat="server" Layout="fit">
<Items>
<ext:Panel ID="Panel9" runat="server" Layout="Fit" Region="Center" Title="Center"
Header="false" Border="false" AutoScroll="true">
<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="Button222" runat="server" Text="Disable all">
<Listeners>
<Click Handler="setResizableEnabled(false);" />
</Listeners>
</ext:Button>
<ext:Button ID="Button333" runat="server" Text="Enable all">
<Listeners>
<Click Handler="setResizableEnabled(true);" />
</Listeners>
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button_AddNewColumn" 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="Fit" Width="200"
Height="200">
<Items>
<ext:Panel ID="pnl1" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
Title="Panel 1">
<Tools>
<ext:Tool Type="Gear" Handler="ShowWindow(#{pnl1});" />
</Tools>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
<ext:Cell>
<ext:Container ID="Container2" runat="server" Cls="dropable" Layout="Fit" Width="200"
Height="200">
<Items>
<ext:Panel ID="pnl2" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
Title="Panel 2">
<Tools>
<ext:Tool Type="Gear" Handler="ShowWindow(#{pnl2});" />
</Tools>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:Container ID="Container3" runat="server" Cls="dropable" Layout="Fit" Width="200"
Height="200">
<Items>
<ext:Panel ID="pnl3" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
Title="Panel 3">
<AutoLoad Url="http://www.google.com">
</AutoLoad>
<Tools>
<ext:Tool Type="Gear" Handler="ShowWindow(#{pnl3});" />
</Tools>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<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="Resizable1" runat="server" Element="={#{Container1}.el}" Transparent="true">
<Listeners>
<Resize Handler="Resizable_Resize(#{Container1},width,height);" />
</Listeners>
</ext:Resizable>
<ext:Resizable ID="Resizable2" runat="server" Element="={#{Container2}.el}" Transparent="true">
<Listeners>
<Resize Handler="Resizable_Resize(#{Container2},width,height);" />
</Listeners>
</ext:Resizable>
<ext:Resizable ID="Resizable3" runat="server" Element="={#{Container3}.el}" Transparent="true">
<Listeners>
<Resize Handler="Resizable_Resize(#{Container3},width,height);" />
</Listeners>
</ext:Resizable>
</form>
</body>
</html>
Last edited by Daniil; Jan 20, 2011 at 11:59 AM.
Reason: [CLOSED]
Originally Posted by kenanhancer
