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'
}]
}
]
});
Related
I am on my first big ionic project and am stuck. Would someone have an idea how to dynamically hide and show buttons in an ionic popup? I need the buttons to initially be hidden, but then after something happens the buttons should show up. Any idea how to get that done?
Trying to explain further, what is required here is provide angular directives inside of the $ionicPopup buttons. eg
buttons: [{
text: 'Cancel'
}, {
text: '<b ng-disabled="user.length<1">Delete</b>',
type: 'button-crimson'
}]
But ng-disabled="user.length<1" gets trimmed when the pop-up is rendered.
If you're still looking for an answer to this...
I created a variable for my buttons array
var buttons = [{...}, {...}]
Then would assign that to the object in the popup
$ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
**buttons: buttons,**
And then would alter that array
buttons.splice(0, 1, {/*new button*/})
I haven't tested it but it might also work if you wanted to edit a title or class
buttons[0].type = 'newCssClass';
My work-around has been to put the dynamic buttons in the template of the popup rather than the buttons array. It's not ideal but it will work.
eg:
addPopup = $ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
buttons: [{
text: 'Cancel',
And then in pop-up.html you can do your usual angular ng-if/ng-hide/ng-disabled/etc stuff like normal. The downside is that those buttons wont show up along the bottom where the ones in the array go, but with some styling work you can make it still look nice.
It should be easy using $scope variables and ng-hide/ng-show
function something_happens(){
$scope.it_happened = true;
}
<button ng-show="it_happened">Qlik Me</button>
The button will only display if $scope.it_happened == true
So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'
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
}
]
} ...
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
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);
}
});