Sencha Forum - Sencha Touch 2.x: Discussion

Mouse / Touch issue on Surface

Roberto Selleri — Wed, 22 May 2013 06:42:23 GMT

I know that is not officially supported, but we have succesfully develop a web app used in both IPAD and Windows 7 tablets (using Chrome)

To achive this we had to change the function:

Touch: function() {
return this.isEventSupported('touchstart') && !(Ext.os && Ext.os.name.match(/Windows|MacOS|Linux/) && !Ext.os.is.BlackBerry6);
},

in:

Touch: function() {
return this.isEventSupported('touchstart');
},

to allow Chrome on Windows 7 tablets to scroll using fingers.

Now some our customers are trying to use Microsoft Surface with Windows 8 Pro and we are facing a new issue:

Without patch Mouse works but touch scroll no (as before)
Using patch scroll start working but mouse is completely ignored...

Seems that Sencha frameworkgot confused on which events subscribe.

Someone have a clue how to fix this ?

Documentation : what a pity !

qde — Tue, 21 May 2013 14:04:26 GMT

Dear all,

I'm using Sencha Touch for a few month now. The framework is really great and the community also ( fast reply from other members or from sencha team ). Thanks a lot for this tool !

There is one big problem with Sencha Touch ; The documentation.
The documentation has a very bad quality :

Lot of example does not work
Lot of detail missing
Lot of ambigus notation

On some documentation topic, there is a lot of comments from user saying the doc is not true, the example is not working, etc... but it seems to never be updated.

What do think about the current documentation ?
Are you happy with it ? Do you also think there is a big lack of quality for the documentation ?
Maybe I'm the only one to found the documentation not clear ?

What can we do to improve documentation quality ?
Is is a place to notify documentation error / missing documentation ? Is there a project somewhere to correct the current documentation ? Is there somewhere some kind of "wiki" documentation ?

Do we have access to better documentation if a pay for Sencha support ?

Best regards,

Qde.

Performance on Android with "O’Reilly Conferences App" demo

tavojavi — Tue, 21 May 2013 12:47:44 GMT

Hello, I´ve created an APK with the "O’Reilly Conferences App" demo app. Once it is installed on Android devices (Even on Samsung S3) the performance of the lists are VERY POOR, the list does not respond well to the fingers and it provides a bad user experience.

Has someone discovered why this is happening with this demo? We have start developing using this list as a example for other app, but the customer is not happy with this.

I´ll appreciate your insights!

Regards,
Gustavo

Evaluating execution time of listview rendering

nigno21 — Tue, 21 May 2013 10:39:18 GMT

Hi to all, can you help me in this porpouse? I would measure the execution time of the only graphics list rendering: is there an approach, like using events, that allow me to retrieve this information?
Please help me. Thanks for all!

Can't scroll to the bottom if content too long

MYlover — Tue, 21 May 2013 10:34:55 GMT

Why it can't scroll to the bottom if the content too long?

Code:

this._panel = {            xtype: 'panel',

            height: '100%',

            scrollable: true,

            items: [

                {

                    html: ''

                },{

                    html: ''

                }

                

            ]

        };





        this.add(this._panel);

ScrollTo does not work?

kohyea — Tue, 21 May 2013 09:12:23 GMT

Hi guys,
we have one EXT object named HtmlPage, you can check the following code. when click some link, it will call function 'loadPage' to load the HTML page content on this object. if it passes a parameter 'bookmark', it should scroll to the right position. the code works perfect on Chrome, but when i tested with iPad2 and iPhone, it only scrolls to the right position for the first time when we call function 'loadPage'. after that, it does not work any longer.
anyone can tell me what is the issue?

Thanks,
Kohyea

Code:

