[CLOSED] "Maximize" ext:Panel and ext:Htmleditor

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] "Maximize" ext:Panel and ext:Htmleditor



    Is it easy to add a "maximize" functionality for ext:panel and ext:htmleditor?

    Scenario: ascx's are dynamically added to a page. In "view" mode an ext:panel is displayed (html is inserted via panel.Html property). In "edit" mode ext:htmleditor is displayed. Controls have a limited height with autoscroll property turned on. However, a 'maximize' link or button would be great to dynamically generate a window with panel/htmleditor inside, populated with data (preferably client-side, without roundtrip to the server).

    I think this is not a complicated task, but unfortunately I don't have any extjs experience/knowledge. Any hints/samples would be greatly appreciated!
  2. #2

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor

    Hi haltenberg,

    Please provide me this code:

    
    ascx's are dynamically added to a page. In "view" mode an ext:panel is
    displayed (html is inserted via panel.Html property). In "edit" mode
    ext:htmleditor is displayed. Controls have a limited height with
    autoscroll property turned on.
    and I'll try to attach needed logic for you:

    
    However, a 'maximize' link or button would be great to dynamically
    generate a window with panel/htmleditor inside, populated with data
    (preferably client-side, without roundtrip to the server).
    Vladimir
  3. #3

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor



    Hi Vladimir,

    Thanks for your offer to help me out. The code in ascx is very simple:
    <ext:Panel ID="pnlItemWrapper" runat="server" AutoHeight="true" BaseCls="x-panel-header" BodyStyle="padding:5px;font-weight:normal;">
        <Content>
            <div style="float:left">
                ... some labels here ...
            
    
            <div style="float:right;clear:none;">
                <a href="void(0);">Fullscreen</a>
            
    
        </Content>
    </ext:Panel>
    <ext:Panel ID="itemContent" runat="server" Height="150" AutoScroll="True" />
    in the code-behind ascx has a business object as a public property. On PageLoad, object's property is assigned to itemContent.Html

    What I would like to achieve is when "Fullscreen" link is clicked (link can be replaced with ext:Button if this makes things easier), I want the itemContent ext:Panel to occupy full screen (unfortunately, the hosting page uses table design, if that matters. Just to let you know that ext:ViewPort is not used) and display the same itemContent.Html

    In case with the "edit mode", ext:HtmlEditor is displayed instead of ext:Panel and the goal is the same, however, when "unmaximized", the contents should go back to the normal control (E.g. html editor is "maximized", text is edited, some button clicked - edited text must persist).

    Thank you!
  4. #4

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor

    Hi haltenberg,

    I created a small Sandbox sample to get you started.

    See http://sandbox.ext.net/Panel/Maximize.aspx

    Instead of Panel, I would suggest using an <ext:Window> control which will allow a fullscreen mode.

    Basically what's happening in the sample is that I add two controls, a <ext:Panel> and <ext:Window>. The Window is hidden on initial Page_load. In the ScriptManager I add a little script to the DocumentReady event. The script gets the "Fullscreen" hyperlink and attaches a 'click' Listener. When the hyperlink is clicked, the click event is fired and shows+maximizes the window.

    An <ext:HtmlEditor> is added to a <ext:FitLayout> control. The FitLayout control stretches the HtmlEditor both width/height to fill the window.

    In the Window control I added a <Restore> Listener which listens for the Window to be restored to it's non-maximized size and just hides the window. The Window just waits hidden in the background ready to be shown again.

    When the 'Cancel' button is clicked, it calls the .restore() function of Window, which then fires the <Restore> Listener, which then hides the window.

    Hope this helps get you started.




    Geoffrey McGill
    Founder
  5. #5

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor

    I forgot to mention that the sample above should work with the v0.5.4 build, although there was a feature recently added to the OnClientClick property which will not work with v0.5.4. The Token ID feature was added to OnClientClick which enables setting just the ID property of the control and then internally the ID is converted to the .ClientID.

    Example (v0.5.4)

    OnClientClick="Window1.restore();"
    Example (v0.6.0)

    OnClientClick="{Window1}.restore();"
    Hope this helps.
    Geoffrey McGill
    Founder
  6. #6

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor

    Hi Geoffrey!
    Thanks for the sample!

    geoffrey.mcgill (7/15/2008)Instead of Panel, I would suggest using an <ext:Window> control which will allow a fullscreen mode.
    ext:Window is floating, while I need the control to be a flowing block-element. Is there a way to make window behave like a panel? This would surely make things easy: ext:Window with a FitLayout and HtmlEditor inside.

    Basically what's happening in the sample is that I add two controls, a <ext:Panel> and <ext:Window>. The Window is hidden on initial Page_load. In the ScriptManager I add a little script to the DocumentReady event. The script gets the "Fullscreen" hyperlink and attaches a 'click' Listener. When the hyperlink is clicked, the click event is fired and shows+maximizes the window.
    Well, maybe I was not clear in my requirements description. The page has many controls (panels, htmleditors). They all have text in them. In case with html editor(s): I want to be able to "maximize" the editor. In the solution you offered I would have to create a window in each control for the "maximized" version of the control, but how do I take the current text from the non-maximized editor to a maximized one, and then put it back to non-maximized one on window close/restore?

    Hope this helps get you started.
    Thanks for the sample! I am not sure if it is helpful in the scenario I am trying to implement, but it is definitely helpful in general. BTW, is there an index page for all the samples? This would really be useful for all 'newbie adopters' :-)

    Basically, the sample you provided misses an ext:htmleditor on initial page load below the ext:panel. And that's the part of particular interest to me: how to retrieve the value from ext:htmleditor clientside and put it into the maximized version (as well as do the opposite: get the value from maximized version before hiding the window and put it into the non-maximized version...
  7. #7

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor



    Just to explain what I am trying to achieve, here's the code that I have:

    The page dynamically loads user-controls "NoteControl.ascx" and adds them to asp:Panel with ID="pnlItems". Page also has a window which is not displayed by default.
    <asp:Panel ID="pnlItems" runat="server" />
    <asp:UpdatePanel ID=upWinPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
        <ContentTemplate>
            <ext:Window ID="windowItem" runat="server" Title="<%$ Resources:LanguageFile, Item %>" MinHeight="600" MinWidth="800" Closable="True" Show&#111;nload="false" CloseAction="Hide" Maximizable="true" Modal="true" HideParent="true">
                <ext:AnchorLayout ID="anchLayoutMaximizedWin" runat="server">
                    <ext:Anchor Horizontal="100%" Vertical="100%">
                        <ext:Panel ID="pnlContent" runat="server" />
                    </ext:Anchor>
                </ext:AnchorLayout>
            </ext:Window>
        </ContentTemplate>
    </asp:UpdatePanel>
    Here's the markup code of "NoteControl.ascx":
    <ext:Panel ID="pnlNoteHeader" runat="server" AutoHeight="true" BaseCls="x-panel-header">
        <Content>
            <div style="float:right;clear:none;text-align:right;">
                <ext:Button ID="noteMaximize" runat="server" AutoPostBack="false" Icon="PageWhiteMagnify" StyleSpec="display:inline;" />
            
    
        </Content>
    </ext:Panel>
    <ext:Panel ID="pnlNoteContent" runat="server" BodyStyle="max-height:150px;overflow-y:scroll;padding:5px;" />
    The goal is when the control's noteMaximize button is clicked, take the html of pnlNoteContent and put it into pnlContent on the client. As you might have noticed, the windowItem is wrapped in an update panel, so I am able to do this with a round-trip to the server, which is totally unnecessary, since the client has all the information already. The problem I ran into is that html property of ext:Panel is readonly :( Is there any easy way to do this, or should I just live with the UpdatePanel and do an extra round-trip?

    Thank you!
  8. #8

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor

    Hi haltenberg,

    Could you store the text value in a Hidden field, then pull the value from the hidden field and display it in either the pnlNoteContent or pnlContent as required?

    The hidden field would act as a temp client-side storage for the text/string value and would allow for getting/setting the value, which would work around the read-only feature of the Panel Conent. Although, you can get the raw Panel Content/Html dom value with the following code:

    Example

    pnlContent.body.dom.innerHTML
    If using the above, it might be best to set the .Html property instead of adding to the <Content> template. If you add to the <Content> template, the .innerHTML value above will be returned with a wrapping <div ...> element. The .Html properly does not include the wrapping element and basically, what you set is what you get.

    The following code sample demonstrates how to update the html content of a Panel using JavaScript.

    Example

    pnlContent.body.update("testing...");
    Hope this helps.
    Geoffrey McGill
    Founder
  9. #9

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor



    Geoffrey,

    Thank you so much!!!! This is exactly what I needed. I've already injected the two 'magic' lines (obj.body.dom.innerHTML and obj.body.update) into my code and everything works exactly the way I wanted. Once again, thank you very much for your help!
  10. #10

    RE: [CLOSED] "Maximize" ext:Panel and ext:Htmleditor



    Geoffrey,

    Sorry for bugging: how do can I clear the HtmlEditor value client-side? I've tried
    Ext.getCmp('myEditor').setRawValue('&amp;nbsp;');
    and
    &#100;ocument.getElementById('myEditor_Input').value='&amp;nbsp;';
    Ext.getCmp('myEditor').syncValue();
    None of that helped :(

    Thanks!
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: Nov 18, 2011, 3:36 PM
  2. Replies: 5
    Last Post: Sep 21, 2010, 5:08 PM
  3. [CLOSED] Maximize portlet
    By methode in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 15, 2010, 10:55 PM
  4. Using Panel and HTMLEditor
    By KCoder in forum 1.x Help
    Replies: 0
    Last Post: Feb 15, 2010, 8:00 AM
  5. Maximize Portlet
    By Neeraj Sharma in forum 1.x Help
    Replies: 0
    Last Post: Jan 27, 2009, 6:56 AM

Posting Permissions