PDA

View Full Version : Accordion-style gets corrupt



defcon1
8 Aug 2009, 3:10 AM
Hi again! ;)

I am using a BorderLayout with a center-region and an east-region. In the
east-region I got a accordion-item which getīs instantiated with "new Ext.Panel() .."

This way it works fine. So I want to encapsulate this Panel in an own class by using



myapp.facet = function() {

var panelConfig = {

region: "east",
layout: "accordion",
title: "Facets",
width: 200,
split: true,
collapsible: true,

defaults: {
// applied to each contained panel

//bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
//animate: true,
activeOnTop: false
},
items: [{
title: 'Author',
html: '<p>Panel content!</p>'
},{
title: 'Date',
html: '<p>Panel content!</p>'
},{
title: 'Filetype',
html: '<p>Panel content!</p>'
}]

};

Ext.apply (this, panelConfig);

myappt.facet.superclass.initComponent.apply(this, arguments);
}

Ext.extend (myapp.facet, Ext.Panel);


On the first view it looks good, but as soon as I collapse the accordion, the expand-button
doesnīt appear and if I click on the bar it expands but collapses again as soon as it losts
its focus.... is it a bug or am I doing something wrong?

Thanks! :-?8-|
d1

Animal
8 Aug 2009, 3:15 AM
Do not extend just to configure.

Simply use a function



function getMyFacet() {
return new Ext.Panel({
region: "east",
layout: "accordion",
title: "Facets",
width: 200,
split: true,
collapsible: true,

defaults: {
// applied to each contained panel

//bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
//animate: true,
activeOnTop: false
},
items: [{
title: 'Author',
html: '<p>Panel content!</p>'
},{
title: 'Date',
html: '<p>Panel content!</p>'
},{
title: 'Filetype',
html: '<p>Panel content!</p>'
}]
});
}


Why would you go to the lengths of creating a subclass to do that?

defcon1
8 Aug 2009, 3:21 AM
Because I need some more functionality later, therefore I wanted to pass in some parameters to load dynamically some data ...

BTW: Extending a TabPanel this way works great ...

defcon1
8 Aug 2009, 3:35 AM
It works this way, but I still donīt understand why it is not working my way ... :-?

Animal
8 Aug 2009, 3:45 AM
Explain "not working", show code show full size screenshot.

defcon1
11 Nov 2009, 10:08 AM
Hi guys,

now I do have the same problem again, here is the example code:

As soons as I hide the panel, it getīs broken



<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>

<script type="text/javascript">

Ext.namespace ("mytest");
Ext.namespace ("mytest.ui");


mytest.ui.main = function() {

this.init = function() {

buildUI();
}


var buildUI = function() {

// Create Viewport
var vp = new Ext.Viewport({
layout : "border",
items : [
new Ext.Panel({region:'center'}),
new mytest.ui.searcharea()
]
});
}

}


mytest.ui.searcharea = function (cfg) {

var panelConfig = {

region: "west",
border: false,
width: 300,

id:'feed-tree',
title:'Feeds',
split:true,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
rootVisible:false,
lines:false,
autoScroll:true,
root: new Ext.tree.TreeNode('Feeds'),
collapseFirst:false,
tbar: [{
iconCls:'add-feed',
text:'Add Feed',
handler: function(){},
scope: this
},{
id:'delete',
iconCls:'delete-icon',
text:'Remove',
handler: function(){},
scope: this
}]
}

Ext.apply (this, panelConfig);
Ext.apply(this, cfg);

// This is necessary to get the superclass (Ext.TabPanel) initialized and shown
mytest.ui.searcharea.superclass.initComponent.apply(this, arguments);
}

Ext.extend (mytest.ui.searcharea, Ext.tree.TreePanel, {});


mytest.viewport = new mytest.ui.main();
Ext.onReady(mytest.viewport.init);

</script>

</head>
<body>

</body>
</html>

Animal
11 Nov 2009, 11:18 AM
Why on earth have you written such an empty class?

defcon1
11 Nov 2009, 1:51 PM
Itīs just a part of an application, just for a showcase whatīs going wrong. In real life we add some more functionality to that empty class ...

But thatīs not the problem I have, my question is why it behaves faulty ... ?

aw1zard2
11 Nov 2009, 2:01 PM
What version of Ext are you using 3.0.0?

If so Ext-Js 3.0.3 is now on public download.

Might want to see if you have the same issue with it.

Until the main download link is fixed here is the 3.0.3 public link.

http://www.extjs.com/deploy/ext-3.0.3.zip (http://www.extjs.com/forum/../deploy/ext-3.0.3.zip)

defcon1
12 Nov 2009, 12:49 AM
Many thanks for the link, but still the same issue ... :-?

Animal
12 Nov 2009, 1:03 AM
Anyway, hide what Panel? You can't hide anything that is in that demo page.

And "broken"? What on earth does that mean? OS does a blue screen of death? Browser hangs and needs restarting?

defcon1
12 Nov 2009, 3:44 AM
Sorry for my bad english ... I meant that the collapse-button disappears if I collapse the panel and if I click to the bar the panel appears but with a corrupt layout.

Animal
12 Nov 2009, 3:47 AM
Collapsing a collapsible region Panel should leave a "placeholder" bar there with an "expand" tool in it.

You cannot hide a region, you must collapse it.

defcon1
12 Nov 2009, 4:38 AM
And thatīs the problem ... in the posted example the placeholder bar appears but not "expand" button and if you click on the bar, the panel appears, but itīs layout is corrupt.