Code behind content handling (from client events)

  1. #1

    Code behind content handling (from client events)

    Hello, I got stuck again on something.

    What I want: to be able to click something and make a page load right below it (and above the next something that might happen to be on screen).
    What complicates it: I don't know how many somethings will be on screen so I have to create them via code behind
    What I couldn't do: fire the something.load() client-side method once the object is built and I can interact with it using (for example) show/hide methods.
    What have I based on: https://examples2.ext.net/#/Loaders/...Direct_Method/

    Here is the KISS code for it:
    aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="loaderFromCB.aspx.cs" Inherits="ExtNetPlayground.loaderFromCB" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Panel runat="server" ID="pn1" Height="600" />
        </div>
        </form>
    </body>
    </html>
    aspx.cs
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    using x = Ext.Net;
    
    namespace ExtNetPlayground
    {
        public partial class loaderFromCB : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                var iterator = 1; // it would be an iterated number, left constant for simplicity
                var panId = "pnl" + iterator;
                var panIdJs = "#{" + panId + "}";
                var lbl = new x.Button { Text = "Click to show/hide page." };
                lbl.Listeners.Click.Handler = "if ( " + panIdJs + ".isVisible()) { " + panIdJs + ".hide(); } else { " + panIdJs + ".show(); };"; // can't add a //" + panIdJs + ".load()// here
    
                var pnlLoader = new x.ComponentLoader
                {
                    Url = "http://www.ext.net/",
                    Mode = LoadMode.Frame,
                    LoadMask = { ShowMask = true },
                    AutoLoad = true // this true, and pnl below, Hidden = false, makes the page load "on load"
                                    // this true, pnl with 'Hidden = true' makes the page not load "on load" (good). Shouldn't trigger on 'show()'? Prolly no.
                };
    
                // interesting fact: if you hide this panel before page is loaded, the panel is hidden; not its load mask. :)
                var pnl = new x.Panel() { 
                    ID = panId, 
                    Hidden = true, 
                    Loader = pnlLoader, 
                    Height = 200, // want to make it 100%, scrolling only once height exceeds 400 pixels
                    MaxHeight = 400 
                };
                lbl.AddTo(pn1);
                pnl.AddTo(pn1);
            }
        }
    }
    Thank you very much! I'll ask my boss to purchase premium support when this page I am trying to build is ready! heh
  2. #2
    The resulting js code when I try the .load() is:
    if ( Ext.get("pnl1").isVisible()) { Ext.get("pnl1").hide(); } else { Ext.get("pnl1").show(); Ext.get("pnl1").load() };
    Seems like the pnl1 has not the load() method although it accepts a loader successfully. I am not sure how could I determine whether the control has or has not the loader's 'load()' method. I tried using a window in place of panel also, same error. It seems its not a control-related issue. But I missed something in the lesson by the example.

    I hope it is not again some limitation from Asp.NET. :) This time I tried something client-side so anything code behind created should be accessible. Unless proven otherwise. :P
  3. #3
    Alright... This fresh fresh post from daniil solves my problem... Silly me... :)

    /away reading ext.net events introduction.

    EDIT: for documentation purposes, the solution is:

    change line 19 in the aspx.cs on first post to:
    var panIdJs = "App." + panId;
    And voila, the .load() works just fine.

    I am curious why the isVisible()/.show()/.hide() worked just fine... Probably it is explained in the introductory document. :)
    Last edited by fabricio.murta; Oct 15, 2014 at 9:38 PM.
  4. #4
    Hi @avenger,

    I would recommend to avoid using of #{} at all. In the absolute majority of cases there is always a better way to go.

    But I see the more important problem in your code:
    lbl.AddTo(pn1);pnl.AddTo(pn1);
    The AddTo method is supposed to be used during a DirectEvent or a DirectMethod only.

    On initial load, please just put the controls into the Items collection.
    pn1.Items.Add(lbl);
    pn1.Items.Add(pnl);
  5. #5
    Thanks Daniil, it is all confusing, not sure when use which approach.

    In fact, I tried using the pn1.Items.Add() before, but in DirectEvents, and it failed. Some things looks so non-orthogonal to me, it's hard to know when use which approach. To me an lbl.AddTo(pnl) should be identical to pnl.Items.Add(lbl). I must read a lot more about Ext.Net, thanks for the support.
  6. #6
    I agree, it is quite confusing sometimes. Though, it is very difficult to address that issue. Maybe, we will be able to improve that in Ext.NET v3. As for v2, we won't for sure.

    I must read a lot more about Ext.Net
    Btw, have you read the Ext.NET Web Application Development book?
    http://ext.net/new-book-ext-net-web-...n-development/

    I think it is really worth to read.

Similar Threads

  1. [CLOSED] Handling Panel or GridPanel Resize / BodyResize events
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 15, 2013, 11:37 AM
  2. [CLOSED] TextArea client side events IE8 problem
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 27, 2012, 12:47 PM
  3. [CLOSED] NumberField set client Events server side
    By majestic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 05, 2010, 10:03 AM
  4. Replies: 1
    Last Post: Jun 03, 2010, 4:04 PM
  5. handling images in code behinde
    By pearl in forum 1.x Help
    Replies: 8
    Last Post: Sep 03, 2009, 3:26 AM

Tags for this Thread

Posting Permissions