I m creating a form in layout.I want to align the title in centre. example: Registration.
Here is a simple code.
{
// xtype: 'panel' implied by default
title: 'Settings',
region:'east',
xtype: 'panel',
margins: '0 0 0 0',
width: 200,
collapsible: true,
split: true, // make collapsible
id: 'egion-container',
layout: 'fit'
}
i want that title "Settings" in center
you can simply wrap title inside a div tag and do whatever you want :
{
// xtype: 'panel' implied by default
title: '<div style="text-align:center;">Settings</div>',
region:'east',
xtype: 'panel',
margins: '0 0 0 0',
width: 200,
collapsible: true,
split: true, // make collapsible
id: 'egion-container',
layout: 'fit'
}
This is covered in the docs, there's a config called titleAlign.
Related
I am a creating a floating panel B inside another panel A( render to A);
When I close panel A, panel B also closes. But panel B still remains in the zIndexManager.zIndexStack. Thus, calling that component for changing its z and thus giving setStyle null error. Any idea?
var A = Ext.create('Ext.form.Panel', {
floating: true,
alignOnScroll: false,
resizable: false,
layout: 'fit',
width: 450,
height: 400,
renderTo: B.id,
items: [another Panel],
dockedItems: [{
xtype: 'toolbar',
style: 'background:#f6f6f6',
dock: 'bottom',
layout: {
pack: 'center',
type: 'hbox'
},
items: [{
xtype: 'button',
ui: 'header',
tooltip: 'Submit',
iconCls: 'x-fa fa-check',
scope: this
},
{
xtype: 'button',
ui: 'header',
tooltip: 'Close',
iconCls: 'x-fa fa-remove',
scope: this,
}
]
}]
});
A.showBy(this.lookupReference('abcd'), 'tl-tr?');
Following error I get after closing the parent panel and reopening
Uncaught TypeError: Cannot read property 'style' of null
at constructor.setStyle (ext-all-rtl-debug.js?_dc=20170112151748:37862)
at constructor.setZIndex (ext-all-rtl-debug.js?_dc=20170112151748:38103)
at constructor.setZIndex (ext-all-rtl-debug.js?_dc=20170112151748:59257)
at constructor.onCollectionSort (ext-all-rtl-debug.js?_dc=20170112151748:124552)
at constructor.notify (ext-all-rtl-debug.js?_dc=20170112151748:72945)
at constructor.sortItems (ext-all-rtl-debug.js?_dc=20170112151748:73214)
at constructor.onSortChange (ext-all-rtl-debug.js?_dc=20170112151748:73123)
at constructor.onEndUpdateSorters (ext-all-rtl-debug.js?_dc=20170112151748:73329)
at constructor.fire (ext-all-rtl-debug.js?_dc=20170112151748:20226)
at constructor.doFireEvent (ext-all-rtl-debug.js?_dc=20170112151748:21133)
If you manually call destroy() on the floated components, when panel A is closed, it fixes the issue.
I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?
Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
UPDATE
In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150,
header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}
}
here is the fiddle
Thanks
Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
collapseMode:'placeholder',// set collapseMode to placeholder
split: true,
width: 300,
placeholder:{ // Try different components and layout configs
width:100,
items:[{
xtype:'button',
text:'Button 1'
}]
}
/*header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}*/
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.
So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.
I tried adding buttons to the header and the result was not visually nice, but at least they were created!
So I would suggest you use tools instead of buttons if you don't need text on them.
I'm new to Ext-Js and I've gotten a html editor with some plugins from github, now I've got a button on the editor that is supposed to pop an alert box with the contents of the text area.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
fieldLabel: 'Text editor',
height: 300,
plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
anchor: '100%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
I know I'm supposed to add
handler:function(){alert(someextjscodehere)}
but I have no idea what function returns it, nor can I find it on google...
You need to use the getValue method of the editor to retrieve its content.
handler is an option of the button.
You'll need a reference to the editor in the handler, to get its content. You can get it from the form with the findField method, or with a component query.
Here's how to update your code to alert the content of the editor when clicking the save button. I've added a second save button to show you the component query method. I've tested it in this fiddle.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
name: 'htmlContent', // add a name to retrieve the field without ambiguity
fieldLabel: 'Text editor',
height: 300,
/* plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
*/ anchor: '100%'
}],
buttons: [{
text: 'Save'
,handler: function() {
var editor = top.getForm().findField('htmlContent');
alert(editor.getValue());
}
},{
text: 'Save 2'
,handler: function() {
// You can grab the editor with a component query too
var editor = top.down('htmleditor');
alert(editor.getValue());
}
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?
I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }
How I can change the individual region background color of viewport extjs 4.
Here is my code.
{
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}
Now tell me please.
You can assign a class to the body using the bodyCls config then set the background-color via css. Alternatively, you can set the bodyStyle inline to a css string:
bodyCls: 'foo'
// or
bodyStyle: 'background-color: red;'
To do it dynamically, you can set the style on the body:
myPanel.body.setStyle('background-color', 'red');