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');
}
}
Related
I have an Action Column using clickable Icons from Font Awesome. My only problem is the icons are too close and the padding config is not working. Does anyone have a solution?
{
header:'Actions',
dataIndex: 'id',
xtype:'actioncolumn',
focusableContainer: true,
flex: 0.55,
align: 'center',
items: [{
iconCls:'fas fa-pen',
ariaLabel:'Edit Feedback',
ariaLabelledBy:'Edit Feedback',
tooltip: 'Edit',
handler:'onEdit'
},
{
id: Ext7.id() + '_delete',
itemId: Ext7.id() + '_delete',
ariaLabel:'Delete Feedback',
ariaLabelledBy:'Delete Feedback',
iconCls: 'fas fa-trash',
tooltip: 'Delete',
handler: 'onDelete'
}
]
}
You could add custom css class.
.custom-padding {
padding: 15px;
}
and next add to your items.
{
xtype: 'actioncolumn',
width: 70,
items: [{
iconCls: 'x-fa fa-cog custom-padding',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}, {
iconCls: 'x-fa fa-times custom-padding',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
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 have used the ExtJS properties of cls, bodyCls, componentCls but not getting the result.
For an example:
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyPadding: 10,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});
Now CSS:
.form {
background-color:orange !important;
}
I wanted to get background color orange but I am not getting the result what I want.
ANY HELP WOULD BE GREAT APPRECIATED
You need to apply class like below (need to apply background to the body of form):
.form .x-panel-body-default {
background-color:orange !important;
}
Working Fiddle
Hope this will help/guide you.
You can add css like this to Panel config,
Like bodyStyle: 'background: orange !important', in your panel
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyStyle: 'background: orange !important',
bodyPadding: 10,
defaultType: 'textfield',
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
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
}]
});
});