1. #1
    Sencha - Architect Dev Team dfoelber's Avatar
    Join Date
    Sep 2011
    Location
    Rockville, MD
    Posts
    96
    Answers
    1
    Vote Rating
    12
    dfoelber will become famous soon enough

      0  

    Default Unanswered: Drag and Drop Your Mobile App Script

    Unanswered: Drag and Drop Your Mobile App Script


    Hi all,


    A few of you requested the script that Phil and I used in our session.


    Start new Touch 2.2 Project
    = Views =
    Add a top level navigation view and set these configs
    - userClassName: MainNav
    - userAlias: mainnav
    Add a navigation bar (we did it via the config pane)
    Add a button to that navigation bar and set these configs
    - align: right
    - itemId: logoutBtn
    - text: Log out
    Add a list to the navigation view and set these configs
    - title: Orders
    - itemId: orderList
    - itemCls: order-list-element
    Install the attached OrderDetailsPanel.xdc (Edit->Import Component), add it as a top level component, and make sure the userClassName is set to 'OrderDetailsPanel' and the userAlias is orderdetailspanel
    Install the attached LoginPanel.aux.zip extension (change the filename to LoginPanel.aux, the forums don't allow .aux files yet), add it as a top level component, and set these configs
    - userClassName: LoginPanel
    - userAlias: loginpanel
    Unset the initial view from the navigation view
    = Data =
    Create a top level model and set these configs
    - userClassName: OrderModel
    - fields: id, orderNo, customerId, orderData, shipDate, total, tax, paid, shipping
    Create a top level JsonP store and set these configs
    - userClassName: OrdersStore
    - storeId: OrdersStore
    - model: OrderModel
    Set these configs on the proxy
    - extraParams: { unfulfilled: true }
    - url: http://senchapingpongstore.com/orders


    This service doesn't actually required authentication (so you can easily test/view orders list). If you wish to test mock data, enter this array in the data config and check the 'mock data' box:


    Code:
    [{orderNo:'CA1007',customerId:1000,orderDate:'2012-11-12 12:34:56',shipDate:'2013-05-22 17:02:31', total:204.695,paid:100.00,tax:8.795,shipping:10},{orderNo:'CA1008',customerId:1000,orderDate:'2012-10-12 12:34:56',shipDate:null,total:154.74,paid:154.72,tax:6.8925,shipping:10},{orderNo:'CA1009',customerId:1001,orderDate:'2013-02-12 12:34:56',shipDate:null,total:534.99,paid:500.00,tax:24.9995,shipping:10},{orderNo:'CA1010',customerId:1001,orderDate:'2013-01-12 12:34:56',shipDate:null,total:230.447,paid:null,tax:10.4975,shipping:10},{orderNo:'CA1011',customerId:1002,orderDate:'2012-10-12 12:34:56',shipDate:null,total:1584.47,paid:null,tax:74.975,shipping:10},{orderNo:'CO1012',customerId:1003,orderDate:'2012-10-12 12:34:56',shipDate:null,total:7585.2,paid:null,tax:360.247,shipping:10},{orderNo:'MD1013',customerId:1004,orderDate:'2013-01-12 12:34:56',shipDate:null,total:953.95,paid:null,tax:44.95,shipping:10}]
    Associate store with list by setting the 'store' config in the orderList to OrdersStore
    Set the itemTpl in the orderList to:


    Code:
    <div><div class="orderNo">{orderNo}</div><div class="total">{total}</div></div>
    Add a BasicEventBinding to the NavigationView, set the name config to 'activate' and add this code:


    Code:
    Ext.getStore('OrdersStore').load();
    = Controllers =
    Add a launch config to your Application node and add this code:


    Code:
    host = 'senchapingpongstore.com';
    
    
    Ext.Ajax.request({
        url: 'http://' + host + '/user/loggedin',
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            var obj = Ext.decode(response.responseText);
            if (obj.logged) {
                Ext.create('MyApp.view.MainNav', {fullscreen: true});
            } else {
                Ext.create('MyApp.view.LoginPanel', {fullscreen: true});
            }
        }
    });
    In the LoginController, set this code to the register action:


    Code:
    if (!values.email || !values.password || !values.confirm) {
        Ext.Msg.alert('Error', 'Please enter the required information');
        return;
    }
    
    
    if (values.password !== values.confirm) {
        Ext.Msg.alert('Error', 'Passwords do not match');
        return;
    }
    
    
    var user = {
        email: values.email,
        password: values.password
    };
    
    
    Ext.Ajax.request({
        url: 'http://' + host + '/user/register',
        method: 'POST',
        jsonData: user,
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            Ext.Viewport.removeAll();
            Ext.create('MyApp.view.MainNav', {fullscreen: true});
        },
        failure: function() {
            Ext.Msg.alert('Unable to register, please try again later');
        }
    });
    In the LoginController, set this code to the login action:


    Code:
    if (!values.email || !values.password) {
        Ext.Msg.alert('Error', 'Please enter your information');
        return;
    }
    
    
    var user = {
        email: values.email,
        password: values.password
    };
    
    
    Ext.Ajax.request({
        url: 'http://' + host + '/user/login',
        method: 'POST',
        jsonData: user,
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            Ext.Viewport.removeAll();
            Ext.create('MyApp.view.MainNav', {fullscreen: true});
        },
        failure: function() {
            Ext.Msg.alert('Unable to login, please try again later');
        }
    });
    Add a contoller action to the LoginController and set these configs
    - controlQuery: mainnav #logoutBtn
    - targetType: Ext.Button
    - name: tap
    - fn: onLogout (optional)
    Add this code:


    Code:
    Ext.Ajax.request({
        url: 'http://' + host + '/user/logout',
        method: 'POST',
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            Ext.Viewport.removeAll();
            Ext.create('MyApp.view.LoginPanel', {fullscreen: true});
        },
        failure: function() {
            Ext.Msg.alert('Unable to logout, please try again later');
        }
    });
    Add another controller and set the userClassName to OrderController
    Add a controller action to that controller and set these configs
    - controlQuery: mainnav #orderList
    - targetType: Ext.dataview.List
    - name: itemtap
    Add this code:


    Code:
    var nav = Ext.Viewport.down('mainnav');
    
    
    nav.push({
        xtype: 'orderdetailspanel',
        title: 'Order Details',
        order: record.data
    });
    Add another controller action and set these configs
    - controlQuery: mainnav #fulfillOrderBtn
    - targetType: Ext.Button
    - name: tap
    - fn: onFulfillBtnTap (optional)
    Add this code:


    Code:
    var id = button.up('formpanel').getOrder().id,
        nav = button.up('mainnav'),
        store = Ext.getStore('OrdersStore'),
        index = store.find('id', id),
        date = new Date();
    
    
    Ext.Ajax.request({
        url: 'http://' + host + '/order/' + id,
        method: 'POST',
        jsonData: { shipDate: date.toString() },
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            if (~index) {
                store.removeAt(index);
            }
            nav.pop();
        },
        failure: function() {
            Ext.Msg.alert('Unable to save order, please try again later');
        }
    });
    Add (yet) another controller action and set these configs
    - mainnav #saveOrderBtn
    - targetType: Ext.Button
    - name: tap
    - fn: onSaveOrderBtnTap (optional)
    Add this code:


    Code:
    var form = button.up('formpanel'),
        values = form.getValues(),
        id = form.getOrder().id,
        nav = button.up('mainnav'),
        store = Ext.getStore('OrdersStore'),
        index = store.find('id', id),
        record;
    
    
    Ext.Ajax.request({
        url: 'http://' + host + '/order/' + id,
        method: 'POST',
        jsonData: values,
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            if (~index) {
                record = store.getAt(index);
                for (var key in values) {
                    record.set(key, values[key]);
                }
            }
    
    
            nav.pop();
        },
        failure: function() {
            Ext.Msg.alert('Unable to save order, please try again later');
        }
    });
    Add a controller route to the OrderController and set these configs
    - url: order/:id
    - action: orderDetail
    Add this code:


    Code:
    Ext.Ajax.request({
        url: 'http://' + host + '/order/' + id,
        method: 'GET',
        withCredentials: true,
        useDefaultXhrHeader: false,
        success: function(response){
            var obj = Ext.decode(response.responseText),
                nav = Ext.Viewport.down('mainnav');
    
    
            nav.push({
                xtype: 'orderdetailspanel',
                title: 'Order Details',
                order: obj
            });
        }
    });
    = Extras =
    If you add little css snippet, create a CSS resource, set the url to 'app.css', and add this code:


    Code:
    .order-list-element .total {
        right: 12px;
        position: absolute;
        top: 12px;
        color: purple;
    }
    For osx users that want to deploy to the iOS simulator:
    Download the latest version of Cmd (http://www.sencha.com/products/sencha-cmd/download)
    Select the package button and select the first tab (Install plug-ins)
    Enter in the location of Cmd
    Select the second tab (Setup project with cmd) and point to where Touch 2.2 is located on your harddrive
    Select the 'Setup project with cmd' button - it should pop up a console window and setup the project
    Select the third tab (Package settings) and create a package settings


    Open the app.json file in your project root and add this object to the css array:


    Code:
    {
        "path": "app.css"
    }
    Add "LoginPanel" to the requires array in that file as well.


    At this point, you can select package->simulate!
    Attached Files
    David Foelber
    @davidfoelber
    Sencha Architect Development Team

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    Singapore
    Posts
    34
    Answers
    1
    Vote Rating
    3
    Yazid is on a distinguished road

      0  

    Default


    How do you add LoginPanel to the requires array?

  3. #3
    Sencha - Architect Dev Team dfoelber's Avatar
    Join Date
    Sep 2011
    Location
    Rockville, MD
    Posts
    96
    Answers
    1
    Vote Rating
    12
    dfoelber will become famous soon enough

      0  

    Default


    In the app.json file, there should be an empty "requires" array near the bottom. Adding "LoginPanel" will have cmd search along it's known package paths.

    Code:
    /**
     * List of package names to require for the cmd build process
     */
    "requires": [
        "LoginPanel"
    ],
    David Foelber
    @davidfoelber
    Sencha Architect Development Team

  4. #4
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    372
    Vote Rating
    4
    wemerson.januario is on a distinguished road

      0  

    Default


    Any github repo? Thanks!
    Wemerson Januario
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 84101145 - Goiânia-GO- Brazil
    Consulting and Training Ext JS
    Projects: (Nubes ERP)

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar