PDA

View Full Version : How to get component rendered html without rendering it on the page?



kirillica
25 Nov 2010, 6:44 AM
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.

Condor
25 Nov 2010, 6:58 AM
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.

kirillica
25 Nov 2010, 7:12 AM
Polling returns list of chat users and handles it like this:



var chatUsers = res.data.users;
for ( var roomId in chatUsers ){
if ( !(parseInt(roomId) > 0) ){
continue;
}
var roomUsers = chatUsers[roomId];
var str = "";
for ( var userNr = 0; userNr < roomUsers.length; userNr++ ){
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", 100000, true);
}


It's almost the same ExtJS examples propose :)

Condor
25 Nov 2010, 7:18 AM
This really looks like a job for Ext.DataView!

kirillica
25 Nov 2010, 7:36 AM
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?

Condor
25 Nov 2010, 7:40 AM
Can't you just load the store with new users (using loadData)?

kirillica
25 Nov 2010, 8:15 AM
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 :)

Condor
25 Nov 2010, 8:19 AM
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.

kirillica
25 Nov 2010, 8:53 AM
wow :) everything works fine and as you suggested!

thanks!