Coolite Forums / Community Forums / Help

Help with viewport sample

LuB — Tue, 19 Aug 2008 11:43:50 GMT

Hi! I'm trying to adapt the viewport with BorderLayour sample to use in a personal project. I want to show an aspx page in each panel of accordion control, select an option of this panel (with buttons, links or anything) and show a page in a tab in center region.

But I have a problem: when I add in the panel some asp.net controls (buttons, for example), I have a crash when I click them. If I add coolite buttons, they doesn't show when I run the application. (I'm using AutoLoad property in the panel to show the page with the buttons). The buttons are visible if I run only the page which contains them (not the viewport page).

Can someone help me? (any sample or something like it would be very welcome!)

(Disclaimer: I'm from Argentina and my english sucks. Sorry if you can't understand me and thanks for trying!)

Firefox and DateField/DatePicker

GuS — Fri, 15 Aug 2008 09:31:35 GMT

Hi!

I have problem rendering the DateField/DatePicker in Firefox 3.x (which does not occurs in IE).
Was not happening in 0.4.x version.

Attached the screenshot.

Cheers.

Problems with Window and Buttons

GuS — Fri, 15 Aug 2008 09:09:35 GMT

Hi guys,

Since this new version i have a weird problem... I want to open a window when i click on a button but when i browse the page/site the window self open.

Here is a part of the code:

[code]
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="0" Height="300px"
Plain="True" BodyStyle="padding:10px" ButtonAlign="Center">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Instructivo">
<Content>
<p>En este apartado tendrá una guía instructiva para el usuario...</p>
</Content>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Reportes por Fecha" Width="300">
<Content>
<div id="tabsSearch1">
<table class="tabsSearchTable1" cellspacing="4" width="40%">
<tbody>
<tr align="left" valign="top"><td>
<asp:Label ID="searchLabel1" runat="server" Text="Fecha Inicial:"></asp:Label>
</td>
<td>
<ext:DateField ID="DateField1" runat="server"></ext:DateField>
</td></tr>
<tr align="left" valign="top"><td>
<asp:Label ID="Label1" runat="server" Text="Fecha Final:"></asp:Label>
</td>
<td>
<ext:DateField ID="DateField2" runat="server"></ext:DateField>
</td></tr>
<tr align="left" valign="top"><td></td><td>
<asp:Button ID="searchButton1" runat="server" Text="Buscar" />
</td></tr>
</tbody>
</table>
</div>
<ext:Window
ID="Window1"
runat="server"
Title="Resultados"
Width="550px"
Height="400px"
BodyStyle="padding: 6px;"
CloseAction="Hide"
Collapsible="True"
TriggerElement="searchButton1"
AnimateTarget="searchButton1">
<Content>
<ext:Panel
ID="Panel1"
runat="server"
Title="Reportes por Fecha"
Height="400px"
BodyStyle="padding: 6px;"
AutoLoad="searchResult.aspx"/>
</Content>
</ext:Window>
</Content>
</ext:Tab>

[/code]

Any tip?

NOTE: this was working before...

Problems with the Content of Cool-Panel

Penunuri — Mon, 07 Jul 2008 15:30:00 GMT

Hi !!!

I'm using the Coolite controls in a web application. Everything is fine, except for a little trouble with the Cool-Panel control. Let me explain. I have a Master Page, with three Panels that I use like a "menu container" and "footer containers". Sometimes (I don't know exactly when), when the page refresh, the text (or any object) inside the panels stays out of place, until I pass the mouse over them, then they put in place again. The panels are simple:

[code]

<cool:Panel ID="PanelPrincipal" runat="server" Title="Menu Principal"

Frame="True" AutoScroll="true" Width="200px" Height="460px"

Font-Size="Smaller" style="font-size: xx-small" >

<asp:TreeView ID="TreeOpciones" runat="server" ImageSet="Arrows"

onselectednodechanged="TreeOpciones_SelectedNodeChanged"

ontreenodepopulate="TreeOpciones_TreeNodePopulate"

NodeWrap="true" Width="190px" Font-Size="Smaller"

style="font-size: xx-small" >

<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"

HorizontalPadding="0px" VerticalPadding="0px" />

<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black"

HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />

</asp:TreeView>

</Content>

[/code]

I attach an image (Cool-Panel problem.jpg), so you can figure out this issue much better.

Thanks in advance, and Regards !!!

Alfonso Penunuri.

ext:Window position

haltenberg — Mon, 28 Jul 2008 12:26:42 GMT

I have an ext:Window on my page, which is not displayed on PageLoad and a bunch of user controls with buttons. When a button in user control is clicked, an iframe inside the window is updated client-side and the window is displayed (modal). Everything works fine when the page is not scrolled down. When the page is scrolled down and a button is clicked on any of the bottom user controls, I have to scroll up to see the window.

Is there anyway to make the Ext:Window show up in the centre of the screen, regardless of the scroll position (e.g. like Ext.Confirm -- it is always displayed in the centre)?