Ext.define('app.view.HtmlPage', {

    extend: 'Ext.Container',

    xtype: 'htmlPage',

    config: {

        scrollable: {direction: 'auto'},

        cls: 'htmlPage'

    },

    loadingText: 'Loading...',

    dispatchUrl: '/load/?id=',

    initialize: function() {

        this.loadPage({page: this.config.page});

    },

    

    loadPage: function(cfg) {

        var page = cfg.page;

        this.setMasked({

            xtype: 'loadmask',

            message: this.loadingText

         });                 

        Ext.Ajax.request({

            url: this.dispatchUrl + page,

            method: 'GET',

            params: {

                'company': app.company,

                'site': app.site

            },

            scope: this,

            success: function(result) {

                this.setMasked(false);                

                var rs = Ext.decode(result.responseText);

                if (rs.success) {

                    var data = rs.data;

                    document.title = data.title + ' - ' + app.name;

                    this.setHtml(data.content);

                    if (cfg.bookmark) {

                        var fn = function(id) {

                            var el = this.element.child('#' + id + ', [name='+id+']'),

                                top = (Ext.fly(el).getOffsetsTo(this.element)[1]) + this.element.dom.scrollTop,

                                scroller = this.getScrollable().getScroller();                                

                            scroller.scrollTo(null, top);  //the code does not work on iPad2 and iPhone                          

                        };

                        Ext.Function.defer(fn, 100, this, [cfg.bookmark]);

                    } else {

                        var scroller = this.getScrollable().getScroller();

                        scroller.scrollToTop();

                    }

                }

            }

        });        

    }

});

Handling multiple dimension images (Sencha2)

senchaNewbie1 — Tue, 21 May 2013 05:04:28 GMT

I am experienced developer in android platform but newbie to Sencha touch. I have following questions:
1) How sencha2 handles multiple dimension images, just like in android we have different folders to put different resolution images like HDPI, MDPI, XHDPI, LDPI. (In our application we are planing to keep all the images in device itself)
2) If I have to use image I have to set Height as mandatory parameter, is there any way in sencha just as we have Fill_parent, wrap_content in Android
Please suggest.....

Sencha component to view TXT,PDF,ODT,DOC

becky99 — Mon, 20 May 2013 07:22:43 GMT

Hi,

Anyone try it before? I would like to develop a UI when click on a hyerlink, it will show the content in a pop window or maybe a floating panel. This pop-up can be a componment of sencha to view TXT,PDF,ODT,DOC.

Regards,
becks

ST2.2 "compass compile" result seems to be missing "default" styling

TheTallGuy — Sat, 18 May 2013 19:00:04 GMT

I'm building an app using ST 2.2. I'm ready to start styling my pages, so I'm testing the compass/SASS feature to make sure it works (before applying any custom styling). While the compile finishes without error, the resulting stylesheet is 100K smaller than the default stylesheet that came with the initial project, and looks as though I were using only the "base" theme, not the default theme. (In other words, the default theme seems to be missing, and the page looks terrible.)

Thinking I must have messed something up, I redownloaded ST2.2 and Cmd, re-installed both of them, and checked my versions:

Cmd: Sencha Cmd v3.1.1.274
Compass: Compass 0.11.1 (Antares)

I then generated a new app from scratch and checked it in the browser. It looked like this:

Attachment 43864

I then compiled its SASS with compass. I get exactly the same result. The newly compiled one is missing all styling:

Attachment 43865

The "compass compile" step seems to be working correctly -- I get no errors, and a new file is being generated. And the necessary default theme files seem to be there, or at least I get errors if I remove them. So I'm baffled. I figure the forums would be full of posts if everyone got the same results I have, so I must have missed a small but important step somewhere.

I'm using using a Mac (10.8.3). Has anyone run into the same issue? Or have any ideas for something I can try?

Thanks in advance!
Michael

Attached Images

before.png‎ (44.6 KB)
after.png‎ (33.2 KB)

Post on Facebook wall

sendy — Sat, 18 May 2013 09:42:23 GMT

Hy I want to share News on my facebook wall.
this is my code:

