What's New?

[CLOSED] How to get TableLayout columns property in client side

Page 1 of 3 123 LastLast
  1. #1
    Jan 13, 2011, 9:10 AM

    [CLOSED] How to get TableLayout columns property in client side

    Hi,

    I try to get TableLayout1 control with Ext.getCmp('<%= TableLayout1.ClientID %>') this code. But, it didn't return anything. Do I make something wrong?

    function Button_Click() {
     var TableLayout1 = Ext.getCmp('<%= TableLayout1.ClientID %>');
     var columns = TableLayout1.columns;
}
    Last edited by geoffrey.mcgill; Jan 14, 2011 at 10:40 PM. Reason: [CLOSED]
  2. #2
    Jan 13, 2011, 10:01 AM
    Hi,

    TableLayout is not widget. Please use layout container
    var c = Panel1.layoutConfig.columns;
  3. #3
    Jan 13, 2011, 12:25 PM
    hi,

    Actually, I used your code below JavaScript function. And, Code didn't work. Most probably, I misunderstood. Can you please help me?

            function Button_TableLayoutProperties_Click() {
            var Window_TableProperties = Ext.getCmp('<%= Window_TableProperties.ClientID %>');
            var TableLayout1 = Ext.getCmp('<%= TableLayout1.ClientID %>');
            var TextField_ColumnNumber = Ext.getCmp('<%= TextField_ColumnNumber.ClientID %>');
            var Panel1 = Ext.getCmp('<%= pnl1.ClientID %>');

            var c = Panel1.layoutConfig.columns;  //added

            Window_TableProperties.show();
        }
    My code is below.

    <%@ 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;
        }
    </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 setBorder = function (panel, useBorder, useHeader) {
            var method = useBorder ? "removeClass" : "addClass";
            panel.el[method](panel.baseCls + '-noborder');
            panel.body[method](panel.bodyCls + '-noborder');
            if (panel.header) {
                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();
            }
        }

        function Button_DesignMode_Click() {
            Ext.net.DirectMethods.Button_DesignMode_Click();
        }

        function Button_ViewMode_Click() {
            Ext.net.DirectMethods.Button_ViewMode_Click();
        }

        function ShowWindow(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 FCKeditor1 = FCKeditorAPI.GetInstance('FCKeditor1');
            var panelInnerHTML = panel.body.dom.innerHTML;

            if (FCKeditor1.EditingArea.Textarea != null) {
                FCKeditor1.EditingArea.Textarea.innerText = '';
                FCKeditor1.EditingArea.Textarea.innerText = panelInnerHTML;
            }

            NumberField_Width.setValue(cnt.getWidth());
            NumberField_Height.setValue(cnt.getHeight());
            TextField_ColSpan.setValue(containerCell.colSpan);
            TextField_RowSpan.setValue(containerCell.rowSpan);
            var autoLoad = panel.getAutoLoad();
            if (autoLoad != null)
                TextField_Url.setValue(autoLoad.url);
            Window1.show();
        }

        function Resizable_Resize(container, width, height) {
            container.el.setStyle({ width: '', height: '' });
            container.setSize(width, height);
//            container.doLayout();
        }

        function Button_ApplyChanges_Click() {
            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 NumberField_Height = Ext.getCmp('<%= NumberField_Height.ClientID %>');

            var pnl = Ext.getCmp(Hidden_PanelName.getValue());
            var cnt = Ext.getCmp(Hidden_ContainerName.getValue());
            var containerCell = cnt.container.dom;
            var FCKeditor1 = FCKeditorAPI.GetInstance('FCKeditor1');


            var width = NumberField_Width.getValue();
            var height = NumberField_Height.getValue();
            var colSpan = TextField_ColSpan.getValue();
            var rowSpan = TextField_RowSpan.getValue();
            var html = FCKeditor1.GetHTML();
            var url = TextField_Url.getValue();

            Resizable_Resize(cnt, width, height);
            containerCell.colSpan = colSpan;
            containerCell.rowSpan = rowSpan;

            if (url == '') {
                pnl.autoLoad = null;
                pnl.clearContent();
                pnl.update(html, true);
            } else {
                pnl.load({
                    url: url,
                    nocache: false,
                    text: 'Loading...',
                    timeout: 30,
                    scripts: true
                });
            }
        }

        function Button_TableLayoutProperties_Click() {
            var Window_TableProperties = Ext.getCmp('<%= Window_TableProperties.ClientID %>');
            var TableLayout1 = Ext.getCmp('<%= TableLayout1.ClientID %>');
            var TextField_ColumnNumber = Ext.getCmp('<%= TextField_ColumnNumber.ClientID %>');
            var Panel1 = Ext.getCmp('<%= pnl1.ClientID %>');
            var c = Panel1.layoutConfig.columns;

//            TextField_ColumnNumber.setValue(TableLayout1.columns);

            Window_TableProperties.show();
        }

        function Button_ApplyTableLayoutProperties_Click() {

        }
    </script>
    </ext:ResourcePlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Hidden ID="Hidden_ContainerName" runat="server">
    </ext:Hidden>
    <ext:Hidden ID="Hidden_PanelName" runat="server">
    </ext:Hidden>
    <ext:Window ID="Window1" runat="server" Collapsible="true" Height="530" Icon="Application"
        Title="Title" Width="950" Padding="10" Hidden="true" Frame="true" Modal="true">
        <Items>
            <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:Panel ID="Panel2" runat="server" Height="400" Layout="Fit" FieldLabel="HTML">
                <Content>
                    <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Height="398" Value="" HtmlEncodeOutput="true" EnableXHTML="true">
                    </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="true" Height="300" Icon="Application"
        Title="Table Properties" Width="400" 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="border">
        <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:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="Button_AddNewColumn" runat="server" Text="Add New Column">
                                <Listeners>
                                    <Click Handler="Button_AddNewColumn_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="400" 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>
  4. #4
    Jan 13, 2011, 12:34 PM
    Hi,

    You have to use correct container (container which contains TableLayout). In your case it is Panel9
  5. #5
    Jan 13, 2011, 1:02 PM
    Yes, it works now. Thank you very much. Problem is solved.
  6. #6
    Jan 13, 2011, 1:44 PM
    One more this, Vladimir. I set Panel9.layoutConfig.columns=4;

    but, there is no effect in TableLayout. This is my code. I also tried doLayout() function. What should I do?

            function Button_ApplyTableLayoutProperties_Click() {
            var TextField_ColumnNumber = Ext.getCmp('<%= TextField_ColumnNumber.ClientID %>');
            var Panel9 = Ext.getCmp('<%= Panel9.ClientID %>');
            var columns = TextField_ColumnNumber.getValue();
            Panel9.layoutConfig.columns = columns;
            Panel9.ownerCt.syncSize();
            Panel9.ownerCt.doLayout();
        }
  7. #7
    Jan 13, 2011, 2:39 PM
    Hi,

    TableLayout doesn't support add/remove columns after container rendering
  8. #8
    Jan 13, 2011, 5:11 PM
    do you have other way to solve this situation? I have to increase or decrease columns number. Can you please help me?
  9. #9
    Jan 13, 2011, 8:00 PM
    Can you update svn for changing column number. Because, it should be changed dynamicly.
  10. #10
    Jan 13, 2011, 8:20 PM
    Quote Originally Posted by kenanhancer View Post
    Can you update svn for changing column number. Because, it should be changed dynamicly.
    An option for you might be to re-render the entire Panel+TableLayout during a DirectEvent or DirectMethod.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
Page 1 of 3 123 LastLast

Similar Threads

  1. Custom Property that can be set client side and posted back to the server
    By amgw in forum 1.x Help
    Replies: 6
    Last Post: Aug 11, 2011, 7:30 PM
  2. [CLOSED] How to access the property of user control in client side (by javascript)
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 28, 2011, 4:43 PM
  3. [CLOSED] How to set StyleSpec and BodyStyle property on client side?
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 24, 2011, 2:14 PM
  4. Grid Client Transactions(Client side insert/edit/delete)
    By kumarxlnt in forum 1.x Help
    Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM
  5. [CLOSED] Object existence on the client side if property Visible is set to false in code behind
    By mblume in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 15, 2009, 10:21 AM

Posting Permissions