I believe the problem is that the window already exists and it's just being hidden/shown, but it doesn't know that the document scrolled down. So the question is: how do I tell the window what the new "center" is? My guess would be to create a BeforeShow listener for the window, but what do I set in the listener?

Thank you!

Window Position between postbacks

tonytony — Fri, 08 Aug 2008 01:55:18 GMT

i am a novice asp.net/ajax programmer.i am creating a window with coolite and i have to make postbacks.But when postback occurs window is moved to starting position(commonly center of the page)
all i want to do is actually when a users press buttons windows are shown.And if a post back occurs all windows preserve their current properties (position,visible /unvisible etc...)
why i cant do this?

Secondly i couldn't find a tutorial.Is there a tutorial?

create window from within another window

jlertle — Mon, 28 Jul 2008 20:16:56 GMT

Is it possible to create a window from a buttonfield in a gridview of another window but tie it to the viewport?

I have a main page [i]simplified[/i]:
[code]
<html>
<head runat="server">
<title>BICSI Vantage</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<ext:ScriptManager ID="ScriptManager1" runat="server" Theme="Gray" Hide="true">
<Listeners>
<DocumentReady Fn="Ext.get('lnkHome').on('click', function() { winHome.show(); });"/>
</Listeners>
</ext:ScriptManager>
<form id="MainForm" runat="server">
<div>
<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="True" Split="True">
<ext:Panel ID="NorthPanel" runat="server" Height="95" Title="Header" Header="False">
<Content>
<ext:Accordion ID="WestAccordion" runat="server" Animate="true" TitleCollapse="true">
<ext:Panel ID="Favorites" runat="server" Title="Favorites" Border="false" BodyStyle="padding:6px;" Icon="Star">
<Content>
<ul>
<li class="findindividual"><a href="#" id="lnkInd">Find Individual</a></li>
</ul>
</Content>
</ext:Panel>
</ext:Accordion>
</Content>
</ext:Panel>
</North>
</ext:BorderLayout>
</Content>
</ext:ViewPort>
<ext:Window ID="winInd" Showonload="false" Icon="User" Minimizable="true" runat="server" Collapsible="true" Title="Individual" AutoLoad="http://localhost:3077/BICSI-Vantage2/windows/favorites/findindividual.aspx" Width="800" Height="800" CloseAction="Hide">
</ext:Window>
</div>
</form>
</body>
</html>[/code]

and a window with a bunch of tabs with gridviews [i]simplified[/i]:
[code]
<script runat="server">
protected void RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "showInv")
{
Window win = new Window();
win.Title = "Invoice";
win.AutoLoad = "http://localhost:3077/BICSI-Vantage2/windows/financials/invoice.aspx";
this.form1.Controls.Add(win);
}
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>BICSI Vantage</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server" LoadScriptsBeforeUI="False">
</asp:ScriptManager>
<ext:ScriptManager ID="ScriptManager1" runat="server" Theme="Gray" Hide="true">
</ext:ScriptManager>
<div>
<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center>
<ext:Panel ID="Panel7" runat="server" Title="Result">
<Content>
<ext:FitLayout ID="FitLayout2" runat="server">
<ext:TabPanel ID="TabPanel2" runat="server" ActiveTab="2" Border="false"
Title="Center">
<Tabs>
<ext:Tab ID="InvoicesTab" runat="server" Title="Invoices">
<Content>
<asp:UpdatePanel ID="UpdatePanel9" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView5" runat="server" AllowSorting="True" AutoGenerateColumns="False"
DataSourceID="LinqDataSource3" OnRowCommand="RowCommand">
<Columns>
<asp:BoundField DataField="INVOICENUM" HeaderText="Inv #" ReadOnly="True" SortExpression="INVOICENUM" />
<asp:BoundField DataField="INVOICESTT" HeaderText="Inv Status" ReadOnly="True" SortExpression="INVOICESTT" />
<asp:BoundField DataField="INVOICEDATE" HeaderText="Inv Date" ReadOnly="True" SortExpression="INVOICEDATE" />
<asp:BoundField DataField="DUEDATE" HeaderText="Due Date" ReadOnly="True" SortExpression="DUEDATE" />
<asp:BoundField DataField="TOTALAMT" HeaderText="Total Amt" ReadOnly="True" SortExpression="TOTALAMT" />
<asp:BoundField DataField="BALANCEDUE" HeaderText="Bal. Due" ReadOnly="True" SortExpression="BALANCEDUE" />
<asp:BoundField DataField="PAIDFLG" HeaderText="Paid" ReadOnly="True" SortExpression="PAIDFLG" />
<asp:BoundField DataField="PAYMENTNUM" HeaderText="Pay #" ReadOnly="True" SortExpression="PAYMENTNUM" />
<asp:BoundField DataField="PAYMENTDATE" HeaderText="Pay Date" ReadOnly="True" SortExpression="PAYMENTDATE" />
<asp:BoundField DataField="ORDERSOURCE" HeaderText="Source" ReadOnly="True" SortExpression="ORDERSOURCE" />
<asp:BoundField DataField="SOURCECD" HeaderText="Source CD" ReadOnly="True" SortExpression="SOURCECD" />
<asp:ButtonField CommandName="showInv" HeaderText="InvNum"
InsertVisible="False" ShowHeader="True" DataTextField="INVOICENUM" />
</Columns>
</asp:GridView>
<asp:LinqDataSource ID="LinqDataSource3" runat="server" ContextTypeName="CV2DataContext"
TableName="INVOICE2s" Where="PAYEECD == @PAYEECD" Select="new (INVOICENUM, INVOICESTT, INVOICEDATE, DUEDATE, PRICEAMT, TOTALAMT, BALANCEDUE, PAIDFLG, PAYMENTNUM, PAYMENTDATE, ORDERSOURCE, SOURCECD)">
<WhereParameters>
<asp:ControlParameter ControlID="GridView3" Name="PAYEECD" PropertyName="SelectedValue"
Type="Int32" DefaultValue="0" />
</WhereParameters>
</asp:LinqDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Content>
</ext:ViewPort>
</div>
</form>
</body>
</html>
[/code]

