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?
Related
I using extjs version 7.4.
The icon is clearly visible in the example of Sencha.
https://examples.sencha.com/extjs/7.4.0/examples/kitchensink/#menu-buttons
However, icon isn't displayed in my actual code
screenshot
Is there a problem with my source? Or is it a Sencha bug?
--- source ---
Ext.define('test.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
toggleDisabled: function(checkbox, checked) {
var view = this.getView(),
stateFn = checked ? 'disable' : 'enable',
buttons = view.query('button');
Ext.each(buttons, function(btn) {
btn[stateFn]();
});
}
});
Ext.define('test.view.main.Main', {
extend: 'Ext.Container',
xtype: 'menu-buttons',
controller: 'main',
layout: 'vbox',
width: 470,
items: [{
xtype: 'checkbox',
boxLabel: 'Disabled',
margin: '0 0 0 10',
listeners: {
change: 'toggleDisabled'
}
}, {
xtype: 'container',
layout: {
type: 'table',
columns: 4,
tdAttrs: { style: 'padding: 5px 10px;' }
},
defaults: {
menu: [{
text: 'Menu Item 1'
}, {
text: 'Menu Item 2'
}, {
text: 'Menu Item 3'
}]
},
items: [{
xtype: 'component',
html: 'Text Only'
}, {
xtype: 'button',
text: 'Small'
}, {
xtype: 'button',
text: 'Medium',
scale: 'medium'
}, {
xtype: 'button',
text: 'Large',
scale: 'large'
}, {
xtype: 'component',
html: 'Icon Only'
}, {
iconCls: 'button-home-small',
xtype: 'button'
}, {
xtype: 'button',
iconCls: 'button-home-medium',
scale: 'medium'
}, {
xtype: 'button',
iconCls: 'button-home-large',
scale: 'large'
}, {
xtype: 'component',
html: 'Icon and Text (left)'
}, {
xtype: 'button',
iconCls: 'button-home-small',
text: 'Small'
}, {
xtype: 'button',
iconCls: 'button-home-medium',
text: 'Medium',
scale: 'medium'
}, {
xtype: 'button',
iconCls: 'button-home-large',
text: 'Large',
scale: 'large'
}, {
xtype: 'component',
html: 'Icon and Text (top)'
}, {
xtype: 'button',
iconCls: 'button-home-small',
text: 'Small',
iconAlign: 'top'
}, {
xtype: 'button',
iconCls: 'button-home-medium',
text: 'Medium',
scale: 'medium',
iconAlign: 'top'
}, {
xtype: 'button',
iconCls: 'button-home-large',
text: 'Large',
scale: 'large',
iconAlign: 'top'
}, {
xtype: 'component',
html: 'Icon and Text (right)'
}, {
xtype: 'button',
iconCls: 'button-home-small',
text: 'Small',
iconAlign: 'right'
}, {
xtype: 'button',
iconCls: 'button-home-medium',
text: 'Medium',
scale: 'medium',
iconAlign: 'right'
}, {
xtype: 'button',
iconCls: 'button-home-large',
text: 'Large',
scale: 'large',
iconAlign: 'right'
}, {
xtype: 'component',
html: 'Icon and Text (bottom)'
}, {
xtype: 'button',
iconCls: 'button-home-small',
text: 'Small',
iconAlign: 'bottom'
}, {
xtype: 'button',
iconCls: 'button-home-medium',
text: 'Medium',
scale: 'medium',
iconAlign: 'bottom'
}, {
xtype: 'button',
iconCls: 'button-home-large',
text: 'Large',
scale: 'large',
iconAlign: 'bottom'
}]
}]
});
I've been looking into it for days, but I can't find a solution.
Thank you for your help.
I guess you missed to define the classes like here:
As an alternative you can try to set the icon like that:
iconCls:'x-fa fa-home'
Which prefix you will need depends on your FontAwesome version.
Following this approach you might need additional classes to scale the icon. But i am not sure.
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 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
}]
});
});
I have a layout with some content and a list. I have tried various ST2 layouts for the containing element but I cannot get the list to display at all. There is data and I have verified this by forcing the height of the list via developer console. Here's the config code for my view:
config: {
scrollable: {
direction: 'vertical',
directionLock: true
},
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
layout: 'vbox',
cls: 'retailer-detail-container',
items: [
{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'img',
cls: 'offerDetailImg',
itemId: 'retailer-detail-image'
},
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'panel',
cls: 'offer-detail-name',
itemId: 'retailer-detail-name'
},
{
xtype: 'panel',
cls: 'offer-detail-distance',
itemId: 'retailer-detail-distance'
}
]
},
{
xtype: 'container',
cls: 'offer-detail-actions',
layout: 'hbox',
items: [
{
xtype: 'button',
cls: 'retailer-detail-contact-button',
itemId: 'retailer-detail-contact-button'
},
{
xtype: 'button',
cls: 'retailer-detail-map-button',
itemId: 'retailer-detail-map-button'
}
]
}
]
}
]
},
{
xtype: 'container',
cls: 'offer-detail-description',
itemId: 'retailer-detail-description'
}
]
},
{
xtype: 'list',
itemId: 'retailerOffersList',
scrollable: 'true',
ui: 'round',
itemTpl: '<strong>{offer_title}</strong>',
onItemDisclosure: true
}
]
}
There are a few questions on SO about this already, have you tried some of their answers? My first suggestion would be to play with the layout property of the immediate parent of the list:
layout:'fit'
Sencha Touch 2: List does not display in Panel
Sencha Touch 2 - Can't get list to display // or load a store? [UPDATED X2]