So i have the panel here with several components:
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
//Query Builder
items: [
{ xtype: 'combobox', padding: 5, fieldLabel: 'Search In', store: states, displayField: 'field1' },
{ xtype: 'button', text: 'Add', itemId: 'add_criteria' },
{ xtype: 'combobox', padding: 5, region: 'east', fieldLabel: 'Criteria 2', itemId: 'combo2', hidden: true },
...
I have a controller set up that listens for the Add button to be clicked. What I want to do is add on a combobox (and maybe also a textfield as well?) each time the user clicks the button. The comboboxes will be added to the panel going down vertically.
Any ideas?
EDIT:
I updated it for ExtJS 4.2.
I've made you a working example. http://jsfiddle.net/cmvQt/
HTML:
<div id="panel"></div>
ExtJS:
Ext.require([
'Ext.panel.*',
'Ext.form.field.*'
]);
Ext.onReady(function(){
function addComboBox(){
panel.add({xtype: 'combobox'});
}
panel = Ext.create('Ext.panel.Panel',{
xtype: 'panel',
renderTo: 'panel',
padding: 5,
height: 500,
width: '35%',
items: [{
xtype: 'button',
text: 'Add',
handler: addComboBox
}]
});
});
Related
The filefield xtype has property to hide textfield and show only button with config: buttonOnly: true.
However, although the textfield is not shown, it occupies space, and the width of that component is not the same as width of the button. So, when more buttons should be aligned in hbox layout, they are not stretched properly (Panel1).
Is it possible to somehow show only the button of filefield so that it appears as if it was a 'normal' button (Panel2)?
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel1',
items: [{
xtype: 'container',
padding: '10px 0 20px 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
defaults: {
margin: '0 5 0 0',
width: 150
},
items: [{
xtype: 'filefield',
name: 'upload',
buttonOnly: true,
buttonText: 'Upload photo',
flex: 1,
}, {
xtype: 'button',
name: 'savephoto',
text: 'Save photo',
flex: 1,
}, {
xtype: 'button',
name: 'remove',
text: 'Remove photo',
flex: 1,
}]
}, ]
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel2',
items: [{
xtype: 'container',
padding: '10px 0 20px 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
defaults: {
margin: '0 5 0 0',
width: 150
},
items: [{
xtype: 'button',
name: 'upload',
text: 'Upload photo',
flex: 1,
}, {
xtype: 'button',
name: 'savephoto',
text: 'Save photo',
flex: 1,
}, {
xtype: 'button',
name: 'remove',
text: 'Remove photo',
flex: 1,
}]
}, ]
});
}
});
You can use the 'buttonConfig' property:
{
xtype: 'filefield',
name: 'upload',
buttonOnly: true,
buttonText: 'Upload photo',
buttonConfig: {
width: '100%'
},
flex: 1,
}
I have created a tab panel using Extjs
Ext.define('tabPanel.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel',
requires: [
'tabPanel.view.MyTabPanelViewModel',
'Ext.Toolbar',
'Ext.Img'
],
viewModel: {
type: 'mytabpanel'
},
activeItem: 1,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: '',
layout: {
type: 'hbox',
align: 'start',
pack: 'center'
},
items: [
{
xtype: 'image',
height: 78,
width: 101,
src: 'https://www.gravatar.com/avatar/46c7c14743be3064db03681e16e55fd3?s=48&d=identicon&r=PG&f=1'
}
]
},
{
xtype: 'container',
title: 'Tab 1'
},
{
xtype: 'container',
title: 'Tab 2'
},
{
xtype: 'container',
title: 'Tab 3'
}
]
});
I was trying to make the panel header as my site header. I was tried to add a logo before the tab buttons. But the alignment was not working as expected. Is it possible to set the logo in the left and the tab buttons after the logo. Is it possible?
Don't know if this is the right way, or if this is the result you are expecting, but my solution is to use tabBar config in the tabpanel to add the logo, and after the component is created I add the other tabs that I want.
tabBar: {
items: [{
xtype: 'image',
height: 78,
width: 101,
src: 'https://www.gravatar.com/avatar/46c7c14743be3064db03681e16e55fd3?s=48&d=identicon&r=PG&f=1'
}]
},
listeners: {
beforerender: function (cmp) {
cmp.insert(1, [{
xtype: 'container',
title: 'Tab 1',
}, {
xtype: 'container',
title: 'Tab 2'
}, {
xtype: 'container',
title: 'Tab 3'
}])
}
}
I had to add the other panels after the component is created because, by default, the tabbar items are added after the tabpanel items, adding them after the component is created, the logo will be on the left of the other panels
Checkout the fiddle
I already searched for this question for like more than 100 times and it´s always the same answers, but it doesn´t help me. So my question is:
How can I switch the views by click on a button in sencha touch 2?
I have 2 views:
first
Ext.define('Meet_Me.view.Menue', {
extend: 'Ext.Container',
alias: 'widget.Menue',
layot: 'card',
xtype: 'menue',
requires: [],
config: {
xtype: 'container',
layout: 'vbox',
centered: true,
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Erstellte Events anzeigen',
width: 300,
height: 100,
margin: '30 5 5 30',
id: 'button1',
},
{
xtype: 'button',
text: 'Event erstellen',
width: 300,
height: 100,
margin: '30 5 5 30',
id: 'event_erstellen_button'
}
]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Event suchen',
width: 300,
height: 100,
margin: '30 5 5 30',
id: 'event_suchen_button'
},
{
xtype: 'button',
text: 'Teilnehmende Events anzeigen',
width: 300,
height: 100,
margin: '30 5 5 30',
badgeText: 'New',
id: 'teilnehmende_events_button'
}
]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Profil',
width: 350,
height: 100,
margin: '30 5 5 30',
//centered: true,
id: 'profil_button'
}
]
}
]
}
});
The important thing here is the Button with the id: 'button1'
The second view:
Ext.define('Meet_Me.view.Login', {
extend: 'Ext.Container',
alias: 'widget.Login',
xtype: 'login',
layot: 'card',
requires: [
'Ext.Panel',
'Ext.field.Email',
'Ext.field.Password',
'Ext.Button',
'Ext.Label'
],
config: {
items: [
{
title: 'Login',
xtype: 'panel',
itemId: 'homePanel',
layout: 'fit',
items: [
{
xtype: 'panel',
itemId: 'loginPanel',
//centered: true,
//margin: '5% 30% 0% 10%',
items: [
{
items: [
{
xtype: 'emailfield',
width: '70',
label: 'Email',
placeHolder: 'email#example.com'
},
{
xtype: 'passwordfield',
width: '70',
label: 'Passwort',
placeHolder: 'min. 6 Zeichen'
},
]
},
{
xtype: 'button',
id: 'loginButton',
margin: 20,
padding: 8,
text: 'Anmelden'
},
{
xtype: 'button',
itemId: 'registerButton',
margin: 20,
padding: 8,
text: 'Registrieren'
}
]
},
{
xtype: 'panel',
hidden: true,
itemId: 'welcomePanel',
items: [
{
xtype: 'label',
//centered: true,
html: 'Welcome!',
itemId: 'welcomeLabel'
}
]
}
]
}
]
}
});
and the Controller:
Ext.define('Meet_Me.controller.Main', {
extend: 'Ext.app.Controller',
requires: [
'Meet_Me.view.Login',
'Meet_Me.view.Menue',
],
config: {
touchstarttime: 0,
control: {
'#button1': {
tap: 'btn1click'
}
}
},
btn1click: function (button, e, options) {
console.log('Button 1 was clicked');
Ext.Viewport.add({
xtype: 'Login'
});
}
});
The problem is that the Login is shown but the first view with the 4 buttons is still there. How do get the first view removed?
you can use Ext.Viewport.animateActiveItem()
If you want to use 'card' layout, setActiveItem() is change items.
See following fiddle.
https://fiddle.sencha.com/#fiddle/16hu
I am creating a sample in Extjs and face a issue by default all the element are align from right.
My code for this
Ext.define('DemoApp.view.main.Main', {
extend: 'Ext.container.Container',
plugins: 'viewport',
fullscreen: true,
requires: [
'DemoApp.view.main.MainController',
'DemoApp.view.main.MainModel',
'Ext.menu.',
'Ext.rtl.'
],
rtl: true,
xtype: 'app-main',
controller: 'main',
items:[{
xtype: 'toolbar',
items:[{
xtype: 'button',
text: 'Home',
margin: '0,0,0,0',
height: '80'
},{
xtype: 'button',
text: 'Resellers',
margin: '0,0,0,0',
height: '80'
},{
xtype: 'button',
text: 'Organizations',
margin: '0,0,0,0',
},{
xtype: 'button',
text: 'Groups',
margin: '0,0,0,0'
},{
xtype: 'button',
text: 'Users',
margin: '0,0,0,0'
},{
xtype: 'button',
text: 'Surveys',
margin: '0,0,0,0'
},{
xtype: 'button',
text: 'Alerts',
margin: '0,0,0,0'
},{
xtype: 'button',
text: 'Settings',
margin: '0,0,0,0'
}]
}]
});
same problem in all of my view.
In login view error messages is showing in right corner where as textfield is in left corner.
I am unable to find out the cause by it is?
I have the following container with a combobox and textField (I also have an add function to dynamically add pairs of combo/textfields):
{ xtype: 'container', layout: 'hbox', style: {margin: '0px 0px 0px 330px'},
items: [
{ xtype: 'combobox', padding: 5, id: 'criteria_1_dropdown', store: filters},
{ xtype: 'textfield', padding: 5, id: 'criteria_1_input', width: 145}
]
}
And button:
{ xtype: 'button', id: 'clear_criteria', iconCls: 'clear' }
What I want to do is enable the Clear button to clear any and all combo/textField components on click, I don't believe it needs it's own controller to achieve this. Any ideas?
I solved the issue by putting my form into a variable and resetting that form with the reset() function:
{ xtype: 'button', id: 'clear_criteria', iconCls: 'clear',
handler: function() {
var hi = Ext.getCmp('contain');
hi.getForm().reset();
console.log('Cleared Search');
}
}