I have the simplified rowcommand function that [i], I think,[/i] should just create an invoice window in the existing window but i get this error with some encrypted viewstate data highlighted in the debug screen:

[code]Microsoft JScript runtime error: 'this.ctl32' is null or not an object[/code]

if i use the same code in a pageload it works fine
[code]
protected void Page_Load(object sender, EventArgs e)
{
Window win = new Window();
win.Title = "Invoice";
win.AutoLoad = "http://localhost:3077/BICSI-Vantage2/windows/events/registration.aspx";
this.form1.Controls.Add(win);
}
[/code]

any ideas?

Javascript intellisense in VS for embedded ExtJS js files

jchau — Wed, 06 Aug 2008 12:21:50 GMT

Hi. What's the correct syntax to get javascript intellisense for the ExtJS framework embedded in the Coolite assembly? This is in reference to the following blog about ExtJS and intellisense that Geoffrey commented on:

http://blogs.msdn.com/webdevtools/archive/2008/03/12/jscript-intellisense-working-with-ext-js.aspx

ext:HtmlEditor in ext:Window

haltenberg — Thu, 24 Jul 2008 12:29:29 GMT

I have the following mark-up code:
[code]<asp:UpdatePanel ID="upWinPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<ext:Window ID="EditorWindow" runat="server" Title="<%$ Resources:LanguageFile, Note %>" MinHeight="600" MinWidth="800" Closable="True" Showonload="false" CloseAction="Hide" Maximizable="true" Modal="True" Icon="PageWhiteEdit">
<Content>
<ext:AnchorLayout ID="alWin" runat="server">
<ext:Anchor>
<ext:Panel ID="pnlWinMsg" runat="server" Height="0" AutoHeight="true" BodyStyle="background-color:#e4e4e4;" Border="False" AutoScroll="True" BodyBorder="False" Header="True" HideBorders="True">
<Content>
<asp:Label ID="lblErrorMsg" runat="server" CssClass="red" />
</Content>
</ext:Anchor>
<ext:Anchor>
<ext:FieldSet ID="fldsetEditorEmail" runat="server" Icon="EmailGo" Title="<%$ Resources:LanguageFile, SendByEmail %>" Collapsible="True" TitleCollapse="True" Cls="AssignmentFieldset" Collapsed="true" StyleSpec="margin:5px;" Height="135">
<Listeners>
<Collapse Handler="Ext.getCmp('btnSendEmail').hide();" />
<Expand Handler="Ext.getCmp('btnSendEmail').show();" />
</Listeners>
<Content>
... some textboxes with labels here ...
</Content>
</ext:FieldSet>
</ext:Anchor>
<ext:Anchor Horizontal="100%" Vertical="100%">
<ext:HtmlEditor ID="HtmlEditor" runat="server">
</ext:Anchor>
</ext:AnchorLayout>
</Content>
<Buttons>
<ext:Button ID="btnSendEmail" runat="server" Icon="EmailGo" AutoPostBack="false" Text="<%$ Resources:LanguageFile, EmailSend %>" OnClientClick="document.getElementById('hbtnEmail').click();" />
<ext:Button ID="btnSave" runat="server" Icon="Disk" AutoPostBack="false" Text="<%$ Resources:LanguageFile, Save %>" OnClientClick="document.getElementById('hbtnSave').click();" />
<ext:Button ID="btnNoteCancel" runat="server" Icon="Cancel" AutoPostBack="false" Text="<%$ Resources:LanguageFile, Cancel %>" OnClientClick="Editorwindow.hide();" />
</Buttons>
</ext:Window>
</ContentTemplate>
</asp:UpdatePanel>[/code]

Two issues that I have with this:

