1. #1
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    168
    Vote Rating
    2
    Answers
    1
    GertBoers is on a distinguished road

      0  

    Default Unanswered: putting an app inside a card of a tabpanel

    Unanswered: putting an app inside a card of a tabpanel


    hey,
    i'm quite new to sencha and i'm trying to put an app i found here: http://www.sencha.com/learn/working-with-forms/ in the teamcard.js of my App which uses a tabPanel
    i've created .js-files for each card

    this is my app.js file (i'm simply modifying the ToolbarDemo app as you can see):
    Code:
    ToolbarDemo = new Ext.Application({
        name: "ToolbarDemo",
    
    
        launch: function() {
            this.views.viewport = new this.views.Viewport();
            this.views.homecard = this.views.viewport.getComponent('home');
            
            
            this.views.usersList = this.views.teamcard.down('#usersList');
            this.views.usersForm = this.views.teamcard.down('#usersForm');
            
        }
    });
    and this is my viewport.js:
    Code:
    ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
        fullscreen: true,
    
    
        initComponent: function() {
            Ext.apply(this, {
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                items: [
                    { xtype: 'homecard', id: 'home' },
                    { xtype: 'ideascard' },
                    { xtype: 'teamcard' },
                    { xtype: 'brandbookcard' },
                    { xtype: 'morecard' }
                   
                ]
            });
            ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
        }
    });
    So far, this is the only thing i've got in my teamcard.js:
    Code:
    ToolbarDemo.views.Teamcard = Ext.extend(Ext.Panel, {
        title: "team",
        iconCls: "team1",
        fullscreen: true,
        layout: 'card',
        
        initComponent: function() {
            Ext.apply(this, {
                dockedItems: [{
                    xtype: "toolbar",
                    title: "Team"
                }]
        
               
            });
            ToolbarDemo.views.Teamcard.superclass.initComponent.apply(this, arguments);
        },
        
    });
    
    
    Ext.reg('teamcard', ToolbarDemo.views.Teamcard);
    How can i paste the other application inside this card. I'm a bit confused because the app i want to use starts with:
    Code:
     App = new Ext.Application({    name: "App",
    
    
        launch: function() {
            this.views.viewport = new this.views.Viewport();
    
    
            this.views.usersList = this.views.viewport.down('#usersList');
            this.views.usersForm = this.views.viewport.down('#usersForm');
        }
    });
    i guess i can't copy that into my new app.js file and change it to this.views.teamcard.down('#userList'),
    then start copying the code from the other app's viewport.js file into the teamcard.js file
    and copy all the files, can i?

    i'm really a beginner so excuse me if i'm asking stupid questions

    thanx in advance!

    Gert

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Vote Rating
    0
    Answers
    4
    jjerome is on a distinguished road

      0  

    Default


    Let me get this straight.

    1. You have your app, ToolbarDemo, and you want to put another app, App, inside your ToolbarDemo.views.Teamcard?
    OR
    2. Or do you want to launch another app when the user taps on the Teamcard?
    OR
    3. You want that userList functionality as the Teamcard's functionality?

    Your query is a bit confusing.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    168
    Vote Rating
    2
    Answers
    1
    GertBoers is on a distinguished road

      0  

    Default


    Yes, i expected it to be. Sorry about that...
    I want to create 1 app, ToolbarDemo in this case, and i want the Teamcard to contain a userList (with the same functionality as the example i've got). So I guess it's number 3.

    It's not just the userlist i'm having trouble with... When i watch the screencasts and read the tutorials, i get how the apps are built, but i'm having trouble combining them in a tabbar. I'm sure the answer is very easy, but i would just like to see a clean example.

    What i eventually want to achieve (it's just a demo app, so the data doesn't have to come from a server or anything yet) is the following:

    a toolbar a the bottom containing the following:
    - NEWS: a newsfeed, so i guess a list will do for the demo, and when i click an item, maybe a more detailed view.
    - IDEAS: similar to the note example (http://miamicoder.com/2011/writing-a...cation-part-1/), a list with some notes with a 'create new' button at the top right.
    - TEAM: a userlist, when a user is clicked there is a detail page. Adding users isn't really necessary.
    - BRANDS: a nested list, which leads from a list to a list with images which then leads to a bigger view/popup preview of the image.
    - MORE: eventually this will become a place where other apps can be stored, but for now this should only be a panel with some text i think... this is the least important tab.

    One more thing i eventually want to achieve: when i start the app, i want a login screen to appear (without the tabbar at the bottom) and when the login button is clicked, it should advance to the real app. Username and password don't matter yet, i just want the button redirecting me to the app itself.

    I know this is a lot, but just the setup would be nice. I already have the tabbar with the right names and icons (took me quite a while to figure out SASS), and each item of the tabbar has its own ...card.js file.

    Thanks for your reply.
    if this is too much at once, i would really appreciate if you just help me with one of the above, maybe it will help me get the rest myself...

    Gert

  4. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Vote Rating
    0
    Answers
    4
    jjerome is on a distinguished road

      0  

    Default


    First option (long):

    What you want to do for the Teamcard is add all the JS files from the UserList demo to your ToolbarDemo project, and change all the "App." signatures to "ToolbarDemo." like:

    PHP Code:
    ToolbarDemo.views.Teamcard Ext.extend(Ext.Panel, {
        
    title"team",
        
    iconCls"team1",
        
    fullscreentrue,
        
    layout'card',
        
        
    initComponent: function() {
            
    Ext.apply(this, {
                
    dockedItems: [{
                    
    xtype"toolbar",
                    
    title"Team"
                
    }],
                
    items: [
                        { 
    xtype'ToolbarDemo.views.UsersList'id'usersList' },
                        { 
    xtype'ToolbarDemo.views.UsersForm'id'usersForm' },
                ]
        
               
            });
            
    ToolbarDemo.views.Teamcard.superclass.initComponent.apply(thisarguments);
        },
        
    }); 
    Second option (I didn't test this, I just put it all together):

    You can condense all the code from the UserList demo and put it right in your Teamcard.js file.

    like:
    PHP Code:
    ToolbarDemo.views.Teamcard Ext.extend(Ext.Panel, {
        
    title"team",
        
    iconCls"team1",
        
    fullscreentrue,
        
    layout'card',
        
        
    initComponent: function() {
            
    Ext.apply(this, {
                
    dockedItems: [{
                    
    xtype"toolbar",
                    
    title"Team"
                
    }],
                
    items: [
                        { 
    xtype'ToolbarDemo.views.UsersList'id'usersList' },
                        { 
    xtype'ToolbarDemo.views.UsersForm'id'usersForm' },
                ]
        
               
            });
            
    ToolbarDemo.views.Teamcard.superclass.initComponent.apply(thisarguments);
        },
        
    });

    /**
     * THIS IS THE USER LIST
     */
    ToolbarDemo.views.UsersList Ext.extend(Ext.Panel, {
        
    initComponent: function(){
            var 
    addButtontitlebar, list;

            
    addButton = {
                
    itemId'addButton',
                
    iconCls'add',
                
    iconMasktrue,
                
    ui'plain',
                
    handlerthis.onAddAction,
                
    scopethis
            
    };

            
    titlebar = {
                
    dock'top',
                
    xtype'toolbar',
                
    title'Users',
                
    items: [ { xtype'spacer' }, addButton ]
            };

            list = {
                
    xtype'list',
                
    itemTpl'{name}',
                
    storeToolbarDemo.stores.Users,
                
    listeners: {
                    
    scopethis,
                    
    itemtapthis.onItemtapAction
                
    }
            };

            
    Ext.apply(this, {
                
    html'placeholder',
                
    layout'fit',
                
    dockedItems: [titlebar],
                
    items: [list]
            });

            
    ToolbarDemo.views.UsersList.superclass.initComponent.call(this);
        },

        
    onAddAction: function() {
            
    Ext.dispatch({
                
    controller'Users',
                
    action'newForm'
            
    });
        },

        
    onItemtapAction: function(list, indexiteme) {
            
    Ext.dispatch({
                
    controller'Users',
                
    action'editForm',
                
    indexindex
            
    });
        }
    });

    Ext.reg('ToolbarDemo.views.UsersList'ToolbarDemo.views.UsersList);



    /**
     * THIS IS THE USER CREATE/CHANGE FORM
     */
    ToolbarDemo.views.UsersForm Ext.extend(Ext.form.FormPanel, {
        
    defaultInstructions'Please enter the information above.',

        
    initComponent: function(){
            var 
    titlebarcancelButtonbuttonbarsaveButtondeleteButtonfields;

            
    cancelButton = {
                
    text'cancel',
                
    ui'back',
                
    handlerthis.onCancelAction,
                
    scopethis
            
    };

            
    titlebar = {
                
    id'userFormTitlebar',
                
    xtype'toolbar',
                
    title'Create user',
                
    items: [ cancelButton ]
            };

            
    saveButton = {
                
    id'userFormSaveButton',
                
    text'save',
                
    ui'confirm',
                
    handlerthis.onSaveAction,
                
    scopethis
            
    };

            
    deleteButton = {
                
    id'userFormDeleteButton',
                
    text'delete',
                
    ui'decline',
                
    handlerthis.onDeleteAction,
                
    scopethis
            
    };

            
    buttonbar = {
                
    xtype'toolbar',
                
    dock'bottom',
                
    items: [deleteButton, {xtype'spacer'}, saveButton]
            };

            
    fields = {
                
    xtype'fieldset',
                
    id'userFormFieldset',
                
    title'User details',
                
    instructionsthis.defaultInstructions,
                
    defaults: {
                    
    xtype'textfield',
                    
    labelAlign'left',
                    
    labelWidth'30%',
                    
    useClearIcontrue,
                    
    autoCapitalize false
                
    },
                
    items: [
                    {
                        
    name 'name',
                        
    label'Name',
                        
    autoCapitalize true
                    
    },
                    {
                        
    xtype'ToolbarDemo.views.ErrorField',
                        
    fieldname'name',
                    },
                    {
                        
    name'email',
                        
    label'Email',
                        
    xtype'emailfield',
                        
    placeHolder'address@example.com'
                    
    },
                    {
                        
    xtype'ToolbarDemo.views.ErrorField',
                        
    fieldname'email'
                    
    },
                    {
                        
    name'phone',
                        
    label'Phone',
                        
    placeHolder'xxx-xxx-xxxx'
                    
    },
                    {
                        
    xtype'ToolbarDemo.views.ErrorField',
                        
    fieldname'phone',
                    },
                ]
            };

            
    Ext.apply(this, {
                
    scroll'vertical',
                
    dockedItems: [ titlebarbuttonbar ],
                
    items: [ fields ],
                
    listeners: {
                    
    beforeactivate: function() {
                        var 
    deleteButton this.down('#userFormDeleteButton'),
                            
    saveButton this.down('#userFormSaveButton'),
                            
    titlebar this.down('#userFormTitlebar'),
                            
    model this.getRecord();

                        if (
    model.phantom) {
                            
    titlebar.setTitle('Create user');
                            
    saveButton.setText('Create');
                            
    deleteButton.hide();
                        } else {
                            
    titlebar.setTitle('Update user');
                            
    saveButton.setText('Update');
                            
    deleteButton.show();
                        }
                    },
                    
    deactivate: function() { this.resetForm(); }
                }
            });

            
    ToolbarDemo.views.UsersForm.superclass.initComponent.call(this);
        },

        
    onCancelAction: function() {
            
    Ext.dispatch({
                
    controller'Users',
                
    action'index'
            
    });
        },

        
    onSaveAction: function() {
            var 
    model this.getRecord();

            
    Ext.dispatch({
                
    controller'Users',
                
    action : (model.phantom 'save' 'update'),
                
    data this.getValues(),
                
    record model,
                
    form this
            
    });
        },

        
    onDeleteAction: function() {
            
    Ext.Msg.confirm("Delete this user?""", function(answer) {
                if (
    answer === "yes") {
                    
    Ext.dispatch({
                        
    controller'Users',
                        
    action 'remove',
                        
    record this.getRecord()
                    });
                }
            }, 
    this);
        },

        
    showErrors: function(errors) {
            var 
    fieldset this.down('#userFormFieldset');
            
    this.fields.each(function(field) {
                var 
    fieldErrors errors.getByField(field.name);

                if (
    fieldErrors.length 0) {
                    var 
    errorField this.down('#'+field.name+'ErrorField');
                    
    field.addCls('invalid-field');
                    
    errorField.update(fieldErrors);
                    
    errorField.show();
                } else {
                    
    this.resetField(field);
                }
            }, 
    this);
            
    fieldset.setInstructions("Please amend the flagged fields");
        },

        
    resetForm: function() {
            var 
    fieldset this.down('#userFormFieldset');
            
    this.fields.each(function(field) {
                
    this.resetField(field);
            }, 
    this);
            
    fieldset.setInstructions(this.defaultInstructions);
            
    this.reset();
        },

        
    resetField: function(field) {
            var 
    errorField this.down('#'+field.name+'ErrorField');
            
    errorField.hide();
            
    field.removeCls('invalid-field');
            return 
    errorField;
        }
    });

    Ext.reg('ToolbarDemo.views.UsersForm'ToolbarDemo.views.UsersForm);


    /**
     * THIS IS THE STORE
     */
    ToolbarDemos.stores.Users = new Ext.data.Store({
        
    model'User',
        
    autoLoadtrue
    });



    /**
     * THIS IS THE MODEL FOR THE STORE
     */
    ToolbarDemo.models.User Ext.regModel('User', {
        
    fields: [
            {
                
    name'id',
                
    type'int'
            
    }, {
                
    name'name',
                
    type'string'
            
    }, {
                
    name'email',
                
    type'string'
            
    }, {
                
    name'phone',
                
    type'string'
            
    }
        ],

        
    validations: [
            {
                
    type'presence',
                
    name'name'
            
    }, {
                
    type'format',
                
    name'email',
                
    matcher: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
                
    message'must be a valid email'
            
    }
        ],

        
    proxy: {
            
    type'localstorage',
            
    id'sencha-users'
        
    }
    });

    /**
     * THIS IS THE CONTROLLER
     */
    Ext.regController('Users', {
        
    storeToolbarDemo.stores.Users,

        
    index: function() {
            
    ToolbarDemo.views.viewport.reveal('usersList');
        },

        
    newForm: function() {
            var 
    model = new ToolbarDemo.models.User();
            
    ToolbarDemo.views.usersForm.load(model);
            
    ToolbarDemo.views.viewport.reveal('usersForm');
        },

        
    editForm: function(params) {
            var 
    model this.store.getAt(params.index);
            
    ToolbarDemo.views.usersForm.load(model);
            
    ToolbarDemo.views.viewport.reveal('usersForm');
        },

        
    save: function(params) {
            
    params.record.set(params.data);
            var 
    errors params.record.validate();

            if (
    errors.isValid()) {
                
    this.store.create(params.data);
                
    this.index();
            } else {
                
    params.form.showErrors(errors);
            }
        },

        
    update: function(params) {
            var 
    tmpUser = new ToolbarDemo.models.User(params.data),
                
    errors tmpUser.validate();

            if (
    errors.isValid()) {
                
    params.record.set(params.data);
                
    params.record.save();
                
    this.index();
            } else {
                
    params.form.showErrors(errors);
            }
        },

        
    remove: function(params) {
            
    this.store.remove(params.record);
            
    this.store.sync();
            
    this.index();
        }

    }); 
    I hope this helps a little. I'm willing to help more on this if you still have trouble.

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    168
    Vote Rating
    2
    Answers
    1
    GertBoers is on a distinguished road

      0  

    Default


    (i've deleted some posts because i was talking gibberish)

    I've tried the first method... This is the result:

    what i had: http://gertboers.be/forum/forumstart/

    what i have now: http://gertboers.be/forum/firstmethod/
    it just sends me to one of the cards... but the toolbar is missing. I think there's something wrong with my links.
    Should i change App.views.Viewport to ToolbarDemo.views.Teamcard or also to the .Viewport? in your reply (second method) you left it like this:
    Code:
    ToolbarDemo.views.viewport.reveal
    so i'm guessing my thinking is wrong.

    I want to try the second method, but i think you've forgotten the reveal function if i'm not mistaken.

    Thanks for your help!

  6. #6
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Vote Rating
    0
    Answers
    4
    jjerome is on a distinguished road

      0  

    Default


    Yeah that was a mistake. If you don't want to use the .reveal() you can just use setActiveItem(target) because that is what reveal() calls anyway

Thread Participants: 1