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 :)
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'
}
}]
}
});
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 need to create an anchored popup window containing buttons which when clicked a new view is created. Please refer to screenshot below (taken from the yelp mobile app). I have not been able to find examples of this functionality - thanks
I think that what you are looking for is really just a floating panel.
See for instance the sencha docs and their example using the showBy method.
Hope that this helps you.
I don't knw how to create an anchored popup window but you can try implementing Action Sheet in Sencha Touch-2. It is not anchored but it can contains buttons on which you can provide functionality.
This issue can be resolve by calling a panel inside a container.
//Add container1.js in view
Ext.define('Sencha.view.container1', {
extend: 'Ext.Container',
alias: 'widget.container1',
xtype: 'container1',
//fullscreen: true,
config: {
scrollable: true,
height: 50,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
{
xtype: 'button',
ui: 'confirm',
text: 'Back',
itemId: 'button113',
id: 'rightButton',
handler: function () {
var sh = Ext.create('Sencha.view.panel1', {
extend: 'Ext.Panel',
fullscreen:true,
});
sh.show();
}
}
]
}
]
}
});
//Add panel1.js also in View
Ext.define("Sencha.view.panel1", {
extend: "Ext.Panel",
alias: "widget.panel1",
config: {
html: 'Floating Panel',
//left: 0,
//padding: 50,
items: [
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Edit Bussiness',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Add Photo',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Add BookMark',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Check In',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Write Review',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Make Reservation',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Cancel',
handler: function() {
this.up('panel').hide();
}
},
],
listeners: [
{ hide: { fn: function(){ this.destroy();} }},
]
}
});
//App.js
Ext.application({
name: 'Sencha',
controllers: ['Main'],
views: ['container1', 'panel1'], //add all the view files here which you wants to call on any other panel so that the instance of it will be created.
stores: [],
models: [],
launch: function() {
Ext.Viewport.add({
xtype: 'container1'
});
}
});
This work for me and will give you the same output. Moreover, on cancel Button it will hide the panel Hope this will help you.
Thanks
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'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...