1. This works perfeclty well and as expected when the window is displayed and HtmlEditor content is populated or empty. The fieldset collapses/expands and HtmlEditor's size is changed respectively to fit all the controls inside the window. However, when I start typing in the editor and when I reach the visible bottom of the entry field, the editor grows and occupies 100% of window height, making the fieldset above the editor disappear (scroll beyond visible boundaries of the window, no scrollbars displayed). This does not happen in FireFox, but happens in IE7. Is there any way to prevent editor from "growing" its height?

2. As you might see from the markup code above, the window is not shown on page load, and the fieldset in the window is collapsed by default. When I load the page, for about 1 second I see the fieldset content labels/texboxes on the page, which then disappear. I guess Ext rebuilds dom? When window is displayed, fieldset is collapsed as expected and behaves appropriately. Is there any way to prevent this "flicker" on page load?

Thank you!

Viewport and TreeView

t0ny — Tue, 05 Aug 2008 07:23:01 GMT

Hi, I hope this is a simple question.

I am using the viewport control and in the west panel I have a treeview. Can anyone tell me the best way to get the center panel to update using an updatepanel when clicking an item in the treeview?

I was thinking have a trigger on the center panels updatepanel, but I am not sure what event to use on the treeview?

Also, the treeview is created dynamically; so would I need to add the triggers in the codebehind?

Thanks
Tony

Unterminated string constant

t0ny — Mon, 04 Aug 2008 05:52:40 GMT

Hi there,

If I use an ext:textarea and populate it with some text from a database that has newlines in it, I get 'Unterminated string constant'.

'I think' this happens when coolite builds the page... I can see it falling over on this part:

[code]this.SiteCommentsTextArea.setRawValue("blah blah blah

blah blah

blah blah blah

");
[/code]

ext:Window Hide Handler

haltenberg — Mon, 16 Jun 2008 10:14:34 GMT

How do I attach a server-side handler to ext:Windows's hide event? I need to perform some server-side action when the window is hidden.

Also, from what I understand, if the CloseAction is 'Close' (default), there is no way to open this window after it had been closed? Therefore I should use CloseAction="Hide" if I need the ability to reopen the window (e.g. on button click)?

Thank you!

How to use ext:Window to open new aspx page?

jchau — Thu, 24 Jul 2008 06:41:56 GMT

On a button click in my main page, I want to pop open a new dialogaspx page inside an ext:window. I set the Window's autoload propertybut it seems like the dialog page is loaded when the main page isloaded. Is there a way to load the aspx page inside the Window onlywhen the Window is shown? I would also like to add parameters to theurl of the dialog aspx page before it is shown.

Advice / best practice request for custom component development

conor — Tue, 22 Jul 2008 07:17:50 GMT

Hi guys,

Loving Coolite controls... I am busy trying to develop/playing around with some custom controls (some of which are composite controls) and interested in what the best approach for this would be. What I mean by this is at what stage in the Page Lifecycle is it best to do things such as:
- Add Component Controls to the ItemsCollection; OR should we add to the ContentControls (if supported)
- Adding permanent events to a custom control (is it best to add this in the code, or add a javascript resource file to the output)

Below is some sample code to show what I am meaning above (some code has been commented out to show areas where I have tried to add listeners to the custom control in the code - which didnt work by the way....).

[code]
using CoolExt = Coolite.Ext.Web;

namespace Coolite.Ext.ux.Samples
{
public class CustomPanel : CoolExt.Panel
{
//some custom div we want to manipulate
private CustomDiv div = new CustomDiv();

protected override void OnInit(EventArgs e)
{
base.OnInit(e);

this.ConfigCustomPanel();
}

//settings for panel
private void ConfigCustomPanel()
{
//panel settings
this.Width = Unit.Pixel(250);
this.Height = Unit.Pixel(250);

//add custom component to control
div.Html = "testing custom div";
this.ContentControls.Add(this.div);

}

//protected override void OnPreRender(EventArgs e)
//{
// //test function
// string fn = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";

// //add function to custom div
// this.div.AddListener("click", "function(el){" + fn + "}");

// base.OnPreRender(e);
//}

}

public class CustomDiv : CoolExt.Component
{
public string Html
{
get
{
return (string)this.ViewState["Html"] ?? "";
}
set
{
this.ViewState["Html"] = value;
}
}

protected override void RenderContents(HtmlTextWriter writer)
{
if (!string.IsNullOrEmpty(this.Html))
{
writer.Write(this.Html);
}
base.RenderContents(writer);
}

//protected override void OnPreRender(EventArgs e)
//{
// //test function
// string fn = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";

// //add function to div
// this.AddListener("click", "function(el){" + fn + "}");

// base.OnPreRender(e);
//}

}
}
[/code]

When one of the PreRender code is uncommented, I always get a javascript error after the page has been rendered saying that ctrl_blah (or a specific ID if I specify the ID) has no properties.

When reviewing the markup and javascript output by the ScriptManager, I noticed that "_Content", "_Container" is added to the ID for the markup and is dependant on the type of base object of the custom control. However, in the javascript there is no reference to the rendered ID before trying to reference it. This is not the case when adding coolite controls, but not for the custom ones, especially ones which have Component as the base type. (i.e. no "contentEl" property has been added to the javascript output to create the association)

Some sample javascript / html snippets
[code]

this.ctl05.on("click",function(el){Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));});

