One of my new project i need to show 5 graph in a page. But at the same time i need to display only 2 item. So i use Card layout. But it only allow me to set only one item as an active item. Is it possible to set more than one active item.
Card layout will only display one of its children at a time. You should probably use another layout that arranges your charts as you want (for example vbox layout), and show/hide them selectively.
Another option would be to nest your charts into containers, themselves in the card layout, but that won't give you the possibility to display any combination of chart... But only the ones you've put together in a container.
You containers would be configured something like this:
Ext.widget('container', {
layout: 'card'
,items: [{
xtype: 'container'
,layout: 'vbox'
,items: [{
xtype: 'myChart1'
},{
xtype: 'myChart2'
}]
},{
xtype: 'container'
,layout: 'vbox'
,items: [{
xtype: 'myChart3'
},{
xtype: 'myChart4'
}]
},{
xtype: 'myChart5'
}]
});
Related
Sencha documentation says:
If docked items, the weight will order how the items are laid out. Here is an example to put a Ext.toolbar.Toolbar above a Ext.panel.Panel's header ...
I now want to show a container below the buttons config. So I have made a simple fiddle to apply the knowledge of the docs:
https://fiddle.sencha.com/#view/editor&fiddle/26m0
But it doesn't work; the weight is not applied whether I use a big or a small number. Why isn't this working?
The dock config for your container does not have any impact. From the docs:
The side of the Ext.panel.Panel where this component is to be docked
when specified in the panel's dockedItems config.
Your container is not inside a dockedItems config. Also it seems that the bigger the weight, the more higher the item will be rendered.
Ext.create('Ext.window.Window',{
width:300,
items:[{
xtype:'container',
html: 'Normal text'
}],
dockedItems: {
xtype: 'container',
dock: 'bottom',
weight: -10,
html: 'Some text that goes below the buttons'
},
buttons:[{
text: 'Some button',
weight: 10
}]
}).show();
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26m8
I upgraded a Sencha ExtJs project from version 4.1.1 to the new released version 5.0.1 and now get
the error "[E] Layout run failed" in the webdev console.
In the older version everything works as expected.
The error message comes from the column layout, used in a container nested in the two filsets.
When I exchange the layout to e.g. vbox then no error occurs.
What is wrong in the following code which lets the layout run fail and how to fix it.
Thank's for every hints, tips or solutions.
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8ov
Ext.onReady(function() {
Ext.create('Ext.form.FieldSet', {
title: 'Grouping Fieldset',
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'fieldset',
title: 'Fieldset - 1',
layout: 'anchor',
width: '100%',
items: [
{
xtype: 'textfield'
},
/*...more input fields...*/
{
xtype: 'container',
layout: 'column',
width: '100%',
items: [
{
xtype: 'textfield',
width: 25
},
{
xtype: 'textfield',
width: 50
},
{
xtype: 'textfield'
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Fieldset - 2',
layout: 'anchor',
items: [
{
xtype: 'textfield'
}
/*...more input fields...*/
]
}
]
});
});
The stack trace using Ext.Loader:
log Util.js:704
logx Util.js:744
Ext.apply.log.log.error Util.js:748
Ext.define.handleFailure Context.js:597
Ext.define.runComplete Context.js:1129
callOverrideParent Ext.js:58
Ext.Base.Base.addMembers.callParent Base.js:1256
Ext.override.runComplete Component.js:174
Ext.define.run Context.js:1120
Ext.define.statics.flushLayouts Component.js:182
Ext.define.statics.resumeLayouts Component.js:198
Ext.resumeLayouts Component.js:5948
Ext.define.render Renderable.js:685
Ext.define.constructor Component.js:1743
constructor Class.js:29
(anonymous function) VM1725:3
Ext.ClassManager.Ext.apply.create ClassManager.js:1413
Ext.define.launch Application.js:10
Ext.define.onBeforeLaunch Application.js:407
Ext.define.constructor Application.js:325
constructor Class.js:29
(anonymous function) Application.js:23
Ext.env.Ready.invoke Ready.js:271
Ext.env.Ready.invokeAll Ready.js:313
Ext.env.Ready.unblock Ready.js:445
Ext.apply.triggerReady Loader.js:761
Ext.apply.checkReady Loader.js:906
Ext.apply.load Loader.js:592
Ext.apply.require Loader.js:477
Ext.apply.triggerReady Loader.js:733
Ext.apply.checkReady Loader.js:906
Ext.apply.onLoadSuccess Loader.js:649
Ext.Boot.Request.notify bootstrap.js:904
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Request.loadEntries bootstrap.js:856
Ext.Boot.Boot.processRequest bootstrap.js:451
Ext.Boot.Boot.load bootstrap.js:472
Ext.Boot.Boot.requestComplete bootstrap.js:507
Ext.Boot.Request.notify bootstrap.js:908
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Entry.notifyRequests bootstrap.js:1328
me.fetch.complete bootstrap.js:1242
readyStateChange
Update
When I put every textfield in an own container the layout error is gone and the gui is
acting like expected.
But this is only a workaround...
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8re
//...items of secound fieldset
{
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'container',
items: [
{
xtype: 'textfield',
width: 50
}
]
},
{
xtype: 'container',
items: [
// ...nesting next textfield in container
Layout run failures often happen when you have an inner container (e.g., your "column" layout) with a stretched width INSIDE a parent container (e.g. your "anchor" layout) with a stretched width.
In short, the framework can't appropriately size things because it's all stretched. It could be your anchor layout, the column layout, or one of the other stretched things in there. This is commonly known as "over-nesting".
The top-level container in your code appears to be a fieldset - inside of which you have another fieldset (etc), and both have anchor layouts. More than likely you want to be using "hbox" or "vbox" layouts.
I faced the same problem with the column layout. After some hours of search I discovered that I should define the columnWidth for each component that is placed in the container that has the column layout.
It worked for me.
I have just rechecked the docs for column layout where they say:
ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of columnWidth that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
For me it works only with columnWidth config. (I am using buttons instead of panels in the column container)
Here, the Sencha team explains how to have a one to many relationship:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store
And you get more in detail here:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
where they explain that
"This may be a lot to take in - basically a User has many Orders, each
of which is composed of several OrderItems. Finally, each OrderItem
has a single Product."
Nice.
Now I want to have a Form where there's the user information PLUS a grid of the user's orders (not the MVC framework, just a a derived class of form.Panel).
How can I do this? Here's the beginning of my form.Panel class, where there are only fields. I just want to add to it a datagrid that is linked with Product.
So I create my store, like in the example, Sencha gave, then I create a grid that is linked to a MyFramework.form.Panel, and everything works fine. I just want to make something like a "nested table", a one to many grid in that class, to display the products that belong to the current user.
Any idea how to do this?
Ext.define('MyFramework.form.Panel', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
iconCls: 'icon-user',
frame: true,
title: 'User',
defaultType: 'textfield',
bodyPadding: 5,
fieldDefaults: {
anchor: '100%',
width: 500,
labelWidth: 200,
labelAlign: 'right'
},
items: [{
xtype:'tabpanel',
activeTab: 0,
defaults:{
layout: 'fit',
bodyStyle:'padding:10px'
},
items:[{
title:'General information',
defaultType: 'textfield',
items: [{
fieldLabel: 'Titre ',
name: 'titre',
allowBlank: false
},{
fieldLabel: 'Image grande ',
name: 'imgGrande'
}]
},{
title:'Products',
defaultType: 'textfield',
items: [
/*
* Advices/example here!
* I'm stuck!
*/
]
}]
}]
});
this.callParent();
}
});
You can work with the concept of Dynamic Form interacting with an embbed grid.
Of course that doesn't suit your needs right away. My advice, though, is to start from there and try to implement a field that will be related to an embbed grid, in your case a grid of products.
With that said, you wouldn't have a form that is filled by the embbed grid selection, but a single field that gets filled like a ComboBox, but by the grid selection.
Maybe try the Ext.form.LookUp field, a component that I've created that is kinda related to that problem.
This component is not exactly what you are looking for, since it works with single records, like with one to one relationships. But you can try to implement something from there.
I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items
How does one add two buttons in same row of a panel? (I'm new to extjs.)
If by "add", you mean passing them to the constructor, just use an array in the buttons config:
buttons: [{
text: 'foo'
}, {
text: 'bar'
}]
There's tons of examples on http://www.sencha.com/products/extjs/examples/
On the other hand, if you want to add buttons to an existing panel, you must actually add them to the panel's bottom toolbar (bottomTb) bar like so:
myPanel.bottomTb.add({xtype: 'button', text: 'foo'}, {xtype: 'button', text: 'bar'});
Note that xtype defaults to 'button' and thus may be omitted
You would use an Ext.Toolbar or container with an "hbox" layout.
The Toolbar is a built-in component that automatically stacks up buttons and fields into a horizontal layout, but it also changes the UI so that they "dock" visually. You can see the docs to see what I mean, but it will look like a toolbar, not like two buttons next to each other.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.toolbar.Toolbar.html
To get two buttons side-by-side, say Ok and Cancel, you can use an hbox layout in 4.0.
Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
items: [
{xtype: 'button', text: 'Ok'},
{xtype: 'button', text: 'Cancel'}
]
});
Check out the documentation for hbox for alignment and stretching options.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.toolbar.Toolbar.html
In older versions you'd do something similar, but with the less flexible 'columns' layout.