Results 1 to 9 of 9

Thread: How to get component rendered html without rendering it on the page?

  1. #1

    Cool How to get component rendered html without rendering it on the page?

    Hi there,

    I have the next case:
    I have polling which returns a list of users. This list of users displayed in Ext.form.DisplayField* element (each user is a <div> element, actually). Everything works fine untill the moment I want each user have context menu, for example, or perform some on click event.

    Is it possible to create, for example, a component, assign all needed events (onContextMenu, onClick ant etc.) and get an "outer HTMl" of it for adding into DisplayField?

    ----
    * remark: DisplayField is chosen due to bug with Panel, because the first one has correct scrolling and resizing, while the second's calculation seems to be broken (it goes beyond the borders needed ). the second thing is that I don't want to have so many object initialized on the page: create, get output html, insert it.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    This looks like the wrong solution.

    Could you explain better what the actual usecase is that you are trying to implement?

    It sounds like a DataView would be much better suited.

  3. #3

    Default

    Polling returns list of chat users and handles it like this:

    PHP Code:
       var chatUsers res.data.users;
       for ( var 
    roomId in chatUsers ){
          if ( !(
    parseInt(roomId) > 0) ){
            continue;
          }
          var 
    roomUsers chatUsers[roomId];
          var 
    str "";
          for ( var 
    userNr 0userNr roomUsers.lengthuserNr++ ){
            var 
    chatUser roomUsers[userNr];
            
    str += String.format("<div class=chatUser onclick=>{0}</div>"chatUser);
          }
          var 
    chatUserWindow chatRoomUsers[roomId];
          
    chatUserWindow.setValue(str);
          
    chatUserWindow.el.scroll("b"100000true);
       } 
    It's almost the same ExtJS examples propose

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    This really looks like a job for Ext.DataView!

  5. #5

    Default

    Well, I should test this approach. The main thing I'm worried about is scrolling. As it was said, it doesn't perform in correct way in the ordinary panel. Let's see, is it fixed in DataView.

    So what is an algorithm for me, of I have several rooms and one response returning all users in each? Create an empty store, create DataView with this store, on polling response get given room store, empty it, put new elements and somehow reload grid? is there any live example with changing store for DataView?

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Can't you just load the store with new users (using loadData)?

  7. #7

    Default

    An excellent idea which actually works

    Few things are still unclear to me:

    1) in styles I have:
    div.chatUserSelected {
    color: #e2e2e2;
    }
    in DataView:
    itemSelector: "div.chatUserSelected"
    -- Why it doesn't change this color? Am I missing smth?

    2) how to assign properties onClick and onContextMenu to each row?

    And... thanks, from the first sight it looks easier than playing with DisplayField

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. itemSelector is only used to let the DataView know what the repeating item is. You should use itemSelector:'div.chatUser' with selectedClass:'chatUerSelected'.

    2. DataView has 'click' and 'contextmenu' events that will also pass you the item that was clicked.

  9. #9

    Default

    wow everything works fine and as you suggested!

    thanks!

Similar Threads

  1. How to render any gxt component in html page
    By raj_begood in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 27 Jan 2009, 5:04 AM
  2. Replies: 2
    Last Post: 10 Sep 2008, 11:50 PM
  3. Component not rendering on page
    By glolar in forum Community Discussion
    Replies: 7
    Last Post: 25 May 2008, 5:44 PM
  4. Replies: 3
    Last Post: 14 Apr 2008, 11:56 PM
  5. Switch existing html component to ext component
    By harishns in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 3 Sep 2007, 12:58 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
  •