PDA

View Full Version : [CLOSED] "Maximize" ext:Panel and ext:Htmleditor



haltenberg
Jul 13, 2008, 5:45 PM
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!

Vladimir
Jul 14, 2008, 3:15 AM
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

haltenberg
Jul 14, 2008, 12:38 PM
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!

geoffrey.mcgill
Jul 15, 2008, 8:09 AM
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
Jul 15, 2008, 8:40 AM
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.

haltenberg
Jul 15, 2008, 1:25 PM
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...

haltenberg
Jul 21, 2008, 2:14 PM
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!

geoffrey.mcgill
Jul 22, 2008, 7:34 AM
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.

haltenberg
Jul 22, 2008, 5:55 PM
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!

haltenberg
Jul 23, 2008, 10:06 PM
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!

geoffrey.mcgill
Jul 24, 2008, 6:10 AM
Hi haltenberg,

For all the Form controls you can get/set the value by using the .getValue() and .setValue() JavaScript functions.

To clear the HtmlEditor you should be able to use the following code.

Example


myEditor.setValue("");

Each Coolite Toolkit control is instantiated with their client-side ID, so there's generally no need to use Ext.getCmp() to get an instance of the control.

Hope this helps.