PDA

View Full Version : error when TabPanel has a Split in it



symbio
13 Jul 2009, 6:06 AM
I have some GridPanels in TabPanel layout by border mode,but when I put a border mode panel in a tab container, the panel's height is 0px. I have to set the height by myself .How can I make the panel fit the container by itself?


There is another question, when I add a parameter " split:true, " to one of the panel items in activetab ,I found that after i switch current tab to another then switch back,the spliter in the activetab couldn't move left and move right about 40px automatically when I move the spliter a little right.

This is an example page. Please help me, thanks.

http://www.symbio-world.com/ext/demo.htm

Click "Price" Tab => Click "Info" Tab => Then move the Spliter you'll see the event

symbio
13 Jul 2009, 6:25 AM
The main code :



var BuildingPanel = new Ext.Panel( {
title :'Info',
layout :'border',
items : [ {
id :'BuildingInfo',
title :'Info',
layout :'fit',
plain: true,
region :'center',
items :buildingGrid
}, {
title :'Alias',
layout :'fit',
region :'east',
split:true,
width :200,
items :buildingaliasGrid
}, {
title :'Example',
layout :'fit',
region :'south',
split:true,
height :160,
items :housepropertyGrid
} ]
});

var BasePricePanel = new Ext.Panel( {
title :'Info',
layout :'border',
items : [{
id :'BuildingInfo',
title :'List',
layout :'fit',
plain: true,
region :'center',
items :basepriceGrid
}, {
title :'Alias',
region :'east',
layout :'fit',
split:true,
width :200,
items :districtaliasGrid
}]
});

var DistrictTabs = new Ext.TabPanel( {
region :'center',
margins :'2 5 5 0',
activeTab :0,
defaults : {
autoScroll :true
},
items : [ {
title :'Price',
items :BasePricePanel
}, {
title :'Info',
items :BuildingPanel
} ]
});

Animal
13 Jul 2009, 6:46 AM
The USUAL

You've over----ng nested it in a no-layout Panel!!!



items: [BasePricePanel, BuildingPanel]


If you can explain what drove you to WRAP those Panels in one extra layer of Panelling, and we can use that feedback to put something in the docs somewhere that would stop people doing this, it would cut forum traffic by 50%!!!!!!!!

