Hi Jim,
you can use "regular" Array objects as well. At least some of the data can be.
I've been asking the same question a while ago and did some tests about it...
(yes! trial-and-error sometimes works ;) )
The data to be shown in the ListView are Maps with (at least) a "text" key.
I'm not 100% sure if this is the only way, but during my tests it seemed to be.
Additional (or hidden) data can be of any type. The only thing that seems to be
important is that the data array is 2-dimensional. So each row is represented
by one Array. If you take one one-dimensional Array, the "hidden" data will
show up in the next row...
I've attached the version of this "test" so you can get the picture.
(The commented parts use key-value addressing of the data)
Hope it helps,
/Peter
> I did want to ask one more thing about the ListView, is there a way to use
> normal JavaScript arrays with it instead of JSON objects arrays? When I try
> and use JavaScript arrays I get errors.
>
> Thanks,
> Jim
>
>
> On 5/4/07, Sebastian Werner <[EMAIL PROTECTED]> wrote:
>>
>> Fabian Jakobs schrieb:
>> > Jim Hunter schrieb:
>> >> Thanks but I can't use appearance themes as the code I showed was just
>> >> a test leading into the real code that will change the color of each
>> >> row. Our application changes the color of the rows depending on 'some
>> >> condition' in the row. I have it working fine in Table, but I am
>> >> trying to gain some more speed in the app by using ListViews instead
>> >> of Tables as we do not need editing of the data. At least to me the
>> >> ListView looks faster then the Table does, I could be wrong. What I am
>> >> looking for is faster rendering at creation time. Right now my pages
>> >> have a bout a 2 second delay in creating once the data arrives at the
>> >> browser and I am trying to make this a shorter time period. I am open
>> >> to other suggestions if you have any?
>> >
>> > You could use the appearance as explained in my earlier post but don't
>> > define any background color in the appearance. This should enable
>> you to
>> > overwrite the background color using the proerty setter:
>> >
>> > vCell.setBackgroundColor('yellow');
>> >
>> > The ListView is indeet faster for small tables but for large tables the
>> > table widget is dramatically faster.
>>
>> The ListView is definitely faster, both in initialisation time and
>> scroll performance. Both widgets are virtual, which means that both
>> widgets should scale quite good if you have 100+ items in the list.
>>
>> The ListView has some missing features and no nice TableModel like
>> supported by the Table widget. If you can do it without these features I
>> would say that it is a good idea to prefer the ListView like you have
>> done.
>>
>> Sebastian
>>
>>
>>
>> >
>> > Best Fabian
>> >>
>> >> On 5/4/07, *Fabian Jakobs* <[EMAIL PROTECTED]
>> >> <mailto:[EMAIL PROTECTED]>> wrote:
>> >>
>> >> Jim Hunter schrieb:
>> >>> I forgot, this is in qooxdoo .6.6, thanks.
>> >> This was the critical hint ;-) The issue you are facing the the
>> >> good old appearance overwrites user value bug in the older qooxdoo
>> >> releases. This is now fixed in svn and will be solved with the
>> >> next release but for 0.6.6 you will have to redefine the
>> >> appearance for the content cell: 'list-view-content-cell':
>> >>
>> >> var theme = qx.manager.object.AppearanceManager.getInstance
>> ().getAppearanceTheme();
>> >>
>> >> var apar = theme.getAppearance('text-field');
>> >> apar.state = function(vTheme, vStates) {
>> >> return {
>> >> backgroundColor :
>> >> vStates.selected ? this.bgcolor_selected : "yellow",
>> >> color : vStates.selected ? this.color_selected : null
>> >> };
>> >> }
>> >>
>> >>
>> >> Best Fabian
>> >>
>> >>> On 5/3/07, *Jim Hunter* <[EMAIL PROTECTED]
>> >>> <mailto:[EMAIL PROTECTED]>> wrote:
>> >>>
>> >>> I am trying to do some modification of the ListView in order
>> >>> to provide colored background for rows and I'm not getting
>> >>> what I would expect. In preparation for final changes I tried
>> >>> some brute force changes but got nothing. I placed a line
>> >>> right after this line:
>> >>>
>> >>> vCell = new vColumns[vCol].contentClass;
>> >>>
>> >>> to set the background color of all cells to yellow but it
>> >>> stayed white. I did something similar to this in the Table by
>> >>> changing the Row element background and that worked fine, but
>> >>> the ListView does not have a row element. Is there some other
>> >>> place that the background is getting changed that I am not
>> >>> seeing? Here is what the code now looks like, I tried both
>> >>> the qooxdoo method and I tried setting the DOM property:
>> >>>
>> >>> vCell = new vColumns[vCol].contentClass;
>> >>> vCell.setBackgroundColor('yellow');
>> >>> vCell.setStyleProperty('backgroundColor', 'yellow');
>> >>>
>> >>> Does anyone have an idea of where I can look to get this
>> >>> working?
>> >>>
>> >>> Thanks,
>> >>> Jim
>> >>> www.D4PHP.org <http://www.D4PHP.org>
>> >>> www.D4PHP-Hosting.com <http://www.D4PHP-Hosting.com>
>> >>>
>> >>>
>> >>>
>> ------------------------------------------------------------------------
>> >>>
>> >>>
>> -------------------------------------------------------------------------
>> >>> This SF.net email is sponsored by DB2 Express
>> >>> Download DB2 Express C - the FREE version of DB2 express and take
>> >>> control of your XML. No limits. Just data. Click to get it now.
>> >>>
>> >>> http://sourceforge.net/powerbar/db2/
>> >>>
>> ------------------------------------------------------------------------
>> >>>
>> >>> _______________________________________________
>> >>> qooxdoo-devel mailing list
>> >>> qooxdoo-devel@lists.sourceforge.net
>> >>> <mailto:qooxdoo-devel@lists.sourceforge.net>
>> >>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>> >>>
>> >>
>> >> --
>> >> Fabian Jakobs
>> >> JavaScript Framework Developer
>> >>
>> >> 1&1 Internet AG
>> >> Brauerstraße 48
>> >> 76135 Karlsruhe
>> >>
>> >> Amtsgericht Montabaur HRB 6484
>> >>
>> >> Vorstand: Henning Ahlert, Hans-Henning Doerr, Ralph Dommermuth,
>> Matthias Ehrlich Andreas Gauger, Matthias Greve, Robert Hoffmann, Achim
>> Weiss
>> >>
>> >> Aufsichtsratsvorsitzender: Michael Scheeren
>> >>
>> >>
>> >>
>> -------------------------------------------------------------------------
>> >> This SF.net email is sponsored by DB2 Express
>> >> Download DB2 Express C - the FREE version of DB2 express and take
>> >> control of your XML. No limits. Just data. Click to get it now.
>> >> http://sourceforge.net/powerbar/db2/
>> >> _______________________________________________
>> >> qooxdoo-devel mailing list
>> >> qooxdoo-devel@lists.sourceforge.net
>> >> <mailto:qooxdoo-devel@lists.sourceforge.net>
>> >> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>> >>
>> >>
>> >>
>> ------------------------------------------------------------------------
>> >>
>> >>
>> -------------------------------------------------------------------------
>> >> This SF.net email is sponsored by DB2 Express
>> >> Download DB2 Express C - the FREE version of DB2 express and take
>> >> control of your XML. No limits. Just data. Click to get it now.
>> >> http://sourceforge.net/powerbar/db2/
>> >>
>> ------------------------------------------------------------------------
>> >>
>> >> _______________________________________________
>> >> qooxdoo-devel mailing list
>> >> qooxdoo-devel@lists.sourceforge.net
>> >> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>> >>
>> >
>> >
>>
>>
>> -------------------------------------------------------------------------
>> This SF.net email is sponsored by DB2 Express
>> Download DB2 Express C - the FREE version of DB2 express and take
>> control of your XML. No limits. Just data. Click to get it now.
>> http://sourceforge.net/powerbar/db2/
>> _______________________________________________
>> qooxdoo-devel mailing list
>> qooxdoo-devel@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>
>
> ------------------------------------------------------------------------
>
> -------------------------------------------------------------------------
> This SF.net email is sponsored by DB2 Express
> Download DB2 Express C - the FREE version of DB2 express and take
> control of your XML. No limits. Just data. Click to get it now.
> http://sourceforge.net/powerbar/db2/
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> qooxdoo-devel mailing list
> qooxdoo-devel@lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
--
Dipl.-Ing. (FH) Peter Schneider | TIS GmbH | Software-Entwickler
Barloer Weg 188-190 | D-46397 Bocholt
fon: +49 2871 2722-0 | fax: +49 2871 2722-99
[EMAIL PROTECTED] | www.tis-gmbh.de
/**
* ListView Test...
*/
qx.OO.defineClass("application.test_n_debug.winListView", qx.ui.window.Window,
function()
{
/**
* Holds the list view.
*/
this._listView = null;
// ** Create window
qx.ui.window.Window.call(this, "ListView Test", null);
this.set({ showMinimize : false,
showMaximize : false,
allowClose : true,
resizeable : false,
moveable : true,
height : "auto",
width : "auto" });
// ** Center the window each time it appears.
this.addEventListener("appear", function(){
this.centerToBrowser();
}, this);
var vbox = new qx.ui.layout.VerticalBoxLayout;
vbox.set({ top:5, left:5, right:5, bottom:10, width:"auto", height:"auto" });
this.add(vbox);
// ** Create informational text
var text = new qx.ui.basic.Label("This is a test of hidden columns in
ListView class");
vbox.add(text);
// ** Create list view
var lv = this._initListView();
vbox.add(lv);
// ** Create quick info
var gbox = new qx.ui.groupbox.GroupBox("Info-Panel:");
gbox.set({height:"auto", top:5, right:0});
var qInfo = this._quick_info = new qx.ui.basic.Label;
qInfo.set({height:"100%", width:"100%"});
gbox.add(qInfo);
vbox.add(gbox);
this.info(this.classname+" initialisiert");
});
/**
* Init of the list view (including data)
*/
qx.Proto._initListView = function()
{
// Reminder to avoid multiple inits.
if (!this._initDone) {
this._initDone = 1;
var col = [ { label:"#", width:30, type: "text", align:"right" },
{ label:"Deutsch", width:70, type: "text" },
{ label:"Englisch", width:70, type: "text" }
];
var dat = [ [ {text:"1"}, {text:"eins"}, {text:'one'}, "0x1"],
[ {text:"2"}, {text:"zwei"}, {text:'two'}, "0x2"],
[ {text:"3"}, {text:"drei"}, {text:'three'}, "0x3"],
[ {text:"4"}, {text:"vier"}, {text:'four'}, "0x4"],
[ {text:"5"}, {text:"fünf"}, {text:'five'}, "0x5"],
[ {text:"6"}, {text:"sechs"}, {text:'six'}, "0x6"],
[ {text:"7"}, {text:"sieben"}, {text:'seven'}, "0x7"],
[ {text:"8"}, {text:"acht"}, {text:'eight'}, "0x8"],
[ {text:"9"}, {text:"neun"}, {text:'nine'}, "0x9"],
[ {text:"10"},{text:"zehn"}, {text:'ten'}, "0xa"]
];
/*
var col = { num :{ label:"#", width:30, type: "text", align:"right"
},
de :{ label:"Deutsch", width:70, type: "text" },
en :{ label:"Englisch", width:70, type: "text" }
};
var dat = [ { num:{text:"1"}, de:{text:"eins"}, en:{text:'one'},
hidden:"0x1"},
{ num:{text:"2"}, de:{text:"zwei"}, en:{text:'two'},
hidden:"0x2"},
{ num:{text:"3"}, de:{text:"drei"}, en:{text:'three'},
hidden:"0x3"},
{ num:{text:"4"}, de:{text:"vier"}, en:{text:'four'},
hidden:"0x4"},
{ num:{text:"5"}, de:{text:"fünf"}, en:{text:'five'},
hidden:"0x5"},
{ num:{text:"6"}, de:{text:"sechs"}, en:{text:'six'},
hidden:"0x6"},
{ num:{text:"7"}, de:{text:"sieben"}, en:{text:'seven'},
hidden:"0x7"},
{ num:{text:"8"}, de:{text:"acht"}, en:{text:'eight'},
hidden:"0x8"},
{ num:{text:"9"}, de:{text:"neun"}, en:{text:'nine'},
hidden:"0x9"},
{ num:{text:"10"},de:{text:"zehn"}, en:{text:'ten'},
hidden:"0xa"}
];
*/
// add some more for "speed" and "responsibility" tests ...
for (var i=dat.length+1; i<=1000; ++i) {
dat.push([ { text : "" + i },
{ text : "Nummer "+i },
{ text : "number "+i },
// hidden data does not need to be a Map and have a
"text"-key...
"0x" + Number(i).toString(16),
// ...but it may be if you like.
{ text : "" + Number(i).toString(2), x : 'y' }
]);
}
/*
for (var i=dat.length+1; i<=1000; ++i) {
dat.push({
num : { text : "" + i },
de : { text : "Nummer "+i },
en : { text : "number "+i },
// hidden data does not need to be a Map and have a "text"-key...
hidden : "0x" + Number(i).toString(16),
// ...but it may be if you like.
hidden_too : { text : "" + Number(i).toString(2), x : 'y' }
});
}
*/
// ** Create ListView (with data and columns)
var lv = this._listView = new qx.ui.listview.ListView(dat, col);
// ** Additional (visual) settings, needed
lv.setBorder(qx.renderer.border.BorderPresets.getInstance().shadow);
lv.set({backgroundColor:"lightyellow", /*width:"auto"600,*/ height:150 });
// ** Connect event listener for selection
lv.getPane().getManager().addEventListener("changeSelection",
this._onChangeSelection, this);
return lv;
}
return null;
}
/**
* Handles selection change events in list view
*/
qx.Proto._onChangeSelection = function(e)
{
var row = e.getData();
if (row[0]) {// at leas one must has to be selected...
/*
var info = "<table style=\"font-size:11\" cellspacing=0 border=0>"
+ "<tr><td>num</td><td>" + row[0].num.text +
"</td></tr>"
+ "<tr><td>de</td><td>" + row[0].de.text +
"</td></tr>"
+ "<tr><td>en</td><td>" + row[0].en.text +
"</td></tr>"
+ "<tr><td>hidden</td><td>" + row[0].hidden +
"</td></tr>"
+ "<tr><td>hidden_too</td><td>" + (row[0].hidden_too ?
row[0].hidden_too.text : "")
+
"</td></tr>"
+ "</table>";
*/
var info = "<table style=\"font-size:11\" cellspacing=0 border=0>"
+ "<tr><td>num</td><td>" + row[0][0].text +
"</td></tr>"
+ "<tr><td>de</td><td>" + row[0][1].text +
"</td></tr>"
+ "<tr><td>en</td><td>" + row[0][2].text +
"</td></tr>"
+ "<tr><td>hidden</td><td>" + row[0][3] +
"</td></tr>"
+ "<tr><td>hidden_too</td><td>" + (row[0][4] ?
row[0][4].text : "")
+
"</td></tr>"
+ "</table>";
this._quick_info.setHtml(info);
}
}
/**
* Disposer
*/
qx.Proto.dispose = function()
{
if (this.getDisposed()) {
return true;
}
return qx.ui.window.Window.prototype.dispose.call(this);
}-------------------------------------------------------------------------
This SF.net email is sponsored by DB2 Express
Download DB2 Express C - the FREE version of DB2 express and take
control of your XML. No limits. Just data. Click to get it now.
http://sourceforge.net/powerbar/db2/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
