The development of the mobile terminal landing interface, the runtime found that the text input box display abnormal. If you put the code in toolbar to show no problem, the house ah formPanel shows weird, the effect is as follows
enter image description here
mycode：
Ext.define('GasApp.view.main.login.Login',{
extend : 'Ext.form.Panel',
xtype : 'loginView',
requires: [
'Ext.field.Password',
'Ext.Button',
'Ext.field.Toggle',
'Ext.layout.HBox',
'Ext.Toast',
'GasApp.view.main.login.Controller'
],
alternateClassName: 'loginView',
controller : 'loginCtrl',
listeners: {
initialize: 'onLoginInitialize'
},
config:{
padding: '40 30 0 30',
items: [{
xtype: 'textfield',
name: 'account',
ui : 'text_',
label: '账号',
clearIcon:true,
required: true
},{
xtype: 'passwordfield',
name: 'password',
label: '密码',
required: true
},{
items: [{
xtype: 'togglefield',
name: 'persist',
label: '记住我',
labelTextAlign: 'right',
labelAlign: 'left',
value: true
}]
},{
xtype: 'button',
width: '100%',
text: '登 陆',
ui: 'action',
listeners: {
tap: 'onLoginClick'
}
}]
}
});
Related
I am new in sencha touch. I make a login page in there some override controls issue.
Here is my code.
Ext.define('RaceNote.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label'],
config: {
title: 'Login',
scrollable: 'false',
layout: 'vbox',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
}, {
xtype: 'fieldset',
title: 'Login Example',
items: [{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}, {
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}]
}, {
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In',
listeners: [{
delegate: '#logInButton',
event: 'tap',
fn: 'onLogInButtonTap'
}]
}]
}
});
and it s looking below.
Based on your comments, I'd say you are having the recent issue found with ST 2.2.1 and Chrome 29. See my answer regarding this here: Sencha Touch 2 App FieldSet not rendering
I want signature popup in my application.
'https://market.sencha.com/extensions/signature-pad-field'
This works for me but It opens one panel then on click on that panel it opens signature popup.
But I directly want to open Signature popup.
Please guide me. Thanks in advance.
By using below code as your "/signaturefield/app/view/Signature.js", you can achieve this:
Ext.define('myApp.view.Signature', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet'
],
config: {
layout: 'card',
items: [{
xtype: 'formpanel',
padding: '10 10 10 10',
items: [{
xtype: 'fieldset',
hidden: true,
items: [{
xtype: 'signaturefield',
id: 'signatureField',
sigWidth: 350,
sigHeight: 150,
label:'Enter Signature',
labelWidth: '20%'
}]
},{
xtype: 'button',
text: 'Get Data',
margin:'0 0 10 0',
action: 'getSignature'
},{
xtype: 'button',
text: 'Set Data',
action: 'setSignature'
}]
}]
},
initialize: function() {
this.callParent();
Ext.getCmp('signatureField').openCanvasSheet();
}
});
Hope this will be helpful :)
i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it
here is my code
Ext.define('test.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Label'
],
config: {
items: [
{
docked: 'top',
title: 'Test',
ui: 'dark',
xtype: 'titlebar'
},
{
xtype:'panel',
style:'padding:10%',
items:[ {
xtype: 'label',
html: 'User Name/Mobile Number',
},
{
xtype: 'textfield',
},{
xtype: 'label',
html: 'Password'
},{
xtype: 'textfield',
},{
xtype:'button',
text:'Login'
}]
}
]
}
});
Use the margin property to get the space between fields:
{
xtype:'panel',
defaults: {
margin: '20 0'
},
items: [
{
xtype: 'label',
html: 'User Name/Mobile Number'
},
....
I want to create a custom toolbar using sencha touch. Using Ext.Toolbar, i am able to create a decent screen titlebar. But my requirement is to place my company brand image logo in the center of the title bar not the simple text as provided by the code below.
{
xtype : 'toolbar',
docked: 'top',
title: 'My Toolbar'
}
can anyone help me how to do this ?
Try this
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'image',
width:218,
height:44,
src:'http://cdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png'
}
]
}
You can add the image in your toolbar by using the title attribute. Here is some modified code from one of my apps doing just this. Also, by defining a custom class you can assign a custom xtype and reuse the main toolbar... Either way the code should have what you are looking for:
Ext.define('myApp.view.Maintoolbar', {
extend: 'Ext.Toolbar',
xtype: 'maintoolbar',
requires: [
//any necessary requirements
],
config: {
docked: 'top',
title: '<div style="text-align:center;"><img src="images/logoSmall.png" width="185" height="36" alt="Company Name"></div>',
padding: '5 5 5 5',
items: [{
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
//left: true,
text: 'Menu',
action: 'openmenu'
},{
xtype: 'spacer'
},{
xtype: 'button',
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
align: 'right',
text: 'Logout',
action: 'logout'
}]
},
initialize: function() {
this.callParent();
}
});
I am new to extjs 4.0 and trying to make a hbox layout containing a list and a form,but the form is not displaying properly, only labels are visible but textfield is not visible,please rectify the code
Ext.define("Screener.view.PharmacyView", {
extend: 'Ext.Container',
requires : [ 'Screener.view.Pharmacyform' ],
xtype: 'pharmacylist',
config: {
fullscreen: true,
layout: 'hbox',
title: 'Patient Assignments',
items: [
//our patient list is built on the Patients store, and has a title and sort button
{
xtype: 'list',
id: 'patientList',
itemTpl: '{lastname}, {firstname}',
store: Ext.create('Screener.store.Patients',{
storeId: 'patientStore'
}),
items:[{
xtype: 'titlebar',
docked: 'top',
title: 'Patients',
items:[{
xtype: 'button',
text: 'Sort',
id: 'sortButton',
align: 'left'
}]
}],
flex:1,
},
{xtype : 'pharmacyform',
flex:2
}
]
}
});
and the form is as follows
Ext.define("Screener.view.Pharmacyform", {
xtype:'pharmacyform', extend: 'Ext.form.Panel', config:{ items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name', placeholder: 'nametext'
},
]} });
You need to use the alias config to declare your own xtypes I believe, try this
Ext.define("Screener.view.Pharmacyform", {
extend: 'Ext.form.Panel',
alias:'widget.pharmacyform',