PDA

View Full Version : [CLOSED] Tablelayout issue



Daniil
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.


<html>
<head>
<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">
</script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js">
</script>

<script type="text/javascript">
Ext.onReady(function(){
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>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js">
</script>
<!-- EXAMPLES -->
</body>
</html>


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;
}
</style>

Condor
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.

Daniil
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...

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