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
Related
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'
}
}]
}
});
Below is my view. how can I make my menu scroll separate and my view scroll separate
Ext.define('HaBoMobile.view.AboutView', {
extend: 'Ext.Container',
xtype: 'aboutViewType',
html: 'Learn more about me',
styleHtmlContent: true,
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
config: {
fullscreen: true,
items: [{
docked: 'top',
xtype: 'titlebar',
items: [{
text: 'Menu',
action: 'nav',
iconCls: 'list'
}]
}]
}
});
I tried all these settings, none worked
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
here is a Sencha fiddle
Just try with scrollable: true, like this:-
var menu = Ext.create('Ext.Menu', {
scrollable: true, // add this property
width: 200, // Need to set a width
items: [{
text: 'Close',
ui: 'decline'
}, {
text: 'Home',
action: 'nav_option',
iconCls: 'home'
}, {
text: 'Settings',
action: 'nav_option',
iconCls: 'settings'
}]
});
Containers:-
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
xtype: 'mainview',
config: {
scrollable: true,
html: 'Main page',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Main',
items: [{
text: 'Nav',
action: 'nav'
}]
}]
}
});
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 new for sencha touch. Please see code at below
view.js
Ext.define("blackbutton.view.Setup.UserProfile", {
requires: [
'Ext.form.*',
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.Spinner',
'Ext.field.Password',
'Ext.field.Email',
'Ext.field.Url',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden',
'Ext.field.Radio',
'Ext.field.Slider',
'Ext.field.Toggle'
],
extend: 'Ext.form.Panel',
xtype: 'SetupUserProfile',
id: 'SetupUserProfile',
config: {
//floating: true,
//centered: true,
cls: 'bb-popupForm',
modal: true,
width: "100%",
layout: 'fit',
height: "100%",
styleHtmlContent: true,
//title: 'Black Button',
//iconCls: 'black',
scrollable: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Profile',
items: [{
xtype: 'button',
iconMask: true,
iconCls: 'reply',
//text: 'Back',
handler: function () {
//Code here??
}
}]
},
{
xtype: 'panel',
layout: 'vbox',
scrollable: true,
items: [{
xtype: 'fieldset',
id:'SetupUserProfileFS',
title: 'Personal Info',
instructions: 'Please enter the information above',
defaults: {
labelWidth: '35%',
required: true
},
items: [
{
xtype: 'textfield',
id: 'BB_ID',
name: 'BB_ID',
label: 'BB ID',
},
{
xtype: 'emailfield',
id: 'email',
name: 'email',
label: 'Email',
placeHolder: 'me#email.com',
}, {
xtype: 'textfield',
id: 'fullName',
name: 'fullName',
label: 'Full Name',
placeHolder: 'John',
}, {
xtype: 'numberfield',
id: 'mobilePhone',
name: 'mobilePhone',
label: 'Mobile Phone',
placeHolder: '012567890',
},
{
xtype: 'textfield',
id: 'DOB',
name: 'DOB',
label: 'Date of birth',
placeHolder: '30/03/1988',
},
{
xtype: 'textfield',
id: 'mailingAddress',
name: 'mailingAddress',
label: 'Mailing Address',
placeHolder: 'No 11, Jalan taman desa, 54100 KL',
}
]
},
}]
}]
}]
}
});
I need to change fieldset value when I press Reply button. Any example? please give me solution. Thanks
In your Handler you want to dynamically set the values for you fieldset. So the handler for your button would look something like this:
...
items: [
{
xtype: 'button',
iconMask: true,
iconCls: 'reply',
handler: function () {
Ext.getCmp('BB_ID').setValue('New value for BB_ID field');
Ext.getCmp('email').setValue('New value for email field');
Ext.getCmp('fullName').setValue('New value for fullName field');
Ext.getCmp('mobilePhone').setValue('New value for mobilePhone field');
Ext.getCmp('DOB').setValue('New value for DOB field');
Ext.getCmp('mailingAddress').setValue('New value for mailingAddress field');
}
}
]
...
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',