0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

fix bugs in treelist where the icon would not update, items would not expand, and expanding items would be slow

Browse source
This commit is contained in:
rlx 2011-10-01 13:06:50 +00:00
parent f2dbfbd1e5
commit b3e7945a96
3 changed files with 67 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
demos/treelist/js/treelist.js
View file

@ -1,36 +1,38 @@
Ox.load('UI', {debug: true}, function() { Ox.load({UI: {debug: true}, Geo: {}}, function() {
Ox.load('Geo', function() { var $treeList = new Ox.TreeList({
data: {'Ox.COUNTRIES': Ox.COUNTRIES},
var $treeList = new Ox.TreeList({ width: 256 - Ox.UI.SCROLLBAR_SIZE
data: {'Ox.COUNTRIES': Ox.COUNTRIES} })
.bindEvent({
resize: function(data) {
$treeList.options({width: data.width - Ox.UI.SCROLLBAR_SIZE});
}
}), }),
$debug = new Ox.Element('div'), $debug = new Ox.Element('div'),
$button = new Ox.Button({ $button = new Ox.Button({
title: 'Debug' title: 'Debug'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
$text.html(JSON.stringify($treeList.$element.options('items'))) $text.html(JSON.stringify($treeList.$element.options('items')))
} }
}) })
.appendTo($debug), .appendTo($debug),
$text = new Ox.Element('div').appendTo($debug), $text = new Ox.Element('div').appendTo($debug),
$splitPanel = new Ox.SplitPanel({ $splitPanel = new Ox.SplitPanel({
elements: [ elements: [
{ {
element: $treeList, element: $treeList,
size: 256, size: 256,
resizable: true, resizable: true,
resize: [128, 256, 384] resize: [128, 256, 384]
}, },
{ {
element: $debug element: $debug
} }
], ],
orientation: 'horizontal' orientation: 'horizontal'
}).appendTo($('body')); }).appendTo($('body'));
});
}); });

18
source/Ox.UI/js/List/Ox.List.js
View file

