Author: nbelaevski
Date: 2007-12-09 17:52:58 -0500 (Sun, 09 Dec 2007)
New Revision: 4643
Modified:
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingComponentRendererBase.java
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/Control.js
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js
branches/3.1.x/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx
Log:
http://jira.jboss.com/jira/browse/RF-1558
Modified:
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingComponentRendererBase.java
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingComponentRendererBase.java 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingComponentRendererBase.java 2007-12-09
22:52:58 UTC (rev 4643)
@@ -296,7 +296,8 @@
}
writer.startElement(HTML.DIV_ELEM, orderingList);
- writer.writeAttribute(HTML.id_ATTRIBUTE, clientId + helper.getIdSuffix(), null);
//FIXME:
+ String controlId = clientId + helper.getIdSuffix();
+ writer.writeAttribute(HTML.id_ATTRIBUTE, controlId, null); //FIXME:
writer.writeAttribute(HTML.class_ATTRIBUTE, currentStyle, null);
String style = null;
if (enabled) {
@@ -317,12 +318,15 @@
}
writer.startElement(HTML.a_ELEMENT, orderingList);
+ writer.writeAttribute(HTML.id_ATTRIBUTE, controlId + "link", null);
//FIXME:
writer.writeAttribute(HTML.HREF_ATTR, "#", null);
if (!helper.enable) {
writer.writeAttribute(HTML.DISABLED_ATTR, "disabled", null);
writer.writeAttribute(HTML.class_ATTRIBUTE, baseStyle + "-a-disabled",
null);
} else {
writer.writeAttribute(HTML.class_ATTRIBUTE, baseStyle + "-selection",
null);
+ writer.writeAttribute(HTML.onblur_ATTRIBUTE, "Control.onblur(this);",
null);
+ writer.writeAttribute(HTML.onfocus_ATTRIBUTE, "Control.onfocus(this);",
null);
}
writer.writeAttribute(HTML.onclick_ATTRIBUTE, "return false;", null);
Modified:
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java 2007-12-09
22:52:58 UTC (rev 4643)
@@ -122,10 +122,10 @@
ItemState state = getItemState(context, table, variables);
boolean active = state.isActive();
- if (active) {
- rowClassName.append(" rich-ordering-list-row-active");
- cellClassName.append(" rich-ordering-list-cell-active");
- }
+// if (active) {
+// rowClassName.append(" rich-ordering-list-row-active");
+// cellClassName.append(" rich-ordering-list-cell-active");
+// }
boolean selected = state.isSelected();
if (selected) {
@@ -170,8 +170,6 @@
writer.writeAttribute(HTML.NAME_ATTRIBUTE, table.getBaseClientId(context), null);
StringBuffer value = new StringBuffer();
- value.append(table.getRowKey());
-
if (selected) {
value.append('s');
}
@@ -180,6 +178,7 @@
value.append('a');
}
+ value.append(table.getRowKey());
value.append(':');
value.append(tableHolder.getConverter().getAsString(context, table,
table.getRowData()));
@@ -217,20 +216,20 @@
Object value = converter.getAsObject(context, orderingList, string.substring(idx +
1));
String substring = string.substring(0, idx);
- idx = substring.length() - 1;
+ idx = 0;
+ if (substring.charAt(idx) == 's') {
+ selection.add(value);
+ idx++;
+ }
+
if (substring.charAt(idx) == 'a') {
activeItem = value;
- idx--;
+ idx++;
}
- if (substring.charAt(idx) == 's') {
- selection.add(value);
- idx--;
- }
+ substring = substring.substring(idx);
- substring = substring.substring(0, idx + 1);
-
Object key = new Integer(substring);
map.put(key, value);
}
Modified:
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss 2007-12-09
22:52:58 UTC (rev 4643)
@@ -172,10 +172,8 @@
}
.rich-ordering-list-cell-selected {
- padding : 1px 2px;
+ padding : 2px 2px;
white-space: nowrap;
- border-top: 1px solid;
- border-bottom: 1px solid;
}
.rich-ordering-list-cell-active {
@@ -293,10 +291,6 @@
<u:style name="font-family" skin="generalFamilyFont" />
<u:style name="font-size" skin="generalSizeFont" />
</u:selector>
- <u:selector name=".rich-ordering-list-cell-selected">
- <u:style name="border-bottom-color" skin="tableBorderColor"
/>
- <u:style name="border-top-color" skin="tableBackgroundColor"
/>
- </u:selector>
<u:selector name=".rich-ordering-list-cell-selected,
.rich-ordering-list-cell-selected *">
<u:style name="color" skin="generalTextColor"/>
Modified:
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/Control.js
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/Control.js 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/Control.js 2007-12-09
22:52:58 UTC (rev 4643)
@@ -4,6 +4,14 @@
return false;
}
+Control.onfocus = function(element) {
+ element.hasFocus = true;
+}
+
+Control.onblur = function(element) {
+ element.hasFocus = undefined;
+}
+
Control.prototype.initialize = function(eNode, dNode, isShown, isEnabled, action) {
this.disabledNode = dNode;
this.disabledNode.onselectstart = Control.eventStub;
@@ -50,8 +58,30 @@
Control.prototype.doDisable = function() {
this.isEnabled = false;
+
+ var nodes = this.enabledNode.select("a[id='" + this.enabledNode.id +
"link']");
+
+ var newFocusNode = undefined;
+
+ if (nodes && nodes[0]) {
+ var link = nodes[0];
+ if (link.hasFocus) {
+ var disNodes = this.disabledNode.select("a[id='" + this.disabledNode.id
+ "link']");
+ if (disNodes && disNodes[0]) {
+ newFocusNode = disNodes[0];
+ }
+ }
+ }
+
this.doHideNode(this.enabledNode);
this.doShowNode(this.disabledNode);
+ if (newFocusNode && newFocusNode.focus) {
+ //For IE
+ newFocusNode.disabled = false;
+ newFocusNode.focus();
+ //For IE
+ newFocusNode.disabled = true;
+ }
}
Control.prototype.doHideNode = function(node) {
Modified:
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js 2007-12-09
22:52:58 UTC (rev 4643)
@@ -32,27 +32,8 @@
Richfaces.ListBase.CONTROL_SET = ["A", "INPUT", "TEXTAREA",
"SELECT", "OPTION", "BUTTON"];
Richfaces.ListBase.prototype = {
- CLASSES : {
- ROW : {
- ACTIVE : "rich-ordering-list-row-active",
- SELECTED : "rich-ordering-list-row-selected",
- ACTIVE_SELECTED : "rich-ordering-list-row-selected
rich-ordering-list-row-active",
- DISABLED : "rich-ordering-list-row-disabled",
- NORMAL : "rich-ordering-list-row"
- },
- CELL : {
- ACTIVE : "rich-ordering-list-cell-active",
- SELECTED : "rich-ordering-list-cell-selected",
- ACTIVE_SELECTED : "rich-ordering-list-cell-selected
rich-ordering-list-cell-active",
- DISABLED : "rich-ordering-list-cell-disabled",
- NORMAL : "rich-ordering-list-cell",
- BEGIN: " rich-ordering-list-cell-begin",
- END: " rich-ordering-list-cell-end"
- }
- },
-
initialize : function(containerId, contentTableId, headerTableId, focusKeeperId,
- onclickControlId) {
+ onclickControlId, controlClass) {
this.selectedItems = new Array();
//this.layoutManager = layoutManager;
@@ -64,13 +45,14 @@
//this.setFocus();
this.focusKeeper.observe("keydown", (function(e)
{this.onkeydownHandler(window.event || e)}).bindAsEventListener(this));
this.focusKeeper.observe("blur", function (e)
{this.focusListener(e);}.bindAsEventListener(this));
+ this.focusKeeper.observe("focus", function (e)
{this.onfocusHandler(e);}.bindAsEventListener(this));
this.shuttleTbody = this.shuttleTable.tBodies[0];
this.activeItem = null;
this.items = null;
- this.retrieveShuttleItems(containerId);
+ this.retrieveShuttleItems(containerId, controlClass);
this.shuttle = null;
this.sortOrder = Richfaces.ListBase.ASC;
@@ -78,7 +60,7 @@
this.shuttleTable.observe("click", function(e)
{this.onclickHandler(window.event || e)}.bindAsEventListener(this));
},
- retrieveShuttleItems : function(containerId) {
+ retrieveShuttleItems : function(containerId, controlClass) {
var rows = this.shuttleTbody.rows;
this.shuttleItems = new Array();
var id;
@@ -86,15 +68,14 @@
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
id = row.id.split(containerId + ":")[1];
- this.shuttleItems[i]
- = new Richfaces.SelectItem(null, (id || i),
- ((Richfaces.SelectItems.isSelected(row, this.CLASSES)) ? true : false),
row);
- if (Richfaces.SelectItems.isSelected(row, this.CLASSES)) {
+ var item = new controlClass(null, (id || i), row);
+ if (item.isSelected()) {
this.selectedItems.push(row);
}
- if (Richfaces.SelectItems.isActive(row, this.CLASSES)) {
+ if (item.isActive()) {
this.activeItem = row;
}
+ this.shuttleItems[i] = item;
}
},
@@ -144,6 +125,17 @@
return activeElem;
},
+ onfocusHandler: function (event) {
+ if (!this.activeItem && this.shuttleItems.length != 0) {
+ this.activeItem = this.shuttleItems[0]._node;
+
+ }
+
+ if (this.activeItem) {
+ this.activeItem.item.doActive();
+ }
+ },
+
onclickHandler : function(event) {
if (event.srcElement && (event.srcElement.tagName.toLowerCase() ==
"tbody")) {
return;
@@ -162,7 +154,6 @@
}
- Richfaces.SelectItems.doActive(this.activeItem, this.CLASSES);
this.setFocus();
this.saveState();
@@ -188,7 +179,7 @@
this.selectAll();
Event.stop(event);
}
- Richfaces.SelectItems.doActive(this.activeItem, this.CLASSES);
+ this.activeItem.item.doActive();
this.saveState();
break;
}
@@ -212,8 +203,8 @@
changeActiveItems : function(newItem, item) {
this.resetMarked();
- Richfaces.SelectItems.doSelect(newItem, this.CLASSES);
- Richfaces.SelectItems.doActive(newItem, this.CLASSES);
+ newItem.item.doSelect();
+ newItem.item.doActive();
this.activeItem = newItem;
this.selectedItems.push(newItem);
},
@@ -239,10 +230,10 @@
markedItem._selected = true;
this.selectedItems[0] = markedShuttleItem;
}*/
- if (Richfaces.SelectItems.isSelected(activeItem, this.CLASSES)) {
- Richfaces.SelectItems.doNormal(activeItem);
+ if (activeItem.item.isSelected()) {
+ activeItem.item.doNormal();
} else {
- Richfaces.SelectItems.doSelect(activeItem, this.CLASSES);
+ activeItem.item.doSelect();
this.selectedItems[0] = markedShuttleItem; //TODO: delete
}
//}
@@ -263,20 +254,20 @@
this.selectedItems.push(markedShuttleItem);
}*/
- if (Richfaces.SelectItems.isSelected(activeItem, this.CLASSES)) {
+ if (activeItem.item.isSelected()) {
this.selectedItems.remove(markedShuttleItem); //TODO :delete
- Richfaces.SelectItems.doNormal(activeItem, this.CLASSES);
+ activeItem.item.doNormal();
} else {
- Richfaces.SelectItems.doSelect(activeItem, this.CLASSES);
+ activeItem.item.doSelect();
this.selectedItems.push(markedShuttleItem); //TODO :delete
}
if ((this.activeItem != null) && (this.activeItem.rowIndex !=
activeItem.rowIndex)) {
//reset activity of an element
- if (Richfaces.SelectItems.isSelected(this.activeItem, this.CLASSES)) {
- Richfaces.SelectItems.doSelect(this.activeItem, this.CLASSES);
+ if (this.activeItem.item.isSelected()) {
+ this.activeItem.item.doSelect();
} else {
- Richfaces.SelectItems.doNormal(this.activeItem, this.CLASSES);
+ this.activeItem.item.doNormal();
}
}
@@ -311,7 +302,7 @@
selectItemRange : function(startIndex, endIndex) {
var rows = this.shuttleTbody.rows;
for (var i = startIndex; i <= endIndex; i++) {
- Richfaces.SelectItems.doSelect(rows[i], this.CLASSES);
+ rows[i].item.doSelect();
this.selectedItems.push(rows[i]);
//this.getSelectItemByNode(rows[i])._selected = true;
}
@@ -323,7 +314,7 @@
var rows = this.shuttleTbody.rows;
for (var i = 0; i < rows.length; i++) {
var shuttleItem = rows[i];
- Richfaces.SelectItems.doNormal(shuttleItem, this.CLASSES);
+ shuttleItem.item.doNormal();
//this.getSelectItemByNode(shuttleItem)._selected = false; //FIXME
}
this.selectedItems.length = 0;
@@ -379,10 +370,10 @@
//this.shuttleTable.className = Richfaces.ListBase.ORDERING_LIST_CLASSES.normal;
if (this.activeItem) {
- if (Richfaces.SelectItems.isSelected(this.activeItem, this.CLASSES)) {
- Richfaces.SelectItems.doSelect(this.activeItem, this.CLASSES);
+ if (this.activeItem.item.isSelected()) {
+ this.activeItem.item.doSelect();
} else {
- Richfaces.SelectItems.doNormal(this.activeItem, this.CLASSES);
+ this.activeItem.item.doNormal();
}
}
},
@@ -409,22 +400,9 @@
saveState : function() {
for (var i = 0; i < this.shuttleItems.length; i++) {
var item = this.shuttleItems[i];
- var value = item.input.value;
- var idx = value.indexOf(":");
- var state = value.substring(0, idx);
- state = state.replace(/[as]/g, "");
-
- //TODO optimization
- if (Richfaces.SelectItems.isSelected(item._node, this.CLASSES)) {
- state = state + "s";
- }
- if (this.activeItem && (this.activeItem.rowIndex == item._node.rowIndex)) {
- state = state + "a";
- }
-
- item.input.value = state + value.substring(idx);
- }
+ item.saveState();
+ }
}
}
Modified:
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js 2007-12-09
22:52:58 UTC (rev 4643)
@@ -1,8 +1,29 @@
if(!window.Richfaces) window.Richfaces = {};
+Richfaces.OrderingListSelectItem = Class.create(Richfaces.SelectItem);
+Richfaces.OrderingListSelectItem.prototype.CLASSES = {
+ ROW : {
+ ACTIVE : "rich-ordering-list-row-active",
+ SELECTED : "rich-ordering-list-row-selected",
+ ACTIVE_SELECTED : "rich-ordering-list-row-selected
rich-ordering-list-row-active",
+ DISABLED : "rich-ordering-list-row-disabled",
+ NORMAL : "rich-ordering-list-row"
+ },
+ CELL : {
+ ACTIVE : "rich-ordering-list-cell-active",
+ SELECTED : "rich-ordering-list-cell-selected",
+ ACTIVE_SELECTED : "rich-ordering-list-cell-selected
rich-ordering-list-cell-active",
+ DISABLED : "rich-ordering-list-cell-disabled",
+ NORMAL : "rich-ordering-list-cell",
+ BEGIN: " rich-ordering-list-cell-begin",
+ END: " rich-ordering-list-cell-end"
+ }
+},
+
+
Richfaces.OrderingList = Class.create(Richfaces.ListBase, {
- initialize: function($super, containerId, contentTableId, headerTableId, focusKeeperId,
ids, onclickControlId, onorderchanged) {
- $super(containerId, contentTableId, headerTableId, focusKeeperId, onclickControlId);
+ initialize: function($super, containerId, contentTableId, headerTableId, focusKeeperId,
ids, onclickControlId, onorderchanged, controlClass) {
+ $super(containerId, contentTableId, headerTableId, focusKeeperId, onclickControlId,
controlClass);
if (onorderchanged) {
this.container.observe("rich:onorderchanged", onorderchanged);
Modified:
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js 2007-12-09
22:52:58 UTC (rev 4643)
@@ -1,43 +1,67 @@
if(!window.Richfaces) var Richfaces = function(){};
+Richfaces.SelectItem = Class.create();
-Richfaces.SelectItems = {
+Richfaces.SelectItem.prototype = {
+ initialize : function(label, id, node) {
+ this._label = label;
+ this._node = node;
+ this._node.item = this;
+ this._id = id;
+
+ //TODO 2 optimize
+ this.input = $(node.id + "StateInput");
+
+ this.selected = /^s/.test(this.input.value);
+ this.active = /^s?a/.test(this.input.value);
+ },
- doActive : function(row, classes) {
+ doActive : function() {
+ var classes = this.CLASSES;
+ var row = this._node;
var newRowStyle = classes.ROW.ACTIVE;
var newCellStyle = classes.CELL.ACTIVE;
if (Element.hasClassName(row, classes.ROW.SELECTED)) {
newRowStyle = classes.ROW.ACTIVE_SELECTED;
newCellStyle = classes.CELL.ACTIVE_SELECTED;
}
- Richfaces.SelectItems.doChange(row, newRowStyle, newCellStyle,
+ this.doChange(row, newRowStyle, newCellStyle,
classes.CELL.BEGIN, classes.CELL.END);
+
+ this.active = true;
},
- doSelect : function(row, classes) {
- Richfaces.SelectItems
- .doChange(row,
+ doSelect : function() {
+ var row = this._node;
+ var classes = this.CLASSES;
+ this.doChange(row,
classes.ROW.SELECTED,
classes.CELL.SELECTED);
+
+ this.selected = true;
},
- doNormal : function(row, classes) {
- Richfaces.SelectItems
- .doChange(row,
+ doNormal : function() {
+ var row = this._node;
+ var classes = this.CLASSES;
+ this.doChange(row,
classes.ROW.NORMAL,
classes.CELL.NORMAL);
+
+ this.active = false;
+ this.selected = false;
},
- isSelected : function(row, classes) {
- return Richfaces.SelectItems.compareStates(row, classes.ROW.SELECTED);
+ isSelected : function() {
+ return this.selected;
},
- isActive : function(row, classes) {
- return Richfaces.SelectItems.compareStates(row, classes.ROW.ACTIVE);
+ isActive : function() {
+ return this.active;
},
doChange : function(row, classNameRow, classNameCell, classNameCellBegin,
classNameCellEnd) {
- Richfaces.SelectItems.doChangeNode(row, classNameRow);
+ this.doChangeNode(row, classNameRow);
var cells = row.cells;
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
@@ -48,7 +72,7 @@
if (classNameCellBegin && 0 == i){
clazz += " " + classNameCellBegin;
}
- Richfaces.SelectItems.doChangeNode(cell, clazz);
+ this.doChangeNode(cell, clazz);
}
},
@@ -56,24 +80,17 @@
node.className = className;
},
- compareStates : function(row, className) {
- if (row.className.indexOf(className) != -1) {
- return true;
+ saveState: function() {
+ var regex = /^s?a?/;
+
+ if (this.selected && this.active) {
+ this.input.value = this.input.value.replace(regex, 'sa');
+ } else if (this.selected) {
+ this.input.value = this.input.value.replace(regex, 's');
+ } else if (this.active) {
+ this.input.value = this.input.value.replace(regex, 'a');
+ } else {
+ this.input.value = this.input.value.replace(regex, '');
}
- return false;
}
}
-
-Richfaces.SelectItem = Class.create();
-Richfaces.SelectItem.prototype = {
- initialize : function(label, id, selected, node) {
- this._label = label;
- this._node = node;
- this._node.item = this;
- this._id = id;
- this._selected = selected;
-
- //TODO 2 optimize
- this.input = $(node.id + "StateInput");
- }
-}
Modified:
branches/3.1.x/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx
===================================================================
---
branches/3.1.x/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx 2007-12-09
22:52:44 UTC (rev 4642)
+++
branches/3.1.x/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx 2007-12-09
22:52:58 UTC (rev 4643)
@@ -88,7 +88,7 @@
var clientId = '#{cId}';
Event.onReady(function() {
var cotrolsIdPrefix = [['up', 'disup'], ['down',
'disdown'], ['last', 'dislast'],
['first','disfirst']];
- var shuttle = new Richfaces.OrderingList('#{cId}',
'#{cId}internal_tab', '#{cId}internal_header_tab',
'#{cId}focusKeeper', cotrolsIdPrefix, '#{cId}sortLabel',
#{this:getAsEventHandler(context, component, "onorderchanged")});
+ var shuttle = new Richfaces.OrderingList('#{cId}',
'#{cId}internal_tab', '#{cId}internal_header_tab',
'#{cId}focusKeeper', cotrolsIdPrefix, '#{cId}sortLabel',
#{this:getAsEventHandler(context, component, "onorderchanged")},
Richfaces.OrderingListSelectItem);
var layoutManager = new LayoutManager('#{clientId}internal_header_tab',
'#{clientId}internal_tab');
layoutManager.widthSynchronization();
});