<div id="ctl03_Content"><div id="ctl05_Container">
hello there </div></div>

[/code]

Obviously I am missing the point here somewhere.. If I try add the Listener to the ScriptManager after PreRender it doesnt render since I believe the scripts have already been rendered. If I add it when the component is Initialized (i.e. OnInit), then it says that the ScriptManager needs to be added before adding scripts to it....

To give you an idea why I am looking at doing everything programmatically, is the creation of a composite control with a "pluggable" interface model for custom modules. This would then be implemented via markup similar to the following:

[code]
<ext:InterfaceType ID="InterfaceTypeContainer" runat="server" >
<Content>
<ext:Core id="coreCustomisation" runat="server">
<ext:Informer id="informer" runat="server"
Display="true" AllActions="true">
</ext:Informer>
<ext:CoreModules id="modules" runat="server">
<ext:Module id="core1" runat="server"></ext:Module>
<ext:Module id="core2" runat="server"></ext:Module>
</ext:CoreModules>
</ext:Core>
<ext:Plugins id="pluginComponent" runat="server">
<ext:Plugin id="plugin1" runat="server"></ext:Plugin>
<ext:Plugin id="plugin2" runat="server"></ext:Plugin>
<ext:Plugin id="plugin3" runat="server"></ext:Plugin>
<ext:Plugin id="pluginEtc" runat="server"></ext:Plugin>
</ext:Plugins>
</Content>
</ext:InterfaceType>
[/code]

i.e. remove the Layout/Structure from the developer and creating a model for developers to add your their own "plugin" type components, which can then interact with each other with a common data layer model... The backend models and how they communicate with each other is not my issue here.. I can see Coolite control UI capabilities as the perfect marriage for such a system. What I am struggling with (probably since I am not a UI developer) at the moment is determining the rendering model for custom controls.

Any advice how best to approach the development of custom objects that have custom javascript, CSS and/or markup would help immensely.

thanks,
Conor

Programmatically show/hide borderlayout regions

jchau — Thu, 26 Jun 2008 13:28:52 GMT

I have a viewport in my masterpage. The north region has a header image, a RadMenu control, and a RadToolbar control. The other 4 regions have contentplaceholders that a content page can populate if needed. If a region is empty, I would like to hide it. How can I achieve this? Since the viewport is in a masterpage, it needs to be very flexible. I will have up to 50 pages in this website. There could be 10 pages that use center region only, 20 pages that use center and west, and etc. I want the content page to tell the masterpage which region to show.

COOLITE & EXTJS 2.0

t0ny — Tue, 29 Jul 2008 09:47:47 GMT

Hi there, just revisiting a project that I partially developed using extjs Extender, which I had to leave for a few months for another project, which i developed sing coolite.

My experience with coolite has been much more enjoyable and productive, so I would like to redo the original app using coolite.

However, the application relied on the the treeview control so I was wondered as this is not done in coolite yet if someone could point me in the right direction for perhaps using the extjs one or something ???

Thanks for any help.

Viewport Header

t0ny — Mon, 28 Jul 2008 03:36:46 GMT

Hi,
I have asked this question before, but I did not make it clear what I was after.

I am using the viewport, but I would like a header (div) at the top ABOVE the north tag as I have the north tag collapsed 99% of the time, but would like the app header visible 100% of the time.

Can anyone suggest anything?

Thanks

Tooltips?

haltenberg — Tue, 22 Jul 2008 18:49:38 GMT

Is there any way for ext:Buttons to have tooltips?
Thanks!

"Maximize" ext:Panel and ext:Htmleditor

haltenberg — Sun, 13 Jul 2008 13:45:32 GMT

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!

Dynamic Accordion Items

danr — Wed, 23 Jul 2008 07:10:28 GMT

Hi,
Is there any way to dynamically create templated content inside accordion object? I´d like to get functionality like in code below:

[code]
<ext:Accordion ID="accMenu" runat="server" Animate="true">
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<ext:Panel ID="pModuleMenu" runat="server" Title="Navigation" Border="false" BodyStyle="padding:6px;">
<Content>
<asp:Repeater ID="rptSubItems" runat="server">
<ItemTemplate>
<a href="<%# url %>"><%# name %></a>
</ItemTemplate>
</asp:Repeater>
</Content>
</ext:Panel>
</ItemTemplate>
</asp:Repeater>
</ext:Accordion>
[/code]

thanks

Required Field Validation

t0ny — Tue, 22 Jul 2008 02:17:21 GMT

Hi there,

The more I use coolite the more I love it. Can't wait for the tables to appear and someday the treeview too!!
Anyway enough *** kissing, here is my question:

On a viewport run page I have an ext:window that is getting displayed like so:

