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

correctly compute list height in Ox.List if horizontal scrolling is disabled in Ox.TableList

Browse source
This commit is contained in:
rolux 2012-09-01 11:46:01 +02:00
parent d16f76f0da
commit 39708edd8b
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ Ox.List <f> List constructor
options <o> Options object options <o> Options object
centered <b|false> if true, and orientation is 'horizontal', then keep the selected item centered centered <b|false> if true, and orientation is 'horizontal', then keep the selected item centered
construct <f|null> (data) returns the list item HTML construct <f|null> (data) returns the list item HTML
disableHorizontalScrolling <b|false> If true, disable scrolling
draggable <b|false> If true, items can be dragged draggable <b|false> If true, items can be dragged
format <[]> ??? format <[]> ???
itemHeight <n|16> item height itemHeight <n|16> item height
@ -64,6 +65,7 @@ Ox.List = function(options, self) {
_tree: false, _tree: false,
centered: false, centered: false,
construct: null, construct: null,
disableHorizonzalScrolling: false,
draggable: false, draggable: false,
format: [], format: [],
itemHeight: 16, itemHeight: 16,
@ -583,7 +585,11 @@ Ox.List = function(options, self) {
} }
function getHeight() { function getHeight() {
return that.height() - (that.$content.width() > that.width() ? Ox.UI.SCROLLBAR_SIZE : 0); return that.height() - (
!self.options.disableHorizontalScrolling
&& that.$content.width() > that.width()
? Ox.UI.SCROLLBAR_SIZE : 0
);
} }
function getListSize() { function getListSize() {

20
source/Ox.UI/js/List/TableList.js
View file

@ -24,6 +24,7 @@ Ox.TableList <f> TableList Widget
columnsResizable <b|false> If true, columns are resizable columnsResizable <b|false> If true, columns are resizable
columnsVisible <b|false> If true, columns are visible columnsVisible <b|false> If true, columns are visible
columnWidth <[n]|[40, 800]> Minimum and maximum column width columnWidth <[n]|[40, 800]> Minimum and maximum column width
disableHorizontalScrolling <b|false> If true, disable scrolling
draggable <b|false> If true, items can be dragged draggable <b|false> If true, items can be dragged
id <s|''> Id id <s|''> Id
items <f|null> function() {} {sort, range, keys, callback} or array items <f|null> function() {} {sort, range, keys, callback} or array
@ -107,10 +108,6 @@ Ox.TableList = function(options, self) {
}) })
.addClass('OxTableList'); .addClass('OxTableList');
if (!self.options.disableHorizontalScrolling) {
enableHorizontalScrolling();
}
self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function? self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function?
// fixme: and can't these just remain undefined? // fixme: and can't these just remain undefined?
if (Ox.isUndefined(column.align)) { if (Ox.isUndefined(column.align)) {
@ -246,6 +243,7 @@ Ox.TableList = function(options, self) {
that.$body = Ox.List({ that.$body = Ox.List({
construct: constructItem, construct: constructItem,
disableHorizontalScrolling: self.options.disableHorizontalScrolling,
draggable: self.options.draggable, draggable: self.options.draggable,
id: self.options.id, id: self.options.id,
itemHeight: 16, itemHeight: 16,
@ -306,6 +304,10 @@ Ox.TableList = function(options, self) {
width: getItemWidth() + 'px' width: getItemWidth() + 'px'
}); });
self.options.disableHorizontalScrolling
? disableHorizontalScrolling()
: enableHorizontalScrolling();
//Ox.Log('List', 's.vC', self.visibleColumns) //Ox.Log('List', 's.vC', self.visibleColumns)
function addColumn(id) { function addColumn(id) {
@ -520,7 +522,10 @@ Ox.TableList = function(options, self) {
} }
function disableHorizontalScrolling() { function disableHorizontalScrolling() {
that.$body.css({overflowX: 'hidden'}); that.$body.options({
disableHorizontalScrolling: true
})
.css({overflowX: 'hidden'});
// fixme: is there a way to pass an array? // fixme: is there a way to pass an array?
that.unbindEvent('key_left').unbindEvent('key_right'); that.unbindEvent('key_left').unbindEvent('key_right');
} }
@ -627,7 +632,10 @@ Ox.TableList = function(options, self) {
} }
function enableHorizontalScrolling() { function enableHorizontalScrolling() {
that.$body && that.$body.css({overflowX: 'auto'}); that.$body.options({
disableHorizontalScrolling: false
})
.css({overflowX: 'auto'});
that.bindEvent({ that.bindEvent({
key_left: function () { key_left: function () {
var $element = that.$body.$element, var $element = that.$body.$element,