Sencha Forum - Sencha Touch 2.x: Q&A

Sencha Cmd Build Native vs. Cordova

Norm1 — Fri, 24 May 2013 17:50:50 GMT

From what I read Sencha offers native build functionality. How does this differ than building with Cordova?

It would be helpful to know the feature comparison between the 2 different approaches.

Thanks

selectField: tableAlign='left' not working in toolbars

Dierk — Fri, 24 May 2013 15:59:08 GMT

Code below does not work: the label is placed on top of the select field, where it should be placed left of the select field, and even is abbreviated to "Some ...".

This is on Chrome 27.

Any idea what I'm wrong wrong?

Thanks

Code:

Ext.create('Ext.form.Panel', {

    iconCls:    'maps', 

    layout:        'fit',

    items:        [

        {

            xtype :        'toolbar',

            docked:        'top',

            items:        [

                {

                    xtype:            'selectfield',

                    label:            'Some random label',

                    labelAlign:        'left',

                    options: [

                        { text: 'Value1', value: 'value1' },

                        { text: 'Value2', value: 'value2' },

                        { text: 'Value3', value: 'value3' },

                    ]

                },

            ],

        },

    ],

})

File Upload using Sencha Touch from browser

vijay.chauhan — Fri, 24 May 2013 14:22:29 GMT

Hi,

I would like to upload a file using Sencha Touch 2.0.1.

I have Implemented a solution as per below link.
http://mindsaur.com/demo/fileupload/

But it's not working in android 2.3
because that plugin uses "FormData" which is not supported in some older browser.

Can we achieve this using Ext.Ajax.request ?

I have modified that plugin by replacing FormData as per below.

Ext.Ajax.request({
url: url,
isUpload: true,
headers: {'Content-type':'multipart/form-data'},
method: 'POST',
form: Ext.get('fileElement').down('form'),
success: function(response, options) { console.log('ok'); },
failure: function(response, options) { console.log('fail'); }
});

but it gives error "Uncaught TypeError: Cannot set property 'ext-element-11' of undefined"

While debugging i found that id('ext-element-11') was generated by sencha for iframe to perform file-upload using iframe.

Or any one having better solution please provide as soon as possible.

Integrating with Cordova

mob1 — Fri, 24 May 2013 13:57:36 GMT

Hi, I'm a new bye.
I'm a bit confused about sencha touch integration with cordova (I generally use sencha architect)

On the internet I read sometimes article referring at adding secha touch to a cordova project with eclipse (more or less :)

Somewhere else I read you just need to include the cordova.js file from the index.html file in sencha touch?

!?? :)

I'd really appreciate the second approach because I'd like to continue developping with the Architect and access the cordova js api?
Is that possible? Has someone a practical example?
Thanks in advance, Andrea.

Data retrieved from Ajax proxy request is not getting updated in list - ST 2.1.1

mohamedaslam.a — Fri, 24 May 2013 12:39:04 GMT

Hi,

I am using Sencha Touch 2.1.1 version.

My issue is Dynamic Data retrieved from Ajax proxy request is not getting updated in list.

The data from first proxy request got assigned to list & I can see it in the list. But the data from subsequent request (i.e content will be dynamic for each proxy request in JSON format for list) is not getting updated in list and I always see the data from first request.

I have tried “Refresh()” method of list, but still list does not get updated.

I have referred this Sencha forum link which says the refresh method issue got solved in Sencha Touch 2.1.1, but still no luck and as mentioned above I am using Sencha touch 2.1.1.

Note: I have verified the data coming from each request by giving an alert/printing my store object and I can see the updated data for each request in store object, the issue is List is not getting updated.

Solution for this issue would be greatly appreciated!Please find below the my code for View, Controller, Store & Model.

My view code

Ext.define('My.view.ToolsandInformationPage', {
extend: 'Ext.Container',
xtype: 'ToolsandInformation',
requires: [My.store.ToolsAndInformationNavigation', 'Ext.List'],
initialize: function () {

this.callParent(arguments);

},

config: {
flex: 1,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '',
items: [
{
xtype: 'button',
ui: 'back',
id: 'toolsBackBtn',
text: 'BACK'

},
{
xtype: 'button',
iconCls: 'home',
iconMask: true,
align: 'right',
id: 'toolstHomeIcon'
}
]
},
{

xtype: 'list',
height: 600,
draggable: false,
scrollable: false,
id: 'toolsSubMenu',
itemTpl:new Ext.XTemplate(' {Label}'),
store: 'ToolsAndInformationNav'

}
]
}
});