@ -692,8 +692,8 @@ Ox.List = function(options, self) {
}); });
self.selected.length && scrollToPosition(self.selected[0]); self.selected.length && scrollToPosition(self.selected[0]);
// that.triggerEvent('init', {items: self.options.items.length}); // that.triggerEvent('init', {items: self.options.items.length});
// fixme: do async lists need to trigger init? // fixme: do sync lists need to trigger init?
// will this only be reached in async lists? // will this only be reached in sync lists?
} }
function loadPage(page, callback) { function loadPage(page, callback) {
@ -1397,8 +1397,7 @@ Ox.List = function(options, self) {
@*/ @*/
that.addItems = function(pos, items) { that.addItems = function(pos, items) {
var $items = [], var $items = [],
length = items.length length = items.length;
//first = self.$items.length == 0;
self.selected.forEach(function(v, i) { self.selected.forEach(function(v, i) {
if (v >= pos) { if (v >= pos) {
self.selected[i] += length; self.selected[i] += length;
@ -1422,11 +1421,9 @@ Ox.List = function(options, self) {
$item.insertAfter($items[i - 1]); $item.insertAfter($items[i - 1]);
} }
}); });
self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items)); self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items));
self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items)); self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items));
//if(first) //loadItems();
loadItems();
updatePositions(); updatePositions();
} }
@ -1548,12 +1545,13 @@ Ox.List = function(options, self) {
length <n> number of items to remove length <n> number of items to remove
@*/ @*/
that.removeItems = function(pos, length) { that.removeItems = function(pos, length) {
if(!length) { //pos is list of ids Ox.print('removeItems', pos, length)
if (Ox.isUndefined(length)) { // pos is list of ids
pos.forEach(function(id) { pos.forEach(function(id) {
var p = getPositionById(id); var p = getPositionById(id);
that.removeItems(p, 1); that.removeItems(p, 1);
}); });
} else { //remove items from pos to pos+length } else { // remove items from pos to pos+length
Ox.range(pos, pos + length).forEach(function(i) { Ox.range(pos, pos + length).forEach(function(i) {
self.selected.indexOf(i) > -1 && deselect(i); self.selected.indexOf(i) > -1 && deselect(i);
self.$items[i].removeElement(); self.$items[i].removeElement();
@ -1667,6 +1665,8 @@ Ox.List = function(options, self) {
return id_ == data[key] ? value : id_ return id_ == data[key] ? value : id_
}); });
} }
self.options.items[pos][key] = value;
if (pos == 0) Ox.print(self.options.items[pos])
data[key] = value; data[key] = value;
$item.options({data: data}); $item.options({data: data});
return that; return that;

41
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -33,11 +33,9 @@ Ox.TreeList = function(options, self) {
if (self.options.data) { if (self.options.data) {
self.options.items = []; self.options.items = [];
//Ox.print('d', self.options.data, 'i', self.options.items)
Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) { Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) {
self.options.items.push(parseData(key, self.options.data[key])); self.options.items.push(parseData(key, self.options.data[key]));
}); });
//Ox.print('d', self.options.data, 'i', self.options.items)
} }
that.$element = Ox.List({ that.$element = Ox.List({
@ -48,7 +46,7 @@ Ox.TreeList = function(options, self) {
max: self.options.max, max: self.options.max,
min: self.options.min, min: self.options.min,
unique: 'id' unique: 'id'
}, Ox.extend({}, self)) }, Ox.copy(self))
.addClass('OxTextList OxTreeList') .addClass('OxTextList OxTreeList')
.css({ .css({
width: self.options.width + 'px' width: self.options.width + 'px'
@ -72,6 +70,7 @@ Ox.TreeList = function(options, self) {
function constructItem(data) { function constructItem(data) {
var $item = $('<div>'), //.css({width: self.options.width + 'px'}), var $item = $('<div>'), //.css({width: self.options.width + 'px'}),
padding = (data.level + !data.items) * 16 - 8; padding = (data.level + !data.items) * 16 - 8;
if (data.title.indexOf('COUNTRIES') > -1) Ox.print('DATA...', data);
if (data.level || !data.items) { if (data.level || !data.items) {
$('<div>') $('<div>')
.addClass('OxCell OxTarget') .addClass('OxCell OxTarget')
@ -137,7 +136,8 @@ Ox.TreeList = function(options, self) {
function parseData(key, value) { function parseData(key, value) {
//Ox.print('parseData', key, value) //Ox.print('parseData', key, value)
var ret = { var ret = {
id: Ox.uid(), expanded: false,
id: Ox.uid().toString(),
title: key.toString() + ': ' title: key.toString() + ': '
}, },
type = Ox.typeOf(value); type = Ox.typeOf(value);
@ -148,9 +148,9 @@ Ox.TreeList = function(options, self) {
}); });
} else { } else {
ret.title += ( ret.title += (
type == 'function' ? type == 'function'
value.toString().split('{')[0] : ? value.toString().split('{')[0]
JSON.stringify(value) : JSON.stringify(value)
); );
} }
return ret; return ret;
@ -163,10 +163,14 @@ Ox.TreeList = function(options, self) {
items.forEach(function(item, i) { items.forEach(function(item, i) {
var item_ = Ox.extend({ var item_ = Ox.extend({
level: level level: level
}, item, item.items ? { }, item, item.items
items: !!item.expanded ? ? {
parseItems(item.items, level + 1) : [] items: !!item.expanded
} : {}); ? parseItems(item.items, level + 1)
: []
}
: {}
);
ret.push(item_); ret.push(item_);
item.items && Ox.merge(ret, item_.items); item.items && Ox.merge(ret, item_.items);
}); });
@ -176,7 +180,6 @@ Ox.TreeList = function(options, self) {
function toggleItem(item, expanded) { function toggleItem(item, expanded) {
var $img, pos; var $img, pos;
item.expanded = expanded; item.expanded = expanded;
//getItemById(item.id).expanded = expanded;
that.$element.find('.OxItem').each(function() { that.$element.find('.OxItem').each(function() {
var $item = $(this); var $item = $(this);
if ($item.data('id') == item.id) { if ($item.data('id') == item.id) {
@ -185,15 +188,19 @@ Ox.TreeList = function(options, self) {
return false; return false;
} }
}); });
//that.$element.value(item.id, 'expanded', expanded);
$img.attr({ $img.attr({
src: Ox.UI.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (expanded ? 'Down' : 'Right') 'symbol' + (expanded ? 'Down' : 'Right')
) )
}); });
that.$element.value(item.id, 'expanded', expanded); expanded
expanded ? ? that.$element.addItems(
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) : pos + 1, parseItems(item.items, item.level + 1)
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length); )
: that.$element.removeItems(
pos + 1, parseItems(item.items, item.level + 1).length
);
} }
function toggleItems(data) { function toggleItems(data) {
@ -209,7 +216,7 @@ Ox.TreeList = function(options, self) {
if (key == 'data') { if (key == 'data') {
} else if (key == 'width') { } else if (key == 'width') {
} }
}; };