[code]
<ext:Button ID="NewSiteButton" Icon="DatabaseAdd" StyleSpec="display:inline;" runat="server" Text="New" AutoPostBack="False">
<Listeners>
<Click Handler="NewSitewindow.show();" />
</Listeners>
</ext:Button>
[/code]

On the displayed window I have a couple of fields that are required and a save button. In ASP.NET I would slap on a requiredFieldValidator and it would handle the client script. In doing this however a postback occurs and when I next open the window the requiredFieldValidator is displaying it's error.

Here is the save button on the window:
[code]
<ext:Button ID="NewSiteSaveButton" Icon="DatabaseAdd" StyleSpec="display:inline;" CausesValidation="true" runat="server" Text="Save" OnClick="NewSiteSaveButton_Click">
</ext:Button>
[/code]

Is there something I need to do for this to work client side like it normally does or does this all have to be handled within the save button listeners?

Thanks in advance for any help.

PS: Is there a way to have a div displayed above a viewport control?

DateField - Configuration / Setup

stevenoc — Fri, 18 Jul 2008 01:45:18 GMT

Hi there,

I have a few questions with regards to the DateField control:
a.) Does anyone know how one could add an "input mask" onto the dateField control?

b.) How can one change the "InvalidText" message ("<DateField Text value> is not a valid date - it must be in the format Y/m/d), as all I want to change is the format section (to yyyy/mm/dd).

On a side note:
With regards to the validation, take for example the following date "2008/07/01". Surely the validation should pass the following as a valid date "2008/7/1" as it is the same as "2008/07/01".

Regards
Steven O'Connor

Theming

mindcore1 — Mon, 18 Feb 2008 20:37:24 GMT

I'm attempting to implement some theming based on the user themes from extjs at [url]http://extjs.com/learn/Ext_Extensions#User_Themes[/url] and I'm not having much luck. Do I need to integrate the css into my asp.net theme or is there a better way to do this?

Dynamically create Ext: Tab at runtime.

admiral — Sat, 19 Jul 2008 16:36:34 GMT

Hi Coolite Team,

I just started out exploring the toolkit and I was wondering if there's a way to dynamically creating a new tab when an ASP LinkButton control is clicked(server-side).

I was playing with the ViewPort sample found here and I wanted to add an ASP LinkButton inside the Navigation panel and when it's clicked, I would create a new tab inside the <Center> of ViewPort by invoking this event:

[code]
protected void LinkButton1_Click(object sender, EventArgs e)
{
Tab fees = new Tab();
fees.Closable = true;
fees.Title = "Fees";
fees.AutoLoad = "Fees.aspx";

center.Items.Add(fees);
}
[/code]

How to add Accordian within code with Viewport in master page

stevejebson — Mon, 14 Jul 2008 10:46:44 GMT

Hi,

Like everyone else i've read posting for the 1st time i REALLY DO have to tip my hat to you guys, i tried to implement extjs into a .net app and spent days upon days trying to get it to work. This is looking really hopeful.

I'm a bit of a beginner in .net as well !

Ok, i've set up the standard viewport in a master page and i'd like to add an accordian panel to the East panel, i've had a look at the complex c# layout from geoffrey but this is creating the whole viewport within th code and i just want to add some content to the existing viewport.

Steve

Localization question

haltenberg — Fri, 18 Jul 2008 16:21:22 GMT

What is the best and the easiest way to have Ext.MessageBox.confim render its buttons in the language I need? For panel titles, etc I use global resources language file, but for confirm buttons, I don't even know how to access that in ASP.NET. I found that button text is hardcoded (C:\Program Files\Coolite\Coolite Toolkit - Version 0.5.4\Community Edition\Coolite - Drag into your Project [not required]\extjs\ext-all-debug.js). Any thoughts?

textfield autogrow

jlertle — Thu, 17 Jul 2008 18:06:55 GMT

I have a textfield with grow turned on. The textfield only grows once I click into it.

Is this the default behavior?

[code]<ext:TextField ID="LASTNAMETextBox" runat="server" Grow="true" GrowMin="120" Text='<%# Bind("LASTNAME") %>'>
</ext:TextField>
[/code]

I am using growmin for formating purposes...

Render delay

oskarni — Thu, 17 Jul 2008 08:39:23 GMT

Hi guys, congratulations for the great work.

I've been having this issue for a long time, probably I'm missing something...

There is a delay to show the ext objects (generated by coolite) in the page when it loads. When the page loasds the content of all Coolite containers appears rendered but disordered.. after a couple of seconds (more than a couple i fyou have a lot of coolite controls) the ext objects appear and everything looks fine..

There is any way to improve this behavior? Options will be, to make ext objects render before or to hide contents until everithing gets rendered...

Any ideas?

Cheers,

CardLayout

Lex — Wed, 16 Jul 2008 08:02:30 GMT

Hi there!

this is the first time I write here but I follow this forum for quite a long time.
I want to thank you for this wonderful Control... It is so intuitive that I never needed to write to you... at least... until now! ;)

The question is: what about the CardLayout? How it works?

