I am trying to display a search-form and grid in EXT-JS application. I am trying this:
items: [
{
title: 'myTab',
xtype: 'myform',
xtype:'mygrid',
flex:1
}
]
My Problem: When I comment out
xtype: 'mygrid'
I can see the search form. When I uncomment the line, grid overlaps the form. how can I solve this problem?
UPDATE: I see that I need to use vbox layout. I a m trying it in various ways, but unable to figure out where it should be placed.
You're mixing arrays (i.e. [...]), and objects (i.e. {...}).
The items option in Ext containers must be an array of objects. Objects in there can be raw configuration object or instantiated components.
So the syntax you must use looks like the following:
items: [
{
title: 'myTab',
xtype: 'myform'
},{
title: "Grid Tab",
xtype:'mygrid'
}
]
See, this is similar to an array of integers like [1,2,3] except that elements are objects {...} instead of numbers.
I figured it out. This is how I added layout to the code:
items: Ext.create('Ext.tab.Panel', {
activeTab: 0,
layout : { // This is how to save the form from being overlapped by the
//grid panel.
type: 'vbox',
align: 'fit'
},
items: [
{
title: 'Single-Activity Resource',
items : [
{
xtype:'myform'
},
{
xtype:'mygrid',
flex: 1
}
]
} ...
Related
i want to write a flutter app that is completely dynamic. That means that I can define how the app should look on the server. Whether you should have a top area that I can fill dynamically with widgets. Does anyone have an idea how this can best be implemented in flutter?
An example for a server response would be:
{
area: top,
columns: 3
rows: 5,
items: [
position: {
row: 2
column: 3
}
type: button,
event: event
]
}, {
area: left,
width: 20%,
rows: 5,
items: [
.....
]
}
That is only an idea how the response could look like.
Sounds like you're heading for something disparagingly called the "inner system" effect, where you want to write code that interprets data as if it were more code. Please don't.
enter image description here
As shown in the figure above, I need to remove the circle in the middle of the third icon, but keep the shape of the other two charts rectangular.But when I set legend.icon = 'line', the shape of the other two icons changed.What should I do?
Nobody in the world knows that you did wrong because no one has seen your code but legend supports separate icons for each series.
var option = {
//...
legend: {
data: [
{ name: 'Series1', icon: 'circle' },
{ name: 'Series2', icon: 'triangle' },
{ name: 'Series3', icon: 'diamond' },
]
}
//...
}
When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this
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);
}
});