Results 1 to 4 of 4

Thread: Using Placeholders for Custom Components

  1. #1
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    100
    Vote Rating
    2
      0  

    Question Using Placeholders for Custom Components

    I have two custom components that I am using and currently I am modifying the ui.js file to add them to the code. I know! That is not the best way to handle it. What I did was add a placeholder within the Designer (a TextField in place of the custom xDateTime field and a plain Panel in place of a ManagedIFrame panel.

    What would be a better way of replacing the placeholders in my initComponent() method of the .js file instead of directly modifying the items structure in the .ui.js file?

    --Stewart

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
      0  

    Default

    Yikes... :-) You can take what I said here and use the Ext.Container's "remove" and "insert" methods to take out and replace your placeholders. Let me know if you need additional help.

    You will also be happy to know that we're going to be adding the ability to configure and import user extension components and save/export your own user components. When we release that feature, you'll have the ability to stop using placeholders :-) I think it's clever that you're using placeholders though just for your design-time purpose to make sure things are laid out correctly...

  3. #3
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    100
    Vote Rating
    2
      0  

    Default

    It was the only way for me to be able to lay things out correctly. Ok. I will look into the remove and insert methods. If I need help, I'll ask!

    I am very anxious to get the next version of the Designer that has the ability to import custom components!

    --Stewart

  4. #4
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    100
    Vote Rating
    2
      0  

    Default

    Jarred,

    I got it working! Works like a charm! Here is what I did:

    1. Save the owner container of the placeholder object.
    2. Determine the index of the placeholder in its container.
    3. Remove the placeholder.
    4. Insert the new object at the saved index.

    Here is a sample of my code (note: MapFrame is the autoRef of my placeholder object).

    Code:
    var ctnr = this.MapFrame.ownerCt;
    var i = ctnr.items.indexOf(this.MapFrame);
    ctnr.remove(this.MapFrame, true);
    ctnr.insert(i, {
        xtype: 'iframepanel',
        id: 'MapFrame',
        ref: 'MapFrame',
        region: 'center',
        defaultSrc: 'http://www.mydomain.com/myapp/...'
    });

Similar Threads

  1. Custom Components with HTML Encoding
    By Tom23 in forum Ext 3.x: User Extensions and Plugins
    Replies: 0
    Last Post: 12 Dec 2009, 10:10 AM
  2. Form panel keeping placeholders from hidden items.
    By paulypaul in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Jul 2009, 8:31 AM
  3. Custom components!
    By leandrorc in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 13 May 2009, 10:47 AM
  4. Linking two components with custom events
    By moisiFr in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 18 Jan 2009, 9:50 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •