PDA

View Full Version : How to make panel title overlay the solid border



bacha
14 Mar 2014, 12:05 PM
Hi,

I was trying to create a sample application. I would like to know how we can achieve the effect displayed below in extjs
48313
I would like to have the panel title overlay the border. I played around with the .x-panel-header in my css addiing custom styles but could not achieve this.

Please help!

LesJ
14 Mar 2014, 12:16 PM
You could probably achieve this look by using a regular container which would add an element positioned above it's border.

bacha
14 Mar 2014, 12:18 PM
Can you please provide me a sample code.

LesJ
14 Mar 2014, 12:33 PM
Here's a code fragment of the container class. You can programmatically style this newly added element.


...
afterRender: function () {
this.callParent();
this.el.createChild({
style: 'position:absolute;',
tag: 'div',
html: 'Student Details'
});
}
...

bacha
14 Mar 2014, 1:57 PM
I tried adding this into the panel. But, it is not rendering. Can you please review and let me know if I am doing anything wrong

StudentsPanel.js


Ext.define('JBHunt.view.editor.StudentsPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.studentspanel',
border : 1,
style : {
borderColor : 'black',
borderStyle : 'dotted'
},
html : 'I am student!!',
afterRender: function () {
console.log('In the comments panel');
this.callParent();
this.el.createChild({
style: 'position:absolute;',
tag: 'div',
html: 'Student Details'
});
}
});

evant
15 Mar 2014, 2:27 AM
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.FieldSet

chramer
18 Mar 2014, 12:45 AM
No problem..


Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
url: 'save-form.php',
frame: true,
width: 550,
renderTo: Ext.getBody(),
items: [{
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
items :[{
xtype: 'textfield',
fieldLabel: 'Textfield',
value: 'Text'
}, {
xtype: 'datefield',
fieldLabel: 'Datefield',
value: new Date()
}]
}]
});

bacha
31 Mar 2014, 9:33 AM
Thank you evant for the pointer and charmer for the sample.