I've created a viewport with border layout and i was trying to have a 'Panels' accordion side bar in the west region, as below
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [{
xtype : 'panel',
region : 'west',
title : 'Panels',
layout : {
type : 'accordion'
},
items : [
{
title : 'Item 1',
html : 'Content 1'
},
{
title: 'Item 2',
html: 'Content 2'
}
]
}
]
});
This does not work as ExtJS is giving me a 'Layout run failed' message. Either one of the two options below solves the problem but it's not what I want:
Remove title config for the accordion panel.
Add a width config to the accordion panel.
Is there any way to set the title without setting width?
'Border' layouts must have a 'center' region. This should work when you add a center region to your parent border layout.
Related
I am trying the center the title of the echarts component by setting
title:{
text: "My Title",
textStyle:{
align: "center"
}
}
But it is not working.
I have referred the official document(https://echarts.apache.org/option.html#title.textStyle.align) on this.
JSFiddle link : http://jsfiddle.net/jeffersonswartz/y8zs5coq/5/
Thanks.
That should be title.left = 'center' instead of title.textStyle.align. Help you updated at http://jsfiddle.net/ovilia/06u9xpj4/ .
title.textStyle.align is used to align the text within the position. For example, if you set title.textStyle.width and title.textStyle.align, they can work together.
This also works great:
title : {
text:"foo",
subtext:"bar",
x:'center'
}
You have to set title.left property to center:
title: {
text: 'My Title',
left: 'center',
},
JSFiddle link: http://jsfiddle.net/xguL0vrk/
Also tested with ECharts 5.0.1
I have a requirement to disable/remove "Bold" option of out of box component "text" in CQ5?
Is it possible?
Yes.
The rich text editor can be configured based on your requirements as mentioned here.
Thus, for your requirement, create an nt:unstructured node "rtePlugins" under your richtext widget, and then create another nt:unstructured node "format" under rtePlugins and add the multivalued property called "features" with values as per your requirements i.e., italic and underline.
The json for the same is shown below,
text: { xtype: "richtext", name: "./text", hideLabel: true,
jcr:primaryType: "cq:Widget",
rtePlugins: {
jcr:primaryType: "nt:unstructured",
format: {
features: [ "italic", "underline" ],
jcr:primaryType: "nt:unstructured"
}
}
},
I have implemented a sencha touch phone gap application on ipad.
using the kitchen sink application and its files.
It shows all the demo objects (list user interface buttons etc etc).
I need to add a split view as home page as per our application requirement on sencha touch appp.
And when i execute the application it displays title as "Kitchen sink" how should rename it as my application name
In the kitchen sink app, there are two folders phone and tablet, each for specific devices.
In each of these folders, there's a file called Main.js which is the starting file of your application.
Hence, in that Main.js, change the title here ...
{
id: 'mainNavigationBar',
xtype : 'titlebar',
docked: 'top',
title : 'My Title',
items: {
xtype : 'button',
.....
.....
EDIT :
For your Split-view need, you can use hbox layout.
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'TableView/Rootview goes here ...',
flex: 1
},
{
xtype: 'panel',
html: 'Message Detail view goes here ....',
flex: 2
}
]
});
I would like to split a form across several tab panels to avoid a (very) long form (forcing the user to scroll quite a lot to fill every field).
For the moment, I use fieldsets to group fields, but I would like to put the respective fields in separate tabs.
Is there a way to do that ?
Thanks
Actually, it is simply possible to add a 'tabpanel' inside the 'formpanel', and the fields values will still be accessible (when using getValues() or submit())...
Simple enough ;)
Yes, Create a tab panel and put each respective field(s) in its own tab
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Tab1',
html: 'Tab 1',
items:[{
xtype:'textfield',
fieldLabel:'Name'
}]
},
{
title: 'Tab2',
html: 'Tab 2',
items:[{
xtype:'textfield',
fieldLabel:'Date'
}]
}
]
});
Let's say I have multiple nested panels (plain ones, not form.Panel) containing form fields.
The user can copy such a panel and its fields to a different panel.
I somehow need to add those newly created fields to a main formpanel so they get submitted, but don't know how.
I can't do
formpanel.add(fields)
because then they're rendered to the formpanel's body and not the panel they were in in the first place. Setting the fields' renderTo property doesn't help either.
So basically I need a way of adding a field to a normal panel (or any other component for that matter), but also adding it to a specific formpanel so its values are submitted on form submit.
Has anyone done this or could at least point me in the right direction?
You can wrap all your panels inside one form panel and all the fields inside will be submitted. I did this way with accordeons, tabpanel and normal panels deeply nested inside each other. Example:
var form = Ext.create('Ext.form.Panel', {
// form attributes goes here...
// ...
initComponent: function(){
// all your panels goes here.
this.items = [
{
xtype:'panel',
title: 'First panel',
layout: 'anchor',
frame: true,
defaults: {anchor: '100%'},
items: [
{xtype:'textfield', name: 'foo',fieldLabel: 'Foo'},
{xtype:'textfield', name: 'foo',fieldLabel: 'Bar'}
]
},
{
xtype:'panel',
title: 'Second panel',
layout: 'anchor',
frame: true,
defaults: {anchor: '100%'},
items: [
{xtype:'textfield', name: 'baz',fieldLabel: 'Baz'},
{
xtype: 'panel',
items: [/* another set of fields */]
}
]
},
];
this.buttons = [/* ... your buttons here ...*/];
this.callParent(arguments);
}
});