Code:

window.fbAsyncInit = function() {                FB.init({                  appId   : '136041603241236', // should be replaced with your Facebook Application ID                  status  : true, // check login status                  cookie  : true, // enable cookies to allow the server to access the session                  xfbml   : true // parse XFBML                });        };FB.ui(                {                        method: 'stream.publish',                        attachment: {                                name: 'Demo Pulish To Wall With Popup And Call Back Function',                                description: (                                                           "I have experienced with Share On Wall with Popup windows and would like to share with you. Check it now."                                                        ),                                href: "http://4rapiddev.com/facebook-graph-api/facebook-publish-to-wall-with-popup-or-dialog-and-call-back/"                        },                display: 'popup'                },                function(response) {                    if (response && response.post_id) {                                alert('Post was published with post_id:' + response.post_id);                        } else {                                alert('Post was not published.');                        }                });        And I have added this on index.html
  ( body)the result is a dialog shown with error : Une erreur s’est produite. Veuillez réessayer plus tard.

Any help please???

Panels in card llayout not showing up

REMIBLOCH — Fri, 17 May 2013 09:47:09 GMT

Hi, I've been trying for hours to include show a panel into a card layout container without any success. The main problem is that, when i use a panel with my items it works, but when i use a panel with card layout that should display the items panel in a card, it doesn't. Here is my code.

First of all the working part that gives the following :
Attachment 43841

Code:

Ext.define("SAIMobile.view.OpenedTasks", {

    extend: 'Ext.Container',

    xtype:'openedtaskpage',

    config: {

        title: 'Opened',

        iconCls: 'add',

        cls: 'agenda',

        layout: 'vbox',

        items:[

            {

                xtype: 'titlebar',

                id: 'navTitlebar',

                docked: 'top',

                title: 'Nav',

                items: [

                    {

                        xtype:'button',

                        iconCls: 'arrow_left',

                        action: 'back',

                        align: 'left'

                    },{

                        xtype:'button',

                        iconCls: 'refresh',

                        action: 'refresh',

                        align: 'left'

                    },{

                        xtype:'button',

                        iconCls: 'settings',

                        action: 'filter',

                        align: 'right'

                    },{

                        xtype:'button',

                        iconCls: 'arrow_right',

                        action: 'next',

                        align: 'right'

                    }

                ],

                flex: 1

            },{

                xtype: 'list',

                store: {

                    fields: ['name'],

                    data: [

                        {name: 'Cowper'},

                        {name: 'Everett'},

                        {name: 'University'},

                        {name: 'Forest'}

                    ]

                },





                itemTpl: '{name}',

                flex:10

            } 

        ]

    }

});

Now i want to put this into a card so i create another item containing this :

Code:

Ext.define('SAIMobile.view.EntriesNavigator',{

    extend: 'Ext.Panel',

    xtype:'entriesnavigator',

    itemId: '#nav',

    layout: 'vbox',

    scrollbar: 'vertical',

    items: [

        {

            xtype: 'titlebar',

            id: 'navTitlebar',

            docked: 'top',

            title: 'Nav',

            items: [

                {

                    xtype:'button',

                    iconCls: 'arrow_left',

                    action: 'back',

                    align: 'left'

                },{

                    xtype:'button',

                    iconCls: 'refresh',

                    action: 'refresh',

                    align: 'left'

                },{

                    xtype:'button',

                    iconCls: 'settings',

                    action: 'filter',

                    align: 'right'

                },{

                    xtype:'button',

                    iconCls: 'arrow_right',

                    action: 'next',

                    align: 'right'

                }

            ],

            flex: 1

        },{

            xtype: 'list',

            store: {

                fields: ['name'],

                data: [

                    {name: 'Cowper'},

                    {name: 'Everett'},

                    {name: 'University'},

                    {name: 'Forest'}

                ]

            },





            itemTpl: '{name}',

            flex:10

        }    

    ]

})

and i create on the fly the element in the previous panel and add it to the items

Code:

Ext.define("SAIMobile.view.OpenedTasks", {

   extend: 'Ext.Container',

    xtype:'openedtaskpage',

    config: {

        title: 'Opened',

        iconCls: 'add',

        cls: 'agenda',

        layout: 'card',

        items:[

            

        ]

    },

    initComponent: function(){

        var nav = Ext.create('SAIMobile.view.EntriesNavigator');

        this.add(nav)

    }

});

The code executes without any error but i've a blank panel like if nothing were created, i also tried with this.setActiveItem, it doesn't work better.

Another try i did was to put inside the items[] array an element of type 'entriesnavigator'...but i still have a blank panel.

I'm having this problem all the time so there is obviously something that i didn't get.

Any help would be greatly appreciated

Thank in advance

Attached Images

panel.png‎ (10.8 KB)

loop for fn function always return last value

MYlover — Fri, 17 May 2013 07:12:08 GMT

some problem thing here

Code:

for (i =1; i<=4; i++) {

                    picturesListeners.push({

                        element: 'element',

                        delegate: 'div.img'+i,

                        event: 'tap',

                        fn: function() {

                            console.log(i);

                        }

                    });

                }

it always return 4 no matter which div img clicked. Anyone know why?

how to close the native app in in sencha touch on ipad

zsjvchelp2@gmail.com — Thu, 16 May 2013 07:28:34 GMT

i am working on a native app in sencha touch. I hope i can click a button to quit and close the app like normal native app .
How can I do it ?
thanks in advance

Viewport size on Windows Phone 8

SimonFlack — Wed, 15 May 2013 20:49:11 GMT

Long time... but now I am back :-)

I have a customer that wants to port this existing ST app to WP8.

http://wfx.no/dipsforum

or

http://wfx.no/dipsforum/?platform=ie10

Attachment 43808

Our test device is a Lumia 920 with a 15:9 screen ratio.

A screenshot from the phone looks like this.

Attachment 43803

As you can see the tabbar is cut on the 4th icon. In order to reproduce this look in Safari (I develop on a mac) I have to set the browser size to:

self.resizeTo(332,580)

This gives me a resonable area to simulate the layout. And looks like this.

Attachment 43804

On a quick look it seems the viewport is defined as 320 x 560 (Pretty close to my browser size)

Code:

 if (!Ext.microloaded && navigator.userAgent.match(/IEMobile\/10\.0/)) {

                var msViewportStyle = document.createElement("style");

                msViewportStyle.appendChild(

                    document.createTextNode(

                        "@media screen and (orientation: portrait) {" +

                            "@-ms-viewport {width: 320px !important;}" +

                        "}" +

                        "@media screen and (orientation: landscape) {" +

                            "@-ms-viewport {width: 560px !important;}" +

                        "}"

                    )

                );

                head.appendChild(msViewportStyle);

            }

So... My Question...

Is this correct? And if so why is there only room for 3.5 icons on the tabbar/appbar when windows design guides say there should be room for 4 icons.

Note: Setting Safari to --> self.resizeTo(480,800) gives a more "correct" / "expected" layout. (Actual screen size on the phone)

Attachment 43807

Am I doing something wrong?

Any help appreciated.

Attached Images

lumia.jpg‎ (43.1 KB)
Screen Shot 2013-05-15 at 10.34.05 PM.png‎ (68.9 KB)
Screen Shot 2013-05-15 at 10.39.06 PM.png‎ (82.1 KB)
Screen Shot 2013-05-15 at 10.47.49 PM.png‎ (107.0 KB)

plugin vs component subclass

MrNickBarker — Wed, 15 May 2013 14:15:39 GMT

I was wondering what are the advantages (and disadvantages) of creating a plugin that is only usable with a single component (ex. list) or creating a subclass of that component?