I have a ViewPort in a MasterPage and into the 'Center' panel of the BorderLayout there's the ContentPlaceHolder. Now, I have to put into a Content Page a structure like a "wizard" (you know... consecutive panels with "next" and "previous" buttons...).

I see ExtJS have a class named CardLayout (Ext.layout.CardLayout) that it works exactly as I want and I found it into the Coolite Toolkit too... but it doesn't seems to work...

Basically when I try to write a code into the tag's control (I prefer write directly html code rather than works in design mode) it doesn't accept anything of my code (like tag "Content" or other controls such as panels, tabPanels etc...) and it doesn't open the intellisense window when I start to write some code ('<ext:...').

What's the problem? There's something wrong in this control or in my head? ehheh ;)

Thank's in advance!

Alessandro.

PS: I'm sorry for my poor english... I hope you understood my post!!! :S

Unterminated String Constant

jlertle — Thu, 17 Jul 2008 17:25:54 GMT

I have a few fields in my table, billtoaddress and shiptoaddress, that contain CR/LFs.

When attempting to display the data, I tried textfield and textarea, I'm getting "Unterminated String Constant" errors.

I checked the debug and the javascript is getting split due to these CR/LFs.

What's the prefered method to avoid this?

It's an escaping issue but I'm not sure if the fix you are working on for Timothy's post, http://www.coolite.com/forums/Topic931-16-1.aspx, will fix this too.

Thanx in advance!

Button with menu

marciocxs — Thu, 17 Jul 2008 10:46:38 GMT

Is there any possibility or prevision to implement a button with menu using the coolite controls.

The behavior of the button is like the far left one
at: http://extjs.com/deploy/dev/examples/menu/menus.html

It doesn't have to have checkboxes and fancy stuff (although it wouldn't hurt)

Is a TreePanel possible within coolite ?

stevejebson — Wed, 16 Jul 2008 12:46:34 GMT

I've searched through the forums and tried looking at the sandbox examples but can't find any reference to anything like the treepanel examples in th extjs examples. Does anybody know if it's possible or know of any simple examples ?

thanks.

Full width ext:TextArea ??

t0ny — Fri, 11 Jul 2008 02:05:32 GMT

Hi there,

I am using the viewport control and in the south panel I would like an ext:TextArea to fill the whole panel (as I need the text here to be updateable). Can anyone tell me how to acheive this as the width property only accepts a pixel measurement? and AutoWidth does not seem to do anything. I have tried FitLayout too without much luck.

Thanks
Tony

[code]

<South Collapsible="True" Split="True" MaxHeight="200px" MinHeight="200px" >
<ext:Panel ID="SouthPanel" Icon="comments" runat="server" Title="Site Comments" Height="200px" Comments" BodyStyle="padding:0px;" AutoScroll="True" >
<Content>
<ext:TextArea StyleSpec="display:inline;" ID="SiteCommentsTextArea" Height="128px" AutoWidth="true" runat="server">
</ext:TextArea>
</Content>
<Buttons><ext:Button ID="EditSiteCommentsButton" Icon="commentedit" StyleSpec="display:inline;" runat="server" Text="Edit Comments">
</ext:Button>
</Buttons>
</ext:Panel>
</South>
[/code]

Image buttons / Custom built buttons

conor — Mon, 14 Jul 2008 09:59:22 GMT

Hi there,

I am wondering if anyone has implemented a custom built button. I have been playing around with a number of methods, from extending the existing Ext.Button class in the toolkit, to creating my own from scratch. Neither have been what I am looking for.

Essentially, I am looking for a Ext.Button type object with the additional ability to render itself as a custom image instead of the usual button; while keeping the existing functionality as the Ext.Button control. This would include ability to have icons on the button, have different images (or use of a sprite) display for different states - i.e. normal, hover, click.

If this has not been implemented; then I would be interested in what the best practice methodology is for extending the toolkit and how best would one override the rendering of the control without losing core functionality.

thanks,
Conor

ColumnLayout and Mixed LayoutColumn Items

conor — Wed, 09 Jul 2008 04:00:36 GMT

Hi there,

Ha anyone been able to implement a fixed width for the LayoutColumn layout?

This creates two areas but with percentage widths and not fixed.

[code]
<ext:ColumnLayout ID="ColumnLayout1" runat="server">
<ext:LayoutColumn ColumnWidth="0.3" >
<ext:Panel ID="Panel3" runat="server" Border="false" Height="30">
<Content>
content1
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.7">
<ext:Panel ID="Panel4" runat="server" Border="false" Height="30">
<Content>
content 2
</Content>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
[/code]

What I want to do is something like this:
[code]
<ext:ColumnLayout ID="ColumnLayout1" runat="server">
<ext:LayoutColumn Width="250" >
<ext:Panel ID="Panel3" runat="server" Border="false" Height="30">
<Content>
content1
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="1">
<ext:Panel ID="Panel4" runat="server" Border="false" Height="30">
<Content>
content 2
</Content>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
[/code]

i.e. Have the first column have a fixed width of 250px and the other column fill the rest of the container.

