[CLOSED] Referencing page controls in JavaScript objects

  1. #1

    [CLOSED] Referencing page controls in JavaScript objects

    What is the best way to get hold of a reference to a control object in case the ids are not set explicitly or known?

    Let's say I have this JavaScript file referenced in an aspx:

    Ext.ns('MySpace');
    MySpace.Controller = Ext.extend(Object, {
      ui: <reference to an object in the page to be set later>
    ...
    });
    
    var controller = new MySpace.Controller();
    Page:

    <body>
      <ext:Viewport >
        ....
      </ext:Viewport>
     </body>
    What events should I use to set the controller.ui member to the viewport object that gets created assuming that the ID of the viewport is not known (i.e. IDMode is not explicit and the ids can be random)?

    I was thinking of using the AfterRender render event on the viewport and call: controller.ui = this;

    Also, another question related to this. I am creating the ui using code behind. Sometimes I have to create JavaScript functions that need references to certain controls on the page (to disable or enable buttons for instance). What is the best way to get hold of the client ids of these objects or to set references to these objects?

    Using the example above, let's say my controller class needs a reference to some buttons on the page, how would I inject those references into my controller JavaScript object?

    C# code:
    private Toolbar CreateToolbar()
        {
          return new Ext.Net.Toolbar
          {
            Items =
                       {
                         new Ext.Net.Button
                           {
                             ID = "newButton"
                             Text = "New",
                           },
                         new Ext.Net.Button
                           {
                             ID = "editButton",
                             Text = "Edit",
                           },
                       },
          };
        }
    In my JavaScript object I want controller.newButton to point to the newButton button and controller.editButton to point to the editButton. How would I achieve this?

    I posted another message related to ids, itemIds and refs: http://forums.ext.net/showthread.php...2425#post62425

    After more thought, I find using refs a pain because one has to keep track of the level of depth of a control in order to make that control available at the top level panel. If you are using the Ext Designer, it alleviates this problem by handling the autoref property for you, but in the Ext.Net world I don't like it because you can invalidate the reference pretty quickly after moving the controls around.

    So, I want to be in full control, I want to manually inject the references to control objects that I need to my own JavaScript objects, hence this post.

    Thank you
    Last edited by Daniil; Aug 17, 2011 at 9:44 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Yes, you can use the Viewport's AfterRender listener to get its instance.

    To get a "client reference" on server side you can use .ClientID.
  3. #3
    On the server side what events should I use?

    In this message: http://forums.ext.net/showthread.php...Controls-using

    Vladimir used in #1 OnBeforeClientInit(Observable sender).

    Another event that I've seen in the samples is: OnPreRender(EventArgs e)

    Any advice?

    Thanks
  4. #4
    To use .ClientID of a control you can use its OnLoad event.

    Is there a server control for MySpace.Controller?
  5. #5
    Yes, I actually created a component for MySpace.Controller.
  6. #6
    Ok, then you can create a server side property to contain an "ui" id (.ClientID) and add this property to CustomConfig collection to render that property to client side.

    Please see #3:
    http://forums.ext.net/showthread.php...ll=1#post31657
  7. #7
    Is there a way to force the controller to be generated before the ui is generated ? I am a bit in catch 22 situation. My controller has to be created before the Ui component.

    Here is what I mean. Below is the code that gets generated in the browser as a result of rendering the ext.net controls.

    //<![CDATA[
    Ext.net.ResourceMgr.init({
    id: "ctl00$ResourceManager1",
    BLANK_IMAGE_URL: "/AppName/extjs/resources/images/default/s-gif/ext.axd",
    theme: "blue",
    appName: "AppName",
    icons: ["Sitemap","Add","ApplicationFormEdit","Delete","TableRefresh"]
    });Ext.onReady(function(){Ext.QuickTips.init();new Ext.Viewport({
    id: "PageContent_MainViewPort",
    renderTo: Ext.getBody(),
    hideBorders: true,
    items: {
    id: "PageContent_ctl01",
    items: [ 
    ...
    Is there a way for me to create my controller before any UI is created?
    });Ext.onReady(function(){Ext.QuickTips.init();<Insert the creation of my object here>new Ext.Viewport({
    Last edited by Daniil; Aug 16, 2011 at 5:17 PM. Reason: Please use [CODE] tags for all code
  8. #8
    Well, just make your control the first one on a page.

    Something like this:
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Form.Controls.AddAt(0, new YourControl());
    }
  9. #9
    You can close the thread. I solved all my issues. I used the AddBeforeClientInitScript method to add a script before the component was created.

Similar Threads

  1. Replies: 6
    Last Post: Aug 13, 2013, 5:59 AM
  2. Replies: 2
    Last Post: Jul 10, 2012, 1:23 PM
  3. Replies: 14
    Last Post: Apr 12, 2011, 2:49 PM
  4. Replies: 4
    Last Post: Apr 04, 2011, 8:54 AM
  5. [CLOSED] [1.0] Referencing User Controls using #{}
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 15, 2010, 10:59 AM

Tags for this Thread

Posting Permissions