PDA

View Full Version : Doctype and borderlayout



papipsycho
6 Jul 2009, 6:01 AM
hello,

i have a probleme with extjs 2.2.1
when add doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

they are borderlayout in tabpanel don't displayed !!


sorry for my bad english !

Condor
6 Jul 2009, 6:02 AM
Did you add the following lines to your tabpanel config:

layoutOnTabChange: true,
defaults: {hideMode: 'offsets'}

papipsycho
6 Jul 2009, 6:17 AM
Thanks for speed reply

but don't work



SearchPanel = new Ext.Panel({
style: 'height:100%',
bodyStyle: 'height:100%',
border: false,
layout:'border',
items: [
TabPanelInSearch,
BottomPanelInSearch
]
});


http://img90.imageshack.us/img90/3925/ext.th.png (http://img90.imageshack.us/i/ext.png/)

Condor
6 Jul 2009, 6:25 AM
Why are you using height:100% (which doesn't work in standards mode)?

Post the layout config you are using (I assume you are overnesting and/or missing a layout).

papipsycho
6 Jul 2009, 7:40 AM
this is my viewport


viewport = new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
id : 'north-panel',
layout : 'fit',
height : 28,
items : new Ext.Toolbar({
id:'TopToolbar',
items:[{
text: 'File',
menu: FileMenu
},{
text: 'Edit',
menu: EditMenu
},{
text: 'View',
menu: ViewMenu
},{
text: '?',
menu: HelpMenu
}]
})
},{
region : 'west',
id : 'west-panel',
split : true,
width : 338,
minSize : 175,
maxSize : 400,
collapsible : false,
margins : '5 0 5 5',
cmargins : '5 5 5 5',
layout : 'border',
listeners: {
resize: function() {
var width = this.getSize().width;
if(Ext.isIE6) {
txtSearchInTree.setWidth(width-5);
comboPhoneBookInTree.setWidth((width/2)-2);
comboTagInTree.setWidth((width/2)-2);
} else if(Ext.isIE7 || Ext.isIE8) {
txtSearchInTree.setWidth(width-7);
comboPhoneBookInTree.setWidth((width/2)-4);
comboTagInTree.setWidth((width/2)-4);
} else {
txtSearchInTree.setWidth(width-8);
comboPhoneBookInTree.setWidth((width/2)-5);
comboTagInTree.setWidth((width/2)-5);
}
}
},
items : [
SearchPanelNorth,
AlphaNumTabPanel,
TreeViewCompany
]
},{
bodyStyle : 'overflow:hidden;overflow-y:auto;',
region : 'center',
margins : '5 5 5 0',
id : 'center-panel',
xtype:'tabpanel',
layoutOnTabChange: true,
defaults: {hideMode: 'offsets'},
activeTab: 0,
items: [{
title: 'Search',
iconCls: 'icon-search',
items: new search.Panel()
},{
title: 'List',
iconCls: 'icon-list',
items: new list.Panel()
},{
title: 'PhoneBook',
iconCls: 'icon-phonebook',
items: PhoneBookPanel
},{
title: 'Company',
iconCls: 'icon-company',
items: CompanyPanel
},{
title: 'Office',
iconCls: 'icon-office',
items: OfficePanel
},{
title: 'Dept',
iconCls: 'icon-dept',
items: DeptPanel
},{
title: 'Contact',
iconCls: 'icon-contact',
items: ContactPanel
}]
}]
});
viewport.render(document.body);


this is search panel