At the moment Width is not a supported property for the LayoutColumn control. but ExtJS supports mixed layout settings. I am looking for a work around, so anyone with any ideas would be appreciated.

thanks,
Conor

No Update FieldSet with UpdatePanel in Windows

small_soft — Sun, 06 Jul 2008 20:09:03 GMT

[code]
    <ext:Window runat="server" ID="windowPort" Title="Cập nhật trạng thái cổng" AnimateTarget="statusPort" AutoScroll="true" AutoHeight="true" Width="500px" TriggerElement="statusPort" TriggerEvent="Click" CloseAction="Hide" Modal="True" Showonload="False" BodyStyle="padding: 6px;">
<Buttons>
    <ext:Button ID="cmd_StatusPort" runat="server" Text="Lưu" ></ext:Button>
</Buttons>
<Content>
    <ext:FieldSet ID="portA" Title="Port A" runat="server" >
        <Content>
            <div style="width:30%;float:left;">
                <asp:Label ID="lb_PortHost" runat="server" Text="Tổng đài/Trạm:"></asp:Label>
            </div>
            <div>
                <asp:Label ID="lb_PortHostData" runat="server" Font-Bold="true"></asp:Label>
            </div>
            <div style="width:30%;float:left;">
                <asp:Label ID="lb_Device" runat="server" Text="Thiết bị:"></asp:Label>
            </div>
            <div>
                <asp:DropDownList ID="drop_StatusPort" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drop_StatusPort_SelectedIndexChanged">
                    <asp:ListItem> -- Chọn trạng thái -- </asp:ListItem>
                    <asp:ListItem Value="0">Chưa kết nối</asp:ListItem>
                    <asp:ListItem Value="1">Đã kết nối</asp:ListItem>
                    <asp:ListItem Value="2">Hỏng</asp:ListItem>
                </asp:DropDownList> 
                <%--<asp:Label ID="lb_DeviceData" runat="server" Font-Bold="true"></asp:Label>--%>
            </div>
        </Content>
    </ext:FieldSet>
    <asp:UpdatePanel ID="UpdatePanelPort" runat="server">
    <Triggers><asp:AsyncPostBackTrigger ControlID="drop_StatusPort" EventName="SelectedIndexChanged" /></Triggers>
    <ContentTemplate>
    <ext:FieldSet ID="portB" Title="Port B" Collapsible="true" runat="server" >
        <Content>
            <div style="width:30%;float:left;">
                <asp:Label ID="Label1" runat="server" Text="Tổng đài/Trạm:"></asp:Label>
            </div>
            <div>
                <asp:Label ID="Label2" runat="server" Font-Bold="true"></asp:Label>
            </div>
            <div style="width:30%;float:left;">
                <asp:Label ID="Label3" runat="server" Text="Thiết bị:"></asp:Label>
            </div>
            <div>
                <asp:Label ID="Label4" runat="server" Font-Bold="true"></asp:Label>
            </div>
        </Content>
    </ext:FieldSet>
    </ContentTemplate>
    </asp:UpdatePanel>
</Content>
</ext:Window>
[/code]

Code Behind
[code]
    protected void drop_StatusPort_SelectedIndexChanged(object sender, EventArgs e)
    {
        portB.Enabled = false;
    }
[/code]When to select drop_Status, FieldSet not update with enable = fasle

Please help me
Thanks

How to add Plugins?

jxvalenz — Sun, 29 Jun 2008 20:05:18 GMT

How do you add plugins to coolite controls, e.g. the TabCloseMenu plugin to the Tab Panel control?

Don't want TextField AllowBlank to display validation error on initial page load

jchau — Wed, 02 Jul 2008 11:59:56 GMT

[code]
<ext:TextField ID="txtUsername" runat="server" MaxLength="64" Width="200px" AllowBlank="false"
BlankText="Username is required." MaxLengthText="Username can not exceed 64 characters.">
</ext:TextField>
[/code]

When the page loads, the textbox is already in an invalid state because there are no text in it. However, from ExtJS's demo page, their textbox only shows the validation error after it looses focus. Is there a property I can set to mimic that behavior? I only want the textbox to be validated when it looses focus or if a login button on the form is clicked.

Draggable Fieldsets?

jlertle — Wed, 02 Jul 2008 19:18:01 GMT

Has anyone had any luck getting a draggable fieldset to work?

If so would you mind posting a sample? ;)

thx

ext:button and AJAX

t0ny — Tue, 01 Jul 2008 07:45:11 GMT

Hi there,

I am using the excellent viewport control, and in my center panel I have a ext:button that does an update on a database. Using the ext:button I am running the code that preforms the update in the codebehind, but i was wondering how I would achieve this without having a whole postback occuring as this destroys all the contents of my pannels etc...

I realise this may well not be anything to do with Coolite and more a ASP.NET ajax issue, I am just a little new to AJAX and maybe need a hard punch in the right direction as to how to get the ext:button to run some serverside code without killing stuff!

Thanks for any help
Tony