Results 1 to 1 of 1

Thread: How to include Ext.define to the code

  1. #1

    Default How to include Ext.define to the code

    Greetings.

    I have a problem using a button linking to a view.

    Im created a page called MainMenu contains a button to link to second view (which is the view in Customers.js).
    The problem is:
    1. I follow some tutorial to code form validation in Customers.js file and it is loaded correctly.
    **Note: No problem found when i load the Customer.js file separately.
    2. Second: Now i wanted to use a "button" in MainMenu.js and link it to another view which is in "Customers.js". But my code doesn't have "MyApp.view.Customers" in order for me to point it correctly.

    Can anyone enlighten me how to restructure the Customer.js or by any other method where button can link it correctly?

    My overall expected building structure :
    Main (every button act like a desktop icon pointing to)
    --> Customers
    --> Sellers
    --> Assets
    ..
    --> etc.

    In MainMenu.js:
    Code:
    Ext.define('MyApp.view.MainMenu', {
        extend: 'Ext.navigation.View',
        xtype: 'mainmenu',
        requires: [
            'Ext.Panel',
            'Ext.Button'
        ],
    
    
        config: {
            items: [
                {
                    xtype: 'container',
                    title: 'Menu',
                    layout: 'vbox',
                    scrollable: true,
                    items: [
                        {
                            xtype: 'button',
                            text: "testing",
                            listeners:{ tap: function(button, e, eOpts) {
                                //The issue happened here, I know i don't have "MyApp.view.Customers" :(
                                var user = Ext.create('MyApp.view.Customers');    
                                Ext.Viewport.add(user);
                                Ext.Viewport.animateActiveItem(user,{type: 'slide', direction: 'left'});
                                }
                            }
                        }
                    ]
                    //some other component here, i removed it for simplicity purpose
                }
            ]
        }
    });
    In Customers.js:
    i give a credit to "http://druckit.wordpress.com/2013/08/01/about-sencha-touch-form-field-validation/" for providing a good guidance.
    Code:
    var template = Ext.XTemplate.from(Ext.get('customerdetail-template'));
    var store = Ext.getStore('customerlist');
    
    
    var onNavigationPush = function(v, item) {
        v.down('#addButton').hide();
    };
    
    
    var onNavigationPop = function(v, item) {
        v.down('#addButton').show();
        v.down('#saveButton').hide();
    };
    
    
    
    
    var view = Ext.create("Ext.NavigationView", {
        fullscreen: true,
        items: [
            {
                xtype: 'list',
                title: 'Customers',
                itemTpl: '{name}',
                store: 'customerlist',
                grouped: true,
                indexBar: false,
                onItemDisclosure: function (record, btn, index) {
                    view.push({
                        xtype: 'panel',
                        title: 'Customer Detail',
                        html: template.apply(record.data),
                        styleHtmlContent: true
                    });
                }
            }
        ],
        listeners: {
            push: onNavigationPush,
            pop: onNavigationPop
        }
    });
    
    
    var formBase = {
        title: "Add Customer",
        itemId: "addcustomerform",
        items: [
            {
                xtype: 'fieldset',
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name',
                        required: true
                    },
                    {
                        xtype: 'textfield',
                        name: 'title',
                        label: 'Title'
                    },
                    {
                        xtype: 'textfield',
                        name: 'company',
                        label: 'Company'
                    },
                    {
                        xtype: 'textfield',
                        name: 'country',
                        label: 'Country'
                    }
                ]
            }
        ]
    };
    
    
    var addNewRow = function() {
        view.push(Ext.create('Ext.form.Panel', formBase));
        view.down('#saveButton').show();
    };
    
    
    var save = function(button,event) {
        //var errorString = '',
        //    form = button.up('formpanel');
        //console.log(form);
        //var    fields = form.query("field");
    
    
        var form = view.down('#addcustomerform');
        var record = Ext.create('MyApp.model.customerlist', form.getValues());
    
    
        var errors = record.validate();
    
    
        if(!errors.isValid()) {
            //errors.each(function (errorObj){
            //   errorString += errorObj.getField() + " " + errorObj.getMessage() + " ";
    
    
            //    var s = Ext.String.format('field[name=0]', errorObj.getField());
            //   form.addCls('invalidField');
            //});
            Ext.Msg.alert('Error!', 'Please fill in all Required(*) input');
        } else {
            store.add(record);
            //TODO validation and error handling
            view.pop();
        }
    };
    
    
    view.getNavigationBar().add([
        {
            xtype: 'button',
            id: 'addButton',
            align: 'right',
            ui: 'action',
            iconCls: 'compose',
            iconMask: true,
            handler: addNewRow
        },
        {
            xtype: 'button',
            id: 'saveButton',
            text: 'Save',
            align: 'right',
            ui: 'action',
            handler: save,
            hidden: true
        }
    ]);

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108

    Default

    Check out the following guide on configuring views. http://docs.sencha.com/touch/2.3.1/#!/guide/views
    Please code tags when posting code.
    ie
    [.CODE]
    your code....
    [/.CODE]
    just remove the '.' before CODE
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services [email protected]

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •