sencha-touch-2

I am trying to take a picture using camera in Sencha Touch 2. Here i have one button 'Take a Picture', when i will press it, camera should start. As i am new to this sencha touch 2, i am unable to figure it out, how to do this? For this i used the below code: Sencha Fiddle Link Please help me. I do not want to use Phone gap. You have to add device folder of Sencha Library in root directory and add below code in Ext.require('Ext.device.Camera'); and use this code for capture image using camera Ext.device.Camera.capture({ success: function(image) { imageView.setSrc(image); }, quality: 75, width:

OS: Win7 HTTP Server: Tomcat7 I am new to Sencha. Just installed latest sencha-touch-2.1.0-commercial+Sencha Cmd 3.0.0.250. Could run "sencha" command under SDK dir. Could run "sencha generate app GS ../GS" to generate a sample project. I didn't change anything from the newly generated project GS and tried to build it using command: sencha app build production But I got the following stack trace: C:\ZZ\Others\Startup\Tomcat 7.0\webapps\GS>sencha app build production Sencha Cmd v3.0.0.250 [INF] init-properties: [INF] init-sencha-command: [INF] init: [INF] -before-app-build: [INF] app-build-impl

A Sencha Touch newbie here. That said, I've been slowly getting my head around it in the last day or so. One thing that has driven me insane is formpanels and lists not showing up for some weird layout reason. I can't work out why. For instance I have the following Search view: Ext.define('NC.view.Search', { extend: 'Ext.dataview.List', xtype: 'searchpage', id: 'search-form', config: { title: 'Search', layout: 'vbox', itemTpl: '<div class="name">{name}</div>', store: 'Recipes', items: [ { xtype: 'toolbar', docked: 'top', items: [ { xtype: 'spacer' }, { xtype: 'searchfield', placeHolder:

In my sencha application, When ever app does ajax request i want to add load mask and after request complete i need to remove load mask. I tried below code but, its not working for me var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."}); Ext.Ajax.on('beforerequest', function(){ mask.show(); }); Ext.Ajax.on('requestcomplete', function(){ mask.hide(); }); To show load mask you can use: Ext.Viewport.mask({ xtype: 'loadmask' }); And hide the load mask inside the success function of your Ajax request: Ext.Viewport.unmask(); Gayathri Mohan It is very easy Try these Ext.Ajax.request({

Back Ground : I am working on an MVC application using sencha touch 2. I am working on a page which has two tabs. Inside the first tab, I have a button inside a title bar. Issue : I am not able to call anyother function from the button handler. I think, there is an issue with the scope of the calling function. Here is my code. Ext.define('WUPOC.view.WUHomePage', { extend: 'Ext.TabPanel', requires:['Ext.TitleBar','Ext.dataview.List','Ext.data.proxy.JsonP'], alias: 'widget.wuHomePageView', config: { fullscreen: true, defaults: { styleHtmlContent: true }, items: [{ title: 'Home', iconCls: 'home',

The code below only changes the color of the border around the panel but not the panel itself. var overlay = Ext.Viewport.add({ xtype: 'panel', centered: true, style:'background-color: transparent;', modal: { style: 'opacity: 0' }, hideOnMaskTap:true, width:'20%', height: '50%', styleHtmlContent:true, items:[{ xtype:'button', test:'hey', cls:'notrans', style: 'opacity: 1' }] }); You need to change the x-panel-inner cls for your panel when it is centered . So what you want to do is give your panel a cls e.g: cls: my-panel . var overlay = Ext.Viewport.add({ xtype: 'panel', centered: true, style:

I am implementing Stripe in my Sencha Touch 2 application, and they require that I have set a custom data- HTML5 attribute on the respective input fields ala this: <input type="text" size="20" data-stripe="number"/> <input type="text" size="4" data-stripe="cvc"/> <input type="text" size="2" data-stripe="exp-month"/> <input type="text" size="4" data-stripe="exp-year"/> I have defined my input fields in the view like this: { xtype:'textfield', name:'expirationYear', 'data-stripe':'exp-year', label:'Expiration', placeHolder:'Expiration Year (YYYY)' } I was experimenting with adding: 'data-stripe'