View Full Version : [CLOSED] Tablelayout issue

19 Jul 2010, 5:20 AM
Hello, ExtJS team!

I've prepared the example based on extjs\examples\layout\table.html to demonstrate the issue.

<title>Table Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js">

<script type="text/javascript">
var panel = new Ext.Panel({
id: 'main-panel',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
layout: 'table',
layoutConfig: {
columns: 4
items: [{
id: "Panel3",
items: {
id: "DatePicker1",
xtype: "datepicker",
format: "d.m.Y"
layout: "auto",
title: "datepicker"
}, {
id: "TabPanel1",
xtype: "tabpanel",
items: {
id: "ctl03",
items: [{
id: "Checkbox1",
xtype: "checkbox",
inputValue: "Checkbox1"
layout: "auto",
title: "Tab 1"
title: "TabPanel",
activeTab: 0
}, {
id: "Panel5",
items: [{
id: "Button1",
xtype: "button",
text: "Button"
layout: "auto"
<script type="text/javascript" src="../shared/examples.js">
<!-- EXAMPLES -->

To see the third column I have to scroll long to the right. It's so because of width=5000px of x-tab-strip css class. I think it's wrong behavior, isn't that so? When I override this css class by the following way (for example) the behavior looks better:

<style type="text/css">
ul.x-tab-strip {
width: 100% !important;

19 Jul 2010, 5:37 AM
Wrong solution. Instead, you need to give your tabpanel a fixed width.

If you don't want to give it a fixed width then you could consider using a HBoxLayout instead of a TableLayout (layout:'table' doesn't size it's children). Another solution would be to use the FitToParent plugin.

20 Jul 2010, 12:16 AM
Oh, thanks a lot!
I should to know more about the rudiments of library such as layouts.

Jamie Avins
20 Jul 2010, 9:07 AM
Table layouts are quite static, you have to tell them everything...

20 Jul 2010, 9:21 AM
It's good there are another layouts in the library:)