My Controller Code

DisplayViewById: function (pageId) {
Ext.Ajax.request({
headers: {
'Content-Type': 'application/json; charset=utf-8'
},

url: ‘requestUrl’+ pageId, //Valid URL
success: function (response, opts) {
var jsonResponse = Ext.decode(response.responseText);
var navigationLinks = jsonResponse.TopicalNavigation;
navigationLinks = '{TopicalNavigation:' + Ext.encode(navigationLinks) + '}';

var navStore = Ext.create(My.store.ToolsAndInformationNavigation', {
autoLoad: true,
autoSync: true,
model: ' My.model.MainNavigation',
storeId: 'ToolsAndInformationNav',
data: navigationLinks,
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'TopicalNavigation'
}
}
});

var toolsSubmenu = Ext.getCmp('toolsSubMenu');
toolsSubmenu.refresh();

My Store Code

Ext.define('My.store.ToolsAndInformationNavigation', {
extend: 'Ext.data.Store',
requires: ['My.model.MainNavigation'],
config: {
model: 'My.model.MainNavigation',
storeId: 'ToolsAndInformationNav'

}
});

My Model Code:

Ext.define('My.model.MainNavigation', {
extend: 'Ext.data.Model',
config: {
fields: ['Label', 'ActionUrl', 'ID']
}
});

JSON data from Request will be like this,

{"TopicalNavigation":[{"ID":"x291","Label":"Products","ActionUrl":"291/products"},{"ID":"x292","Label":"Center","ActionUrl":"292/center"},{"ID":"x293","Label":"FAQs","ActionUrl":"293/faqs"},{"ID":"x45","Label":"About Us","ActionUrl":"45/about-us"}]}

Thanks,
Aslam

Debug packaged 2.2 app on iOS

Razr — Fri, 24 May 2013 12:29:33 GMT

Hi everyone,

Using osx 10.8 with Safari 6.0 I would like to attach the development console (from within Safari) to my connected iPhone so I can debug my packaged app.

So far my iPhone shows up, but when I view the list of apps which Safari can connect with, it says 'No Inspectable Applications'. When I open Safari on my iPhone with for ex 'google.com' it directly shows up as inspectable. But my Sencha app not :(

Everywhere on the internet I read the PhoneGap / Cordove apps should be inspectable so I wonder whether I do something wrong? Thanks in advance!

Chart with custom sprite as background

teroko — Fri, 24 May 2013 11:49:16 GMT

I have pretty basic line chart with time on x-axis and numeric values on y-axis.

Now I would like to add colored background element to chart what highlights part of the chart between specific time values.

I figured out there is no direct way to do this, so I was thinking to add rect sprite to chart surface, which height is same as charts and width comes from time difference. But I have no idea how to do this...

Or maybe customizing x-axis' grid somehow that it shows the specific area with different color...

Any suggestions how I can achieve this?

Theming Sencha Touch

AdityaRaja — Fri, 24 May 2013 09:44:21 GMT

Is it possible to create custom css classes for the sencha components instead of manipulating the baseCls's of the DOM like .x-list or .x-list-item? The cls config property only affects a few components (those which don't have nested default css classes).

Also, does using the default base classes cause any sort of problems when upgrading to newer versions of Sencha Touch?

Sencha building ios app with phonegap php login problem

andyts93 — Fri, 24 May 2013 09:43:16 GMT

Hi, I'm trying to build an iOs app using Sencha Touch and phonegap. I created my package including cordova js file and the app works in xcode. My problem is that I use a php file to check the login and when I build my app it doesn't work.
If I test my app in a browser it works but when I build the package and run it in xcode, my app loops in a "Loading.." screen and don't complete the login. My php file is in resources/script and I added this folder to resources in app.json

OnItemTap List not firing - no MVC examples found. Help?

dhaze — Fri, 24 May 2013 03:17:41 GMT

Hi, I've been working on my first Sencha app as for a school project and have most of my functions behaving but I have an information list that I would like to have display an overlay panel with details when tapped that is being troublesome. Most of the bits of code I've found around the web use the old Sencha format. I've been able to get what I thought was a 'workable' formula but the list is not triggering. Can someone who knows what they are doing please take a look and help me figure out what I'm doing wrong?

- Del

View

Code:

Ext.define('TESTApp.view.InfoList', {

    extend: 'Ext.List',

    xtype: 'infolist',

    requires: ['TESTApp.store.Infos'],

    

    config: {

        title: 'Information',

        itemTpl: '{Department}',

        store: 'Infos',

        onItemDisclosure: true

    }

});

Store

Code:

Ext.define('TESTApp.store.Infos', {

    extend: 'Ext.data.Store',

    

    config: {

        model: 'TESTApp.model.Info',

        data: [

            { Department: "Biz",             Phone: "123",     Email: "biz@domain.com"},

            { Department: "Walk",     Phone: "123",     Email: "walk@domain.com"},

            { Department: "Lost",         Phone: "123",     Email: "lost@domain.com"},

            { Department: "Rol",             Phone: "123",     Email: "rol@domain.com"},

            { Department: "Records",             Phone: "123",     Email: "records@domain.com"}

        ]

    }

});

Model

Code:

Ext.define('TESTApp.model.Info', {

    extend: 'Ext.data.Model',

    

    config: {

        fields: ['Department', 'Phone', 'Email']

    }

});

Attempt at a Controller

Code:

Ext.define('TESTApp.controller.Info', {

    extend: 'Ext.app.Controller',





    config: {

        refs: {

            info: 'infolist',

        }

    },

        

        listeners: {

              info:function(data,index,item,e){

                var Department =     data.getstore().getAt(index);

                var Phone =         data.getstore().getAt(index);

                var Email =         data.getstore().getAt(index);

                this.overlay = new Ext.Panel({

                    modal:true,

                    centered:true,

                    floating:true,

                    width: 250,

                    height:250,

                    styleHtmlContent:true,

                    dockedItems:[{xtype:'toolbar', title:department}],

                    dock:'top',

                    html:'Phone: ' + phone + "
Email: 
" + email + "
"

                });





                this.overlay.show('pop')

           }

       }

});

Current infolist view attached

Attached Images

infolist.png‎ (14.2 KB)

Who to change a form from display to edit using CSS

ehboym — Thu, 23 May 2013 21:38:52 GMT

Hi,

I have a form which needs to be displayed in two formats:
1) Display format where the data is displayed as labels and text [Name : Foo Bar]
2) Edit format where the data is displayed in textfields

