Introducing...







The right tool...





For the right job

what is Sencha ?

Sencha History



Sencha for the Desktop

ExtJs



What can we do with ExtJs



Most advanced desktop web apps on earth

ExtJS Pros



ExtJS Cons



ExtJs data package


ExtJs examples (1)



http://easyintranet.fr

ExtJs examples (2)


http://github.com/revolunet/Ext.ux.FileBrowser

ExtJs code sample (1)

                Ext.create('Ext.data.Store', {
                    storeId:'usersStore'
                    autoLoad:true,
                    pageSize: 25,
                    proxy: {
                        type: 'ajax',
                        url : '/path/to/user-list.php',
                        reader: {
                            type: 'json',
                            root: 'users'
                        }
                    }
                });
                
                Ext.create('Ext.grid.Panel', {
                    title:'Users List',
                    store:'usersStore',
                    dockedItems: [{
                        xtype: 'pagingtoolbar',
                        store: 'usersStore', 
                        dock: 'bottom',
                        displayInfo: true
                    }],
                    renderTo: Ext.getBody()
                });
            
            

ExtJs code sample (2)

            
                Ext.define('MyApp.UserGridPanel', {
                    extend: 'Ext.grid.Panel',
                    title: 'Users list',
                    initComponent: function() {
                        var userStore = new Ext.data.store({
                            autoLoad:true,
                            pageSize: 25,
                            proxy: {
                                type: 'ajax',
                                url : '/path/to/user-list.php',
                                reader: {
                                    type: 'json',
                                    root: 'users'
                                }
                            }
                        });
                        Ext.apply(this, {
                            store:userStore,
                            dockedItems: [{
                                xtype: 'pagingtoolbar',
                                dock: 'bottom',
                                displayInfo: true,
                                store:userStore
                            }],
                        });
                        MyApp.UserGridPanel.superclass.initComponent.apply(this, arguments);
                    }
                });
                  
            


Sencha for the Mobile

Sencha Touch



What we can do with Sencha Touch



Cross device web apps for the mass


native VS web apps VS phonegap


  Native Web App Hybrid
Device API
Store / Market
Cross-device dev
Instant update
Linkable
Offline

Sencha Touch Pros



Sencha Touch Cons



Sencha Touch examples (1)


Sencha Touch examples (2)


http://digimag.bellesdemeures.com

Sencha Touch code sample

                        
                var App = new Ext.Application({
                    name : 'QuizzApp',
                    launch : function () {
                        QuizzApp.views.home = new Ext.Panel({                            // home screen
                            items:[
                                { html:'
welcome to supa quizz
' }, new Ext.Button({ text:'Start now!', handler: function () { // show questions QuizzApp.views.viewport.setActiveItem('questions', {type: 'slide', direction: 'left'}); } }) ], dockedItems: new Ext.Toolbar({ title: 'Supa Quizz test app' }) [...], }); QuizzApp.views.questions = new Ext.Carousel({ // questions carousel id:'questions', direction:'horizontal', items:[], cardTpl:new Ext.XTemplate( '
', '
{text}
', '
' ), listeners:{ beforeactivate:function() { Ext.getStore('QuestionStore').load(); } } }); QuizzApp.views.viewport = new Ext.Panel({ // main viewport fullscreen: true, layout:'card', cardAnimation:'slide', items:[ QuizzApp.views.home, QuizzApp.views.questions, QuizzApp.views.results, [...] ] }); } });

Useful pointers






Questions ?

Thanks :

ParisJS team

Gary & Remi for support

@paulrouget (Mozilla) for DZslides


Twitter : revolunet

Github : revolunet

Email : julien@revolunet.com