Condor
13 Jul 2009, 6:49 AM
1. Your code is overnested.
- DistrictTabs should have BasePricePanel and BuildingPanel as items (and the unneeded panels also don't have a layout).
- BuildingPanel should have buildingGrid, buildingaliasGrid and housepropertyGrid as items.
- BasePricePanel should have basepriceGrid and districtaliasGrid as items.

2. Your tabpanel needs:

layoutOnTabChange: true,
defaults: {hideMode: 'offsets'}
(the second line is to work around an IE bug)

symbio
13 Jul 2009, 7:34 AM
Thanks a lot!

I'm a beginning, so sorry for these simple questions :">

Animal
13 Jul 2009, 9:11 AM
What does your code look like now? Is it doing what you need?

symbio
13 Jul 2009, 9:27 AM
Now I removed all the overnested code, and add code to my tabpanel.



var DistrictTabs = new Ext.TabPanel( {
region :'center',
margins :'2 5 5 0',
activeTab :0,
layoutOnTabChange: true,
defaults: {
hideMode: Ext.isIE ? 'offsets' : 'display',
autoScroll :true,
layout :'border',
defaults:{
layout :'fit'
}
},
items : [{
title :'Price',
items : [basepriceGrid, districtaliasGrid]
},{
title :'Info',
items : [buildingGrid, buildingaliasGrid, housepropertyGrid]
}]
});



the Grid fit the tabpanel automatically now, but there still a question. when I move the Spliter left or up, the panel will become small and not fit to the tabpanel.(move right or down will be ok again).

DemoPage : http://www.symbio-world.com/ext/demo1.htm

just like the attachment.

Animal
13 Jul 2009, 9:47 AM
Show all the code.

symbio
13 Jul 2009, 9:50 AM
<head>
<META content="text/html; charset=GB2312" http-equiv=Content-Type>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ux/css/RowEditor.css" />

<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="ux/RowEditor.js"></script>
<script type="text/javascript" src="resources/js/dwrproxy.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.ext-strict .ext-ie6 .x-layout-split{background-color: #dfe8f6;}
</style>
</head>
<script language=javascript>
var hasinit=false;
Ext.onReady( function() {
hasinit=true;
Ext.QuickTips.init();
var rootnode = new Ext.tree.AsyncTreeNode( {
id :'root',
text :'Area',
expanded :true
});
//Tree
var treeloader = new Ext.tree.TreeLoader( {
dataUrl :''
});
var tree = new Ext.tree.TreePanel( {
title :'Tree',
region :'west',
// border: false,
split :true,
margins :'2 0 5 5',
width :200,
minSize :100,
maxSize :500,
autoScroll :true,
enableDD :true,
loader :treeloader,
root :rootnode,
rootVisible :false
});
new Ext.tree.TreeSorter(tree, {
property :'text'
});
tree
.on(
'beforeload',
function(node) {
tree.loader.dataUrl = '';
});
tree.on('click', function(node) {
});
//BuildingList
var Building = Ext.data.Record.create( [ {
name :'id'
}, {
name :'buildingname'
}, {
name :'rate'
}, {
name :'initdate'
} ]);
var buildingstore = new Ext.data.JsonStore( {
fields :Building,
sortInfo : {
field :'buildingname',
direction :'ASC'
}
});
var editor = new Ext.ux.RowEditor( {
saveText :'Update'
});
var buildingGrid = new Ext.grid.GridPanel(
{
title :'Info',
region :'center',
store :buildingstore,
plugins : [ editor ],
loadMask :true,
stripeRows :true,
autoExpandColumn :'buildingname',
autoScroll :true,
tbar : [
{
iconCls :'add',
text :'AddNew',
handler : function() {
var e = new Building();
editor.stopEditing();
buildingstore.insert(0, e);
buildingGrid.getView().refresh();
buildingGrid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},
{
ref :'../removeBtn',
iconCls :'remove',
text :'Remove',
disabled :true,
handler : function() {
editor.stopEditing();
var s = buildingGrid.getSelectionModel()
.getSelections();
for ( var i = 0, r; r = s[i]; i++) {
buildingstore.remove(r);
}
}
} ],
columns : [
new Ext.grid.RowNumberer(),
{
id :'buildingname',
header :'Name',
dataIndex :'buildingname',
width :120,
sortable :true,
editor : {
xtype :'textfield',
allowBlank :false
}
},
{
header :'Rate',
dataIndex :'rate',
width :60,
sortable :true,
editor : {
xtype :'textfield',
allowBlank :false
}
},
{
id :'initdate',
xtype :'datecolumn',
header :'Date',
dataIndex :'initdate',
format :'Y-m-d',
width :80,
sortable :true,
groupRenderer :Ext.util.Format
.dateRenderer('M y'),
editor : {
xtype :'datefield',
allowBlank :false,
minValue :'01/01/1900',
minText :'Can\'t have a start date before the company existed!',
maxValue :(new Date()).format('m/d/Y')
}
} ]
});
buildingGrid.getSelectionModel().on('selectionchange', function(sm) {
buildingGrid.removeBtn.setDisabled(sm.getCount() < 1);
});
//BuildingAliasList
var BuildingAlias = Ext.data.Record.create( [ {
name :'id'
}, {
name :'aliasname'
} ]);
var buildingaliasstore = new Ext.data.JsonStore( {
fields :BuildingAlias,
sortInfo : {
field :'aliasname',
direction :'ASC'
}
});
var editor3 = new Ext.ux.RowEditor( {
saveText :'Update'
});
var buildingaliasGrid = new Ext.grid.GridPanel(
{
title :'Alias',
region :'east',
split:true,
width :200,
store :buildingaliasstore,
plugins : [ editor3 ],
loadMask :true,
stripeRows :true,
autoExpandColumn :'aliasname',
autoScroll :true,
tbar : [
{
iconCls :'add',
text :'AddNew',
handler : function() {
var e = new BasePrice();
editor.stopEditing();
buildingaliasstore.insert(0, e);
buildingaliasGrid.getView().refresh();
buildingaliasGrid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},
{
ref :'../removeBtn',
iconCls :'remove',
text :'Remove',
disabled :true,
handler : function() {
editor.stopEditing();
var s = buildingaliasGrid.getSelectionModel()
.getSelections();
for ( var i = 0, r; r = s[i]; i++) {
buildingaliasstore.remove(r);
}
}
} ],
columns : [
new Ext.grid.RowNumberer(),
{
id :'aliasname',
header :'Alias',
dataIndex :'aliasname',
width :80,
sortable :true,
editor : {
xtype :'textfield',
allowBlank :false
}
} ]
});
buildingaliasGrid.getSelectionModel().on('selectionchange', function(sm) {
buildingaliasGrid.removeBtn.setDisabled(sm.getCount() < 1);
});
//HousePropertyList
var HouseProperty = Ext.data.Record.create( [ {
name :'id'
}, {
name :'housepropertyname'
} ]);
var housepropertystore = new Ext.data.JsonStore( {
fields :HouseProperty,
sortInfo : {
field :'housepropertyname',
direction :'ASC'
}
});
var editor4 = new Ext.ux.RowEditor( {
saveText :'Update'
});
var housepropertyGrid = new Ext.grid.GridPanel(
{
title :'Example',
region :'south',
split:true,
height :160,
store :buildingaliasstore,
plugins : [ editor4 ],
loadMask :true,
stripeRows :true,
autoExpandColumn :'housepropertyname',
autoScroll :true,
tbar : [
{
iconCls :'add',
text :'AddNew',
handler : function() {
var e = new BasePrice();
editor.stopEditing();
housepropertystore.insert(0, e);
housepropertyGrid.getView().refresh();
housepropertyGrid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},
{
ref :'../removeBtn',
iconCls :'remove',
text :'Remove',
disabled :true,
handler : function() {
editor.stopEditing();
var s = housepropertyGrid.getSelectionModel()
.getSelections();
for ( var i = 0, r; r = s[i]; i++) {
housepropertystore.remove(r);
}
}
} ],
columns : [
new Ext.grid.RowNumberer(),
{
id :'housepropertyname',
header :'Name',
dataIndex :'housepropertyname',
width :80,
sortable :true,
editor : {
xtype :'textfield',
allowBlank :false
}
} ]
});
housepropertyGrid.getSelectionModel().on('selectionchange', function(sm) {
housepropertyGrid.removeBtn.setDisabled(sm.getCount() < 1);
});
//BasePriceList
var BasePrice = Ext.data.Record.create( [ {
name :'id'
}, {
name :'modifydate'
}, {
name :'baseprice'
} ]);
var basepricestore = new Ext.data.JsonStore( {
fields :BasePrice,
sortInfo : {
field :'modifydate',
direction :'DESC'
}
});
var editor1 = new Ext.ux.RowEditor( {
saveText :'Update'
});
var basepriceGrid = new Ext.grid.GridPanel(
{
title :'List',
region :'center',
store :basepricestore,
plugins : [ editor1 ],
loadMask :true,
stripeRows :true,
autoExpandColumn :'baseprice',
autoScroll :true,
tbar : [
{
iconCls :'add',
text :'AddNew',
handler : function() {
var e = new BasePrice();
editor.stopEditing();
basepricestore.insert(0, e);
basepriceGrid.getView().refresh();
basepriceGrid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},
{
ref :'../removeBtn',
iconCls :'remove',
text :'Remove',
disabled :true,
handler : function() {
editor.stopEditing();
var s = basepriceGrid.getSelectionModel()
.getSelections();
for ( var i = 0, r; r = s[i]; i++) {
basepricestore.remove(r);
}
}
} ],
columns : [
new Ext.grid.RowNumberer(),
{
id :'modifydate',
xtype :'datecolumn',
header :'Date',
dataIndex :'modifydate',
format :'Y-m-d',
width :80,
sortable :true,
groupRenderer :Ext.util.Format
.dateRenderer('M y'),
editor : {
xtype :'datefield',
allowBlank :false,
minValue :'01/01/1900',
minText :'Can\'t have a start date before the company existed!',
maxValue :(new Date()).format('m/d/Y')
}
},
{
id :'baseprice',
xtype :'numbercolumn',
header :'Price',
dataIndex :'baseprice',
width :60,
sortable :true,
editor : {
xtype :'textfield',
allowBlank :false
}
} ]
});
basepriceGrid.getSelectionModel().on('selectionchange', function(sm) {
basepriceGrid.removeBtn.setDisabled(sm.getCount() < 1);
});
//DistrictAliasList
var DistrictAlias = Ext.data.Record.create( [ {
name :'id'
}, {
name :'aliasname'
} ]);
var districtaliasstore = new Ext.data.JsonStore( {
fields :DistrictAlias,
sortInfo : {
field :'aliasname',
direction :'ASC'
}
});
var editor2 = new Ext.ux.RowEditor( {
saveText :'Update'
});
var districtaliasGrid = new Ext.grid.GridPanel({
title :'Alias',
region :'east',
layout :'fit',
split:true,
width :200,
store : districtaliasstore,
plugins : [ editor2 ],
loadMask :true,
region :'east',
stripeRows :true,
autoExpandColumn :'aliasname',
autoScroll :true,
tbar : [
{
iconCls :'add',
text :'AddNew',
handler : function() {
var e = new BasePrice();
editor.stopEditing();
districtaliasstore.insert(0, e);
districtaliasGrid.getView().refresh();
districtaliasGrid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},
{
ref :'../removeBtn',
iconCls :'remove',
text :'Remove',
disabled :true,
handler : function() {
editor.stopEditing();
var s = districtaliasGrid.getSelectionModel()
.getSelections();
for ( var i = 0, r; r = s[i]; i++) {
districtaliasstore.remove(r);
}
}
} ],
columns : [
new Ext.grid.RowNumberer(),
{
id :'aliasname',
header :'Alias',
dataIndex :'aliasname',
width :80,
sortable :true,
editor : {
xtype :'textfield',
allowBlank :false
}
} ]
});
districtaliasGrid.getSelectionModel().on('selectionchange', function(sm) {
districtaliasGrid.removeBtn.setDisabled(sm.getCount() < 1);
});
//DistrictTabs
var DistrictTabs = new Ext.TabPanel( {
region :'center',
margins :'2 5 5 0',
activeTab :0,
layoutOnTabChange: true,
defaults: {
hideMode: Ext.isIE ? 'offsets' : 'display',
autoScroll :true,
layout :'border',
defaults:{
layout :'fit'
}
},
items : [{
title :'Price',
items : [basepriceGrid, districtaliasGrid]
},{
title :'Info',
items : [buildingGrid, buildingaliasGrid, housepropertyGrid]
}]
});
//Page
new Ext.Viewport( {
layout :'border',
title :'Layout Browser',
items : [ tree, DistrictTabs ],
renderTo :Ext.getBody()
});
});
</script>

Animal
13 Jul 2009, 9:58 AM
Looks good. I can't see what a problem could be. Your demo link does not work.

symbio
13 Jul 2009, 10:10 AM
This is my code packet. Maybe you can find some problem by this, thanks again.

symbio
13 Jul 2009, 10:13 AM
and my browser is ie 8.0, maybe that cause this problem again...

symbio
13 Jul 2009, 10:32 AM
Sorry again, I found the problem myself, maybe is an incompatible problem.

when I remove the code "autoScroll :true," from DistrictTabs defaults and add it into low level defaults the problem was fixed.

The Final code just like the below...


var DistrictTabs = new Ext.TabPanel( {
region :'center',
margins :'2 5 5 0',
activeTab :0,
layoutOnTabChange: true,
defaults: {
hideMode: Ext.isIE ? 'offsets' : 'display',
layout :'border',
defaults:{
autoScroll :true,
layout :'fit'
}
},
items : [{
title :'Price',
items : [basepriceGrid, districtaliasGrid]
},{
title :'Info',
items : [buildingGrid, buildingaliasGrid, housepropertyGrid]
}]
});


Wish you have a nice day, thanks again!