Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: create entire UI without ids?

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default create entire UI without ids?

    Is it possible to create an entire UI without using element ids and without using existing HTML elements? We are trying to make our app modular which involves composing separate widgets into larger widgets that are reusable. Because a module may be used twice in the same page, we cannot have duplicate ids. But I noticed from the documentation that some elements mandate an id parameter. e.g.,

    Code:
    TabPanel.addTab("<element id>", ...)
    Is it possible to use all the widgets without using any ids at all?

    Thanks in advance.

  2. #2
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038

    Default

    No, nor would you really want to. What you should look into is auto-generating your ids based on some logic that guarantees uniqueness.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    Quote Originally Posted by JeffHowden
    No, nor would you really want to. What you should look into is auto-generating your ids based on some logic that guarantees uniqueness.
    Thanks. Since I plan on maintaining a reference to all my Javascript created objects, there is no use for id. Is it possible to tell the widgets (BorderLayout, TabPanel, etc.) that if I don't pass in an id, that it generate a random one by itself? And out of curiosity, what happens if I reuse an id? Does Ext do some optimization based on document.getElementById()?

  4. #4
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038

    Default

    Quote Originally Posted by em_te
    Quote Originally Posted by JeffHowden
    No, nor would you really want to. What you should look into is auto-generating your ids based on some logic that guarantees uniqueness.
    Thanks. Since I plan on maintaining a reference to all my Javascript created objects, there is no use for id. [...]
    That's a lofty goal. I'd guess that there'd still be a time when you'd really need to have an ID in order to do what you wanted.

    Quote Originally Posted by em_te
    [...] Is it possible to tell the widgets (BorderLayout, TabPanel, etc.) that if I don't pass in an id, that it generate a random one by itself? [...]
    Many of the classes will accept an Element. Off the top of my head, I couldn't tell you which ones though.

    Quote Originally Posted by em_te
    [...] And out of curiosity, what happens if I reuse an id? Does Ext do some optimization based on document.getElementById()?
    If you reused an ID, there'd be untold chaos as browsers rely on the developer providing a unique ID for every element an ID is assigned to.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    Quote Originally Posted by JeffHowden
    That's a lofty goal. I'd guess that there'd still be a time when you'd really need to have an ID in order to do what you wanted.
    It's either maintaining a reference or maintaining an id, if I want to get the element later on. Since the ids have to be dynamic, there's no point in recalculating the id each time to get the element. So I might as well keep a reference.

    Quote Originally Posted by JeffHowden
    Many of the classes will accept an Element. Off the top of my head, I couldn't tell you which ones though.
    Yes but, and correct me if I'm wrong, even if I pass in an Element reference, that element must also have a unique id beforehand, right?

    Quote Originally Posted by JeffHowden
    If you reused an ID, there'd be untold chaos as browsers rely on the developer providing a unique ID for every element an ID is assigned to.
    Thanks. If I recall correctly, it would only result in past elements with the same id to lose their id attribute. But they still remain in the dom and functions which maintain a hard reference to the object can still access it. It will only be cases where if a libraries only does getElementById instead of holding a reference, that it will end up with the wrong object. That and CSS styles will be lost, if based on id.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Ext.id() generates unique IDs.

    Just look at Firebug's HTML tab, and you'll see scores of ids that look like "ext-gen999". These have been generated by Ext's internal DOM manipulation.

    You will need to assign IDs. Ext.get() does cache Elements based on ID.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    Quote Originally Posted by Animal
    Ext.id() generates unique IDs.

    Just look at Firebug's HTML tab, and you'll see scores of ids that look like "ext-gen999". These have been generated by Ext's internal DOM manipulation.

    You will need to assign IDs. Ext.get() does cache Elements based on ID.
    Is that the only place where IDs are required? If I disable the cache, will the Ext widgets still work? I am willing to forgo speed for simplicity.

    I was looking at the source of "BasicLayoutRegion" and found that it accepts numbers in place of the id parameter and that the id is only used in a local hashtable. Since the hashtable is local, that means that I can use the same id for different BasicLayoutRegion's children and they still won't clash, right? Or is global caching still used, which I have missed.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    IDs must be unique.

    What are you finding so complex about assigning an ID?

  9. #9

    Default If your problem is loading as sub pages in content panels ..

    If the problem your having is that using the div tags cause the same page loaded twice to load it's control into the 1st pages div tag .. then read on.

    I am new - so bare with me with some of this is not correct - but my tests show the following works and explains some issues I was having as a newbie - hope it helps.

    This reply is assuming you are loading pages into a content panel and are loading the same one twice, into two seperate content panels. It assumes you are having an issue with the fact that the div tag is already on the page becuase it was loaded once and is still there.

    This is a "quick and dirty" method of creating multiple pages with the same div id. This is handy when you do not want to program the elements on the fly (due to complexity or location on page, etc). This may cause obvious issues I am not aware of as I am still new at this. So I hope someone will chime in if that is the case.

    Here is some sample code that goes over:
    1) The issue with loading 2 pages with the same div tag - and a simple workaround
    2) The issue of the 'this' reference in handler functions - and a simple workaround
    3) If you are loading objects and want them to be referenced later by the parent or other objects - then they MUST be defined a certain way to allow them to be referenced individually. If not, they will all become the "same object" and you will have issues.

    Loading Pages with the same div tag:

    Code:
    // This part is in reference to allowing each object to load into the parent page as an individual
    // bad -> Ext.onReady(function(){ .... 
    // bad -> me = function(){ .... 
    // note: Both of the above methods cause subloaded objects to reference the same object
    // note: if either of the two above methods are used, the button returns the same ids from all pages.
    
    // good start of internal object (below)
    // Notice variable name is (me) and is has a "var" in front
    // This is important - it will 'run' without the var but causes issues with all one object
    // Note: I used 'me' because this is short and this is defined in it's own "space" 
    //          so you can have an many "me's" as you want loaded into a parent page
    
    var me = function(){
    return {
    	test : function(o){
    // note: --- Reference to 'this' does not work, 'this' is out of context when called by toolbar
    // bad		alert('The object id is ' + this.subid + '  and the toolbar id is ' + this.tbid );	
    
    // good - using the reference to the 'me' variable which is the function name ... works
    		alert('The object id is ' + me.subid + '  and the toolbar id is ' + me.tbid );	
    	},
    	createToolbar : function(){
     	   //--- Quick and dirty way of loading a reserved div tag and then replacing it with a unique id
     	   //--- Without this, the second page loads into the 1st pages toolbar div tag
     	   //--- Other methods, such as dom element creation on the fly may work better 
               //--- did I mention --  this is just a simple demo :)
     	   
     	   //--- Find your div
    	   var tbel = Ext.get('divdemo-toolbar-area');
     	   //--- Make new id
    	   var newid = Ext.id();
     	   //--- Replace id on the DOM of the related div Element
    	   tbel.dom.id = newid;
     	   //--- Make a new toolbar
    	   var tb = new Ext.Toolbar(newid);
     	   //--- Add a highly functional button - setting local function as handler
    	   tb.add( {text: 'Test', handler: this.test} );
    	   //--- set a local variable used for test function, not really needed outside that
    	   this.tbid = newid
    	},	
    	init : function(){
    	     //--- Create toolbar, set object unique id to be called by test function 
                 //- Note: Can use this as a unique id for object to object calls (parent and loaded)
    		this.createToolbar();
    	        this.subid = Ext.id();
    	}
    }
    }();
    
    Ext.EventManager.onDocumentReady(me.init, me, true);

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    Quote Originally Posted by Animal
    IDs must be unique.

    What are you finding so complex about assigning an ID?
    I think for the fact that it adds unnecessary complexity. Take this example.

    In our PHP scripts we interate over an SQL ResultSet to produce the following HTML:
    Code:
    <h2>Product Code: US:2:H100</h2>
    <div class="tabbox">
        <div class="tabitems">
            <div class="tabitem active" onclick="selectTab(this, 0);">Recent</div>
            <div class="tabitem" onclick="selectTab(this, 1);">Old</div>
        </div>
    
        <div class="tabpanels">
            <div class="tabpanel active">first page</div>
            <div class="tabpanel">second page</div>
        </div>
    </div>
    
    
    <h2>Product Code: US:3:H100</h2>
    <div class="tabbox">
        <div class="tabitems">
            <div class="tabitem active" onclick="selectTab(this, 0);">Recent</div>
            <div class="tabitem" onclick="selectTab(this, 1);">Old</div>
        </div>
    
        <div class="tabpanels">
            <div class="tabpanel active">first page</div>
            <div class="tabpanel">second page</div>
        </div>
    </div>
    
    etc.... (and this repeats for each product in our database)
    Although it works, our CSS is ugly so we want to use YUI-Ext.

    Initially we tried to modify the backend to produce this HTML:
    Code:
    <h2>Product Code: US:2:H100</h2>
    <div id="product">
        <div id="recent">first page</div>
        <div id="old">second page</div>
    </div>
    
    <script>
    var t = new YAHOO.ext.TabPanel('product');
    t.addTab("recent", "Recent");
    t.addTab("old", "Old");
    </script>
    
    
    <h2>Product Code: US:3:H100</h2>
    <div id="product">
        <div id="recent">first page</div>
        <div id="old">second page</div>
    </div>
    
    <script>
    var t = new YAHOO.ext.TabPanel('product');
    t.addTab("recent", "Recent");
    t.addTab("old", "Old");
    </script>
    
    etc.... (and this repeats for each product in our database)
    As you might have guessed, it won't work because we already used the id for the first product. So then we modified the backend again to produce this HTML:
    Code:
    <h2>Product Code: US:2:H100</h2>
    
    <script>
    var rand = Ext.id();
    document.write("<div id=\""+rand+"\"></div>");
    var t = new YAHOO.ext.TabPanel(rand);
    t.addTab(Ext.id(), "Recent", "first page");
    t.addTab(Ext.id(), "Old", "second page");
    </script>
    
    
    <h2>Product Code: US:3:H100</h2>
    
    <script>
    var rand = Ext.id();
    document.write("<div id=\""+rand+"\"></div>");
    var t = new YAHOO.ext.TabPanel(rand);
    t.addTab(Ext.id(), "Recent", "first page");
    t.addTab(Ext.id(), "Old", "second page");
    </script>
    etc....
    This last approach works but it is radically different from our template approach.

    Ideally we want this syntax:
    Code:
    <h2>Product Code: US:2:H100</h2>
    <div class="products">
        <div class="recent">first page</div>
        <div class="old">second page</div>
    </div>
    
    etc....
    
    <script>
    var products = getElementsByClass("products", document.body);
    for(var i=0; i<products.length; i++) {
        var p = products[i];
        var t = new YAHOO.ext.TabPanel(p);
        t.addTab(getElementsByClass("recent", p)[0], "Recent");
        t.addTab(getElementsByClass("old", p)[0], "Old");
    }
    </script>

Page 1 of 2 12 LastLast

Similar Threads

  1. Setting the bg color of an entire row or cell in the grid
    By arnair in forum Ext 1.x: Help & Discussion
    Replies: 12
    Last Post: 16 Mar 2010, 9:52 AM
  2. how does the grid fill the entire panel area?
    By vupt in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Mar 2007, 9:24 AM
  3. Getting my table to fill the entire content panel
    By chubbard in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 8 Feb 2007, 8:39 PM
  4. BorderLayout consumes entire window
    By willgillen in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 6 Nov 2006, 4:38 PM
  5. Edit an entire row
    By rodiniz in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 24 Oct 2006, 5:08 PM

Posting Permissions

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