PDA

View Full Version : adding a simple scrolling debug field



DaveC426913
24 Sep 2010, 8:04 AM
I won't have access to console, so I want my debugging messages to appear in a status window onscreen. The window will fill up with debug as my app produces them, scrolling as necessary.

This should be basic, but I can't fathom how these text fields work. I tried a textarea and textfield. It makes no sense.

In a nutshell, I'm only seeing one line at a time, despite the box being 150px high.



{
xtype: 'textfield',
minWidth: 700,
minHeight: 150,
maxHeight: 150,
style: 'background-color:white;color:gray;font-size:7pt',
scroll: 'vertical',
id: 'statusBox'
}

statusBox = Ext.getCmp('statusBox');

function logmsg(msg){
statusBox.update(statusBox.getValue() + msg);
}



1] I get a small, empty, resizeable box inside statusBox (with name=statusBox) which does nothing except take up space. Here's the generated HTML:


<div id="statusBox" class="x-field x-field-text x-scroller-parent" style="background-color: white; color: gray; font-size: 7pt; min-width: 700px; min-height: 150px; max-height: 150px; ">
<input id="ext-gen1011" type="text" name="statusBox" class="x-input-text" style="background-color:white;color:gray;font-size:7pt">
<div id="ext-gen1012" class=" x-scroller" style="min-height: 150px; width: 767px; ">My message</div>
<div class="x-scrollbar x-scrollbar-vertical x-scrollbar-dark" id="ext-gen1013" style="opacity: 0; "></div>
</div>

2] My updates target the outer, larger box just fine, but only one line is visible at a time despite the box being 150px tall. <<this is the showstopper.

It should not be this difficult!

BTW, textarea getValue and setValue make reference to methods getRawValue and setRawValue, but there are no such methods documented.

jay@moduscreate.com
24 Sep 2010, 8:26 AM
why don't you use the safari build-in debugger?

DaveC426913
24 Sep 2010, 8:27 AM
The reasons why are myriad.

Is there a way of doing what I want?

jay@moduscreate.com
24 Sep 2010, 8:30 AM
the "update" method is to update the innerHTML --- you should use setValue.

DaveC426913
24 Sep 2010, 8:37 AM
OK, that makes more sense now that I seem to be targetting the correct "statusBox" object.
Thanks.

Why do I have a nested box? I mean, I understand that a Sencha textarea is not at all like an HTML textarea - it seems to be a container for text objects.

