/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* This layout implements the column arrangement for {@link Ext.form.CheckboxGroup} and {@link Ext.form.RadioGroup}.
* It groups the component's sub-items into columns based on the component's
* {@link Ext.form.CheckboxGroup#columns columns} and {@link Ext.form.CheckboxGroup#vertical} config properties.
*/
Ext.define('Ext.layout.container.CheckboxGroup', {
extend: 'Ext.layout.container.Container',
alias: ['layout.checkboxgroup'],
/**
* @cfg {Boolean} [autoFlex=true]
* By default, CheckboxGroup allocates all available space to the configured columns meaning that
* column are evenly spaced across the container.
*
* To have each column only be wide enough to fit the container Checkboxes (or Radios), set `autoFlex` to `false`
*/
autoFlex: true,
type: 'checkboxgroup',
createsInnerCt: true,
childEls: [
'innerCt'
],
renderTpl: [
'<table id="{ownerId}-innerCt" class="' + Ext.plainTableCls + '" cellpadding="0"',
'role="presentation" style="{tableStyle}"><tbody><tr>',
'<tpl for="columns">',
'<td class="{parent.colCls}" valign="top" style="{style}">',
'{% this.renderColumn(out,parent,xindex-1) %}',
'</td>',
'</tpl>',
'</tr></tbody></table>'
],
lastOwnerItemsGeneration : null,
beginLayout: function(ownerContext) {
var me = this,
columns,
numCols,
i, width, cwidth,
totalFlex = 0, flexedCols = 0,
autoFlex = me.autoFlex,
innerCtStyle = me.innerCt.dom.style;
me.callParent(arguments);
columns = me.columnNodes;
ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);
// The columns config may be an array of widths. Any value < 1 is taken to be a fraction:
if (!ownerContext.widthModel.shrinkWrap) {
numCols = columns.length;
// If columns is an array of numeric widths
if (me.columnsArray) {
// first calculate total flex
for (i = 0; i < numCols; i++) {
width = me.owner.columns[i];
if (width < 1) {
totalFlex += width;
flexedCols++;
}
}
// now apply widths
for (i = 0; i < numCols; i++) {
width = me.owner.columns[i];
if (width < 1) {
cwidth = ((width / totalFlex) * 100) + '%';
} else {
cwidth = width + 'px';
}
columns[i].style.width = cwidth;
}
}
// Otherwise it's the *number* of columns, so distributed the widths evenly
else {
for (i = 0; i < numCols; i++) {
// autoFlex: true will automatically calculate % widths
// autoFlex: false allows the table to decide (shrinkWrap, in effect)
// on a per-column basis
cwidth = autoFlex
? (1 / numCols * 100) + '%'
: '';
columns[i].style.width = cwidth;
flexedCols++;
}
}
// no flexed cols -- all widths are fixed
if (!flexedCols) {
innerCtStyle.tableLayout = 'fixed';
innerCtStyle.width = '';
// some flexed cols -- need to fix some
} else if (flexedCols < numCols) {
innerCtStyle.tableLayout = 'fixed';
innerCtStyle.width = '100%';
// let the table decide
} else {
innerCtStyle.tableLayout = 'auto';
// if autoFlex, fill available space, else compact down
if (autoFlex) {
innerCtStyle.width = '100%';
} else {
innerCtStyle.width = '';
}
}
} else {
innerCtStyle.tableLayout = 'auto';
innerCtStyle.width = '';
}
},
cacheElements: function () {
var me = this;
// Grab defined childEls
me.callParent();
me.rowEl = me.innerCt.down('tr');
// Grab columns TDs
me.columnNodes = me.rowEl.dom.childNodes;
},
/*
* Just wait for the child items to all lay themselves out in the width we are configured
* to make available to them. Then we can measure our height.
*/
calculate: function(ownerContext) {
var me = this,
targetContext, widthShrinkWrap, heightShrinkWrap, shrinkWrap, table, targetPadding;
// The columnNodes are widthed using their own width attributes, we just need to wait
// for all children to have arranged themselves in that width, and then collect our height.
if (!ownerContext.getDomProp('containerChildrenSizeDone')) {
me.done = false;
} else {
targetContext = ownerContext.innerCtContext;
widthShrinkWrap = ownerContext.widthModel.shrinkWrap;
heightShrinkWrap = ownerContext.heightModel.shrinkWrap;
shrinkWrap = heightShrinkWrap || widthShrinkWrap;
table = targetContext.el.dom;
targetPadding = shrinkWrap && targetContext.getPaddingInfo();
if (widthShrinkWrap) {
ownerContext.setContentWidth(table.offsetWidth + targetPadding.width, true);
}
if (heightShrinkWrap) {
ownerContext.setContentHeight(table.offsetHeight + targetPadding.height, true);
}
}
},
doRenderColumn: function (out, renderData, columnIndex) {
// Careful! This method is bolted on to the renderTpl so all we get for context is
// the renderData! The "this" pointer is the renderTpl instance!
var me = renderData.$layout,
owner = me.owner,
columnCount = renderData.columnCount,
items = owner.items.items,
itemCount = items.length,
item, itemIndex, rowCount, increment, tree;
// Example:
// columnCount = 3
// items.length = 10
if (owner.vertical) {
// 0 1 2
// +---+---+---+
// 0 | 0 | 4 | 8 |
// +---+---+---+
// 1 | 1 | 5 | 9 |
// +---+---+---+
// 2 | 2 | 6 | |
// +---+---+---+
// 3 | 3 | 7 | |
// +---+---+---+
rowCount = Math.ceil(itemCount / columnCount); // = 4
itemIndex = columnIndex * rowCount;
itemCount = Math.min(itemCount, itemIndex + rowCount);
increment = 1;
} else {
// 0 1 2
// +---+---+---+
// 0 | 0 | 1 | 2 |
// +---+---+---+
// 1 | 3 | 4 | 5 |
// +---+---+---+
// 2 | 6 | 7 | 8 |
// +---+---+---+
// 3 | 9 | | |
// +---+---+---+
itemIndex = columnIndex;
increment = columnCount;
}
for ( ; itemIndex < itemCount; itemIndex += increment) {
item = items[itemIndex];
me.configureItem(item);
tree = item.getRenderTree();
Ext.DomHelper.generateMarkup(tree, out);
}
},
/**
* Returns the number of columns in the checkbox group.
* @private
*/
getColumnCount: function() {
var me = this,
owner = me.owner,
ownerColumns = owner.columns;
// Our columns config is an array of numeric widths.
// Calculate our total width
if (me.columnsArray) {
return ownerColumns.length;
}
if (Ext.isNumber(ownerColumns)) {
return ownerColumns;
}
return owner.items.length;
},
getItemSizePolicy: function (item) {
return this.autoSizePolicy;
},
getRenderData: function () {
var me = this,
data = me.callParent(),
owner = me.owner,
i, columns = me.getColumnCount(),
width, column, cwidth,
autoFlex = me.autoFlex,
totalFlex = 0, flexedCols = 0;
// calculate total flex
if (me.columnsArray) {
for (i=0; i < columns; i++) {
width = me.owner.columns[i];
if (width < 1) {
totalFlex += width;
flexedCols++;
}
}
}
data.colCls = owner.groupCls;
data.columnCount = columns;
data.columns = [];
for (i = 0; i < columns; i++) {
column = (data.columns[i] = {});
if (me.columnsArray) {
width = me.owner.columns[i];
if (width < 1) {
cwidth = ((width / totalFlex) * 100) + '%';
} else {
cwidth = width + 'px';
}
column.style = 'width:' + cwidth;
} else {
column.style = 'width:' + (1 / columns * 100) + '%';
flexedCols++;
}
}
// If the columns config was an array of column widths, allow table to auto width
data.tableStyle =
!flexedCols ? 'table-layout:fixed;' :
(flexedCols < columns) ? 'table-layout:fixed;width:100%' :
(autoFlex) ? 'table-layout:auto;width:100%' : 'table-layout:auto;';
return data;
},
initLayout: function () {
var me = this,
owner = me.owner;
me.columnsArray = Ext.isArray(owner.columns);
me.autoColumns = !owner.columns || owner.columns === 'auto';
me.vertical = owner.vertical;
me.callParent();
},
// Always valid. beginLayout ensures the encapsulating elements of all children are in the correct place
isValidParent: function() {
return true;
},
setupRenderTpl: function (renderTpl) {
this.callParent(arguments);
renderTpl.renderColumn = this.doRenderColumn;
},
renderChildren: function () {
var me = this,
generation = me.owner.items.generation;
if (me.lastOwnerItemsGeneration !== generation) {
me.lastOwnerItemsGeneration = generation;
me.renderItems(me.getLayoutItems());
}
},
/**
* Iterates over all passed items, ensuring they are rendered. If the items are already rendered,
* also determines if the items are in the proper place in the dom.
* @protected
*/
renderItems : function(items) {
var me = this,
itemCount = items.length,
i,
item,
rowCount,
columnCount,
rowIndex,
columnIndex;
if (itemCount) {
Ext.suspendLayouts();
if (me.autoColumns) {
me.addMissingColumns(itemCount);
}
columnCount = me.columnNodes.length;
rowCount = Math.ceil(itemCount / columnCount);
for (i = 0; i < itemCount; i++) {
item = items[i];
rowIndex = me.getRenderRowIndex(i, rowCount, columnCount);
columnIndex = me.getRenderColumnIndex(i, rowCount, columnCount);
if (!item.rendered) {
me.renderItem(item, rowIndex, columnIndex);
} else if (!me.isItemAtPosition(item, rowIndex, columnIndex)) {
me.moveItem(item, rowIndex, columnIndex);
}
}
if (me.autoColumns) {
me.removeExceedingColumns(itemCount);
}
Ext.resumeLayouts(true);
}
},
isItemAtPosition : function(item, rowIndex, columnIndex) {
return item.el.dom === this.getNodeAt(rowIndex, columnIndex);
},
getRenderColumnIndex : function(itemIndex, rowCount, columnCount) {
if (this.vertical) {
return Math.floor(itemIndex / rowCount);
} else {
return itemIndex % columnCount;
}
},
getRenderRowIndex : function(itemIndex, rowCount, columnCount) {
var me = this;
if (me.vertical) {
return itemIndex % rowCount;
} else {
return Math.floor(itemIndex / columnCount);
}
},
getNodeAt : function(rowIndex, columnIndex) {
return this.columnNodes[columnIndex].childNodes[rowIndex];
},
addMissingColumns : function(itemsCount) {
var me = this,
existingColumnsCount = me.columnNodes.length,
missingColumnsCount,
row,
cls,
i;
if (existingColumnsCount < itemsCount) {
missingColumnsCount = itemsCount - existingColumnsCount;
row = me.rowEl;
cls = me.owner.groupCls;
for (i = 0; i < missingColumnsCount; i++) {
row.createChild({
cls: cls,
tag: 'td',
vAlign: 'top'
});
}
}
},
removeExceedingColumns : function(itemsCount) {
var me = this,
existingColumnsCount = me.columnNodes.length,
exceedingColumnsCount,
row,
i;
if (existingColumnsCount > itemsCount) {
exceedingColumnsCount = existingColumnsCount - itemsCount;
row = me.rowEl;
for (i = 0; i < exceedingColumnsCount; i++) {
row.last().remove();
}
}
},
/**
* Renders the given Component into the specified row and column
* @param {Ext.Component} item The Component to render
* @param {number} rowIndex row index
* @param {number} columnIndex column index
* @private
*/
renderItem : function(item, rowIndex, columnIndex) {
var me = this;
me.configureItem(item);
item.render(Ext.get(me.columnNodes[columnIndex]), rowIndex);
me.afterRenderItem(item);
},
/**
* Moves the given already rendered Component to the specified row and column
* @param {Ext.Component} item The Component to move
* @param {number} rowIndex row index
* @param {number} columnIndex column index
* @private
*/
moveItem : function(item, rowIndex, columnIndex) {
var me = this,
column = me.columnNodes[columnIndex],
targetNode = column.childNodes[rowIndex];
column.insertBefore(item.el.dom, targetNode || null);
}
});
|
Download