I thought I could use the 'editable' property of the textfield alongside some CSS style to change from one display to the other but it seams that textfield are not affected by the CSS. Setting the border, background-color .... had no effect on the textfield.

Is there an easy way to get that effect in Sencha and CSS or do I need to create two separate forms to do that ?

Thanks

Erez

who to connect a xtype: 'label' to a form record

ehboym — Thu, 23 May 2013 21:32:37 GMT

Hi,

I'm trying to create a form which has a label displaying some data from the form's record.

I have:

Code:

  

{

     xtype: 'formpanel',

     ...........

     items: [

          xtype: 'label',

          name: 'FullName',

          ........

     ]

 }

I'm setting the form's record so if I change the xtype to 'textfield' I do get the data displayed but I cant find a way for a xtype label to be connected to the FullName field in the record.

Any ideas on who I can connect that label ?

Is it possible to link an image src to a record ?

Thanks

Erez

Feature Tour Help

locutusUT — Thu, 23 May 2013 21:12:30 GMT

Does Sencha Touch have a capability to add a feature tour to your mobile app similar to this jQuery plugin: http://zurb.com/playground/jquery-jo...re-tour-plugin? If not, do you recommend one that works well with ST 2.2?

Thanks,
Lou

Client Side Paging

FlavioRamos1987 — Thu, 23 May 2013 18:00:28 GMT

Hey guys!

Is there anyway to do a paging control at client side?

Touch 2.2.1 Sql Proxy not working for auto fields?

nbester — Thu, 23 May 2013 17:18:34 GMT

Can anyone confirm whether the new sql proxy is working for auto fields? I have searched the forum, but could not find any references so I'm hoping I am wrong!

What I see....

When using the sql proxy on a store which I previous used Localstorage successfully, I run into the problem that all the auto type model fields (objects, arrays etc) gets stored on the sql DB as "[object] [object]" which it typically an encoding problem. My first reflex was to implement encode/decode functions with JSON encoder, but looking at the proxy code I see that it does not implement the encoding/decoding capability of the "normal" sencha proxies.

So... Is this a known issue? Am I missing something?

Thanks