I tried simply using textfield but it is a one-line only field (unless there's a multiline setting I missed.)

I can force the box to fill its textarea. Unfortunately, it does not scroll (the outer textarea scrolls, not the inner textfield).

jay@moduscreate.com
24 Sep 2010, 8:38 AM
i would just update the innerHTML of a box's element, appending (or prepending) the data. TextArea is really not what you should be using.

DaveC426913
24 Sep 2010, 8:54 AM
A common theme with my Sencha development is that it's very easy to determine what does not work. but it is a very laborious process to figure out what does work and what I should be using (this is exacerbated by incompete API docs).

I guess there's no straightforward solution after all. I'll just keep muddling through until I get something that's tolerable.

I gotta tell ya though, taking an hour to figure out how to do something as simple as displaying debug messages on-screen, and having to go on the fourm looking for answers - I have to factor that in to whether Sencha is the way for us to go.

jay@moduscreate.com
24 Sep 2010, 8:54 AM
Sencha Touch!

jay@moduscreate.com
24 Sep 2010, 8:55 AM
To be honest, creating a simple debug scrollable div is something that was done in the early 90's. There are tons of examples on the internet on how to do this.

DaveC426913
24 Sep 2010, 8:58 AM
In Sencha? cuz it didn't exist in the early 90s.

I'm not strugging with how to make one in general, I'm struggling with Sencha's rendering layer of it. Simply creating a field and then targetting it to upate and scroll is a multi-layer process.

I mean, I suppose you're right, I could simply create a container, then set html: '<input type="textarea">'

But if I start using that (bypassing Sencha's layer altogether) as a solution Sencha will become just a transparent skeleton. Also, I'll lose all the other features such as gestures (the above solution will give me Windows scrollbars that will be difficult to operate by finger.)

jay@moduscreate.com
24 Sep 2010, 9:02 AM
Dude! Sencha Touch is nothing magical. HTML + CSS + JavaScript. I don't see how this would differ from anything else out there, other than the touch events.

DaveC426913
24 Sep 2010, 9:05 AM
See previous response.

jay@moduscreate.com
24 Sep 2010, 9:06 AM
sorry - i just saw one sentence when i responded :(

jay@moduscreate.com
24 Sep 2010, 9:08 AM
In Sencha? cuz it didn't exist in the early 90s.

I'm not strugging with how to make one in general, I'm struggling with Sencha's rendering layer of it. Simply creating a field and then targetting it to upate and scroll is a multi-layer process.

I mean, I suppose you're right, I could simply create a container, then set html: '<input type="textarea">'

But if I start using that as a solution Sencha will become just a transparent skeleton. Also, I'll lose all the other features such as gestures (the above solution will give me Windows scrollbars that will be difficult to operate by finger.)

If you're not using a control as it's designed, how can you expect it to do what you want it to? For a second think about what your needs are.
(please correct me here)
- Debug Panel that scrolls

If that's the case, why do you keep going to the textarea?

DaveC426913
24 Sep 2010, 9:20 AM
So, simply targetting a panel/container.

I see.

I guess in that sense, I'm still stuck in the 90's, trying to update a field in a form. I keep thinking of panels and containers as nothing more than holders for other display items or for fixed text.

Thanks.

jay@moduscreate.com
24 Sep 2010, 9:24 AM
They are. I don't understand why you're using a textfield as a debug console. A scrollable div should be used. You can style text better and implement custom .warn/.info/.error messages.

DaveC426913
24 Sep 2010, 10:42 AM
OK. So make my status box a panel or container?

How do I "read" what is in the panel/container so I can update it? It has no getValue() method , no .innerText or innerHTML properties...

statusBox.setValue(statusBox.getValue() + "\n"+ msg);

jay@moduscreate.com
24 Sep 2010, 10:54 AM
OK. So make my status box a panel or container?

How do I "read" what is in the panel/container so I can update it? It has no getValue() method , no .innerText or innerHTML properties...

statusBox.setValue(statusBox.getValue() + "\n"+ msg);

statusBox.el.dom.innerHTML += statusBox.el.dom.innerHTML + 'New string stuff here <br />';

jay@moduscreate.com
24 Sep 2010, 10:55 AM
I would say "box" if it's a child of something to be resized.

DaveC426913
24 Sep 2010, 11:03 AM
That does not work. I get no message and no error. And eventually it locks up my browser.



xtype: 'panel',
minHeight: 150,
maxHeight: 150,
style: 'background-color:white;color:gray;font-size:7pt;width:700px;height:150px',
scroll: 'vertical',
id: 'statusBox',

var statusBox = Ext.getCmp('statusBox');
function logmsg(msg){
statusBox.el.dom.innerHTML += statusBox.el.dom.innerHTML + msg +'<br />';
//statusBox.el.dom.innerHTML = statusBox.el.dom.innerHTML + msg +'<br />';
}
logmsg("Hello!");

jay@moduscreate.com
24 Sep 2010, 11:25 AM
Sorry dude the element structure is different in sencha touch, but the technique stays the same.






Ext.setup({
onReady : function() {
var p = new Ext.Panel({
modal : true,
floating : true,
scroll : true,
width : 200,
height : 200,
html : 'asdf',
dockedItems : {
xtype : 'toolbar',
dock : 'bottom',
items : {
ui : 'light',
html : 'Hello',
handler : function() {
var tgt = p.body.dom.childNodes[0],
origHTML = tgt.innerHTML;
tgt.innerHTML = origHTML + '<br />' + new Date().format('U')
}
}
}
}).show()




}


})

DaveC426913
24 Sep 2010, 11:49 AM
This works.

Target the box with messages. Wrap the box in a scrolling panel.

The key is insertHtml


xtype: 'panel',
height: 100,
scroll:'vertical',
items: [{
xtype: 'box',
id: 'statusBox',
}]

statusBox = Ext.get('statusBox');
function logmsg(msg){
statusBox.insertHtml("beforeend",msg + "<br/>");
}

logmsg("Hello!");


Oy. I've just spent my entire afternoon trying to get this thing to simply output some status messages...

jay@moduscreate.com
24 Sep 2010, 11:57 AM
awesome. i didn't know there was an insertHtml method.

DaveC426913
24 Sep 2010, 11:59 AM
It's in the docu...

Wait, never mind... :P


Anyway, regardless of my frustration, I appreciate all your help.

steve1964
25 Sep 2010, 10:05 AM
There is an update metod that update the content...

Wrap a panel in another component and then:

myPanel.update(myContent), where myContent can be html content...

For DaveC426913 (http://www.sencha.com/member.php?160865-DaveC426913), when i start using Sencha Touch one month ago was the same for me, you have to go with Api Docs end existing example or post to the forum, remember that Sencha Touch is still a beta release...