[CLOSED] ext:Window: Creating in JavaScript

  1. #1

    [CLOSED] ext:Window: Creating in JavaScript

    Hi

    There are any example how create a ext:window in javascript?

    In link bellow, the examples are in ASP or C#:
    http://examples2.ext.net/#/Window

    I wish convert this function in Javascript:

    Public Function getWindow(ByRef wndCfg As SuperaWeb.WindowCfg) As Ext.Net.Window
            Dim wnd As New Ext.Net.Window
            Dim loader As New Ext.Net.ComponentLoader
            Dim btnExt As Ext.Net.Button
            'Dim btnCfg As ButtonCfg
            'Dim btnCfgJ As Newtonsoft.Json.Linq.JObject
            'Dim i As Integer
    
            loader.Url = wndCfg.Url
            loader.Mode = Ext.Net.LoadMode.Frame
            loader.LoadMask.ShowMask = True
            loader.LoadMask.Msg = "Carregando..."
    
            wnd.ID = Library.General.GetKey("window_")
            wnd.Title = wndCfg.Title
            If wndCfg.Icon <> "" Then
                'ainda no sei como carregar um icon url via cdigo
            Else
                wnd.Icon = Ext.Net.Icon.ApplicationForm
            End If
            wnd.AutoRender = False
            wnd.Collapsible = False
            wnd.Hidden = True
            wnd.AutoRender = False
            wnd.Maximizable = False
            wnd.Modal = True
            wnd.Loader = loader
            wnd.Resizable = False
            wnd.BodyPadding = 6
            wnd.Constrain = True
            wnd.CloseAction = Ext.Net.CloseAction.Destroy
            wnd.Height = wndCfg.Height
            wnd.Width = wndCfg.Width
            wnd.Listeners.BeforeDestroy.Handler = wnd.ClientID & ".getBody().App.direct.BeforeDestroy();"
            wnd.Listeners.BeforeDestroy.Delay = 1
    
            'For i = 1 To wndCfg.Buttons.Count
            For Each btnCfg In wndCfg.Buttons
                'btnCfg = DirectCast(wndCfg.Buttons(i), ButtonCfg)
                If TypeName(btnCfg) = "JObject" Then
                    btnExt = New Ext.Net.Button
                    btnExt.ID = Replace(btnCfg("ID").ToString, "[WINDOWID]", wnd.ID)
                    btnExt.Text = btnCfg("Text").ToString
                    btnExt.TextAlign = Ext.Net.ButtonTextAlign.Center
                    btnExt.Icon = btnCfg("Icon").ToString
                    btnExt.Listeners.Click.Handler = Replace(btnCfg("ClickHandler").ToString, "[WINDOWID]", wnd.ClientID)
                    btnExt.Listeners.Click.Delay = 1 'esta instruo foi passadas pelo Daniil para resolver alguns bugs nos javascripts.
                    btnExt.Hidden = CBool(btnCfg("Hidden").ToString)
                Else
                    btnExt = New Ext.Net.Button
                    btnExt.ID = Replace(btnCfg.ID, "[WINDOWID]", wnd.ID)
                    btnExt.Text = btnCfg.Text
                    btnExt.TextAlign = Ext.Net.ButtonTextAlign.Center
                    btnExt.Icon = btnCfg.Icon
                    btnExt.Listeners.Click.Handler = Replace(btnCfg.ClickHandler, "[WINDOWID]", wnd.ClientID)
                    btnExt.Listeners.Click.Delay = 1 'esta instruo foi passadas pelo Daniil para resolver alguns bugs nos javascripts.
                    btnExt.Hidden = btnCfg.Hidden
                End If
                wnd.Buttons.Add(btnExt)
            Next
    
            wnd.Show()
    
            Return wnd
    
        End Function
    Last edited by Daniil; Apr 04, 2012 at 5:41 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Generally, it looks:
    Ext.create("Ext.window.Window", {/* config */});
    I'm going to demonstrate the following technique which will help you.

    Imaging that you have an example on C# or markup. Or you have no such example, but know how to implement some requirement on C# or markup.

    Then you can easily get a respective JavaScript code.

    1. Take or implement C# or markup example.

    Lets consider the following page.

    Example Page
    <%@ Page Language="C#" %>
    
    <%@ 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 runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Window runat="server" Title="Title" Html="Hello World!" />
    </body>
    </html>
    2. Run it in, for example, FireFox.

    3. Then see the Page Sources (Ctrl + U in FireFox).

    4. Search for "Ext.onReady" - there is a required script. Copy that script.

    5. To easily format it you can use
    http://jsbeautifier.org/

    Here is the result:
    Ext.onReady(function () {
        Ext.create("Ext.window.Window", {
            height: 100,
            hidden: false,
            html: "Hello World!",
            renderTo: Ext.getBody(),
            width: 200,
            draggable: true,
            title: "Title"
        });
    });
  3. #3
    Hi Daniil

    Thanks a lot for your tip... that will be great help!

    Thanks a lot.

Similar Threads

  1. [CLOSED] creating tabStrip in javascript
    By supera in forum 2.x Premium Help
    Replies: 2
    Last Post: May 10, 2012, 6:58 PM
  2. Replies: 0
    Last Post: Mar 27, 2012, 11:01 AM
  3. [CLOSED] Creating and Show ext.Window in CodeBehind
    By supera in forum 2.x Premium Help
    Replies: 2
    Last Post: Mar 08, 2012, 4:31 PM
  4. Replies: 7
    Last Post: Aug 04, 2011, 6:11 PM
  5. [CLOSED] creating more than one window at runtime
    By fabiomarcos in forum 1.x Help
    Replies: 2
    Last Post: Nov 27, 2008, 2:15 PM

Posting Permissions