Panel : function() {
new Ext.form.ComboBox({
renderTo: 'comboPhoneBookInSearch',
width: 300,
value: 'PhoneBook'
});

new Ext.Button({
renderTo: 'btnSearchInSearch',
iconCls: 'icon-search',
text: 'Search'
});

new Ext.Button({
renderTo: 'btnResetInSearch',
iconCls: 'icon-reset',
text: 'Reset'
});

new Ext.Button({
renderTo: 'btnCancelInSearch',
iconCls: 'icon-cancel',
text: 'Cancel'
});

TabPanelInSearch = new Ext.TabPanel({
region:'center',
activeTab: 0,
border: false,
items: [{
title: 'General',
id: 'GeneralPanelInSearch',
contentEl: 'ElGeneralPanelInSearch',
bodyCfg : {
cls: 'background'
},
border: false,
listeners : {
beforerender: function() {
Ext.get('ElGeneralPanelInSearch').show();
},
render: function() {
txtSeachGeneralPanelInSearch = new Ext.form.TextField({
renderTo: 'txtSeachGeneralPanelInSearch',
value: 'Frist, Last, Name, Code, Alias',
style: 'color:darkgray',
width:400,
listeners: {
focus: function() {
if(this.getValue() == "Frist, Last, Name, Code, Alias") {
this.setValue("");
this.el.dom.style.color = "black";
}
},
blur: function() {
if(this.getValue() == "") {
this.el.dom.style.color = "DarkGray";
this.setValue("Frist, Last, Name, Code, Alias");
}
}
}
});

treeTagGeneralPanelInSearch = new Ext.tree.TreePanel({
renderTo: 'treeTagGeneralPanelInSearch',
root: new Ext.tree.TreeNode({
text: 'tag'
}),
width:400,
height:300,
checked: true
});
}
}
},{
title: 'Company/Office/Dept',
id: 'CompanyPanelInSearch',
contentEl: 'ElCompanyPanelInSearch',
border: false,
bodyCfg : {
cls: 'background'
},
listeners : {
beforerender: function() {
Ext.get('ElCompanyPanelInSearch').show();
},
render: function() {
new Ext.form.TextField({
renderTo: 'txtNameCompanyPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtEmailCompanyPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtAliasCompanyPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtMsnCompanyPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtCodeCompanyPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtYahooCompanyPanelInSearch',
width:400
});

new Ext.form.ComboBox({
renderTo: 'comboCountryCompanyPanelInSearch',
width: 400
});

new Ext.form.ComboBox({
renderTo: 'comboTownCompanyPanelInSearch',
width: 400
});

new Ext.form.Checkbox({
renderTo: 'chkAddressCompanyPanelInSearch',
boxLabel: 'Address',
checked: true
});

new Ext.form.Checkbox({
renderTo: 'chkInvoicingCompanyPanelInSearch',
boxLabel: 'Invoicing',
checked: true
});

new Ext.form.Checkbox({
renderTo: 'chkOtherCompanyPanelInSearch',
boxLabel: 'Other',
checked: true
});

new Ext.tree.TreePanel({
renderTo: 'treeTagCompanyPanelInSearch',
root: new Ext.tree.TreeNode({
text: 'tag'
}),
width:400,
height:300,
checked: true
});
}
}
},{
title: 'Contact',
id: 'ContactPanelInSearch',
contentEl: 'ElContactPanelInSearch',
border: false,
bodyCfg : {
cls: 'background'
},
listeners : {
beforerender: function() {
Ext.get('ElContactPanelInSearch').show();
},
render: function() {
new Ext.form.TextField({
renderTo: 'txtLastContactPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtEmailContactPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtFristContactPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtMsnContactPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtPositionContactPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtSkypeContactPanelInSearch',
width:400
});

new Ext.form.TextField({
renderTo: 'txtYahooContactPanelInSearch',
width:400
});

new Ext.form.ComboBox({
renderTo: 'comboTitleContactPanelInSearch',
width: 400
});

new Ext.form.ComboBox({
renderTo: 'comboCountryContactPanelInSearch',
width: 400
});

new Ext.form.ComboBox({
renderTo: 'comboTownContactPanelInSearch',
width: 400
});

new Ext.form.Checkbox({
renderTo: 'chkAddressContactPanelInSearch',
boxLabel: 'Address',
checked: true
});

new Ext.form.Checkbox({
renderTo: 'chkHomeContactPanelInSearch',
boxLabel: 'Home',
checked: true
});

new Ext.form.Checkbox({
renderTo: 'chkGiftContactPanelInSearch',
boxLabel: 'Gift',
checked: true
});

new Ext.form.Checkbox({
renderTo: 'chkOtherContactPanelInSearch',
boxLabel: 'Other',
checked: true
});

new Ext.tree.TreePanel({
renderTo: 'treeTagContactPanelInSearch',
root: new Ext.tree.TreeNode({
text: 'tag'
}),
width:400,
height:300,
checked: true
});
}
}
}]
});

var BottomPanelInSearch = new Ext.Panel({
region: 'south',
height: 30,
border: false,
contentEl : 'BottomPanelInSearch',
bodyCfg : {
cls: 'background'
},
listeners : {
beforerender: function() {
Ext.get('BottomPanelInSearch').show();
},
render: function() {

}
}
});

SearchPanel = new Ext.Panel({
style: 'height:100%',
bodyStyle: 'height:100%',
border: false,
layout:'border',
items: [
TabPanelInSearch,
BottomPanelInSearch
]
});

return SearchPanel;
}

papipsycho
6 Jul 2009, 7:43 AM
for info i use 2.2.1

Condor
6 Jul 2009, 7:46 AM
Do NOT use renderTo in a layout!!!

Include the components as items in a layout. That way Ext can position and size them correctly.

papipsycho
6 Jul 2009, 7:54 AM
there some renderTo just in combobox textfield and checkbox but not used in panel or tabpanel.

Condor
6 Jul 2009, 7:56 AM
And your code is overnested:


{
title: 'Search',
iconCls: 'icon-search',
items: new search.Panel()
}
should be:

{
title: 'Search',
iconCls: 'icon-search',
layout: 'fit',
items: new search.Panel()
}
or even better:

Ext.apply(new search.Panel(), {
title: 'Search',
iconCls: 'icon-search'
})
or better readable:

new search.Panel({
title: 'Search',
iconCls: 'icon-search'
})
...
Panel: function(config){
...
var SearchPanel = new Ext.Panel(Ext.apply({
...
}, config));
return SearchPanel;
}

ps. Note the use of 'var'. You are creating a lot of global variables.

papipsycho
6 Jul 2009, 7:58 AM
thanks for your help