Results 1 to 6 of 6

Thread: Adding an object inside a tabpanel

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    50

    Default Adding an object inside a tabpanel

    I've been wrecking my brain over this for weeks and nothing ever seems to work.

    Basically I'm trying to combine two examples I found online:

    Advanced tabs
    http://dev.sencha.com/deploy/ext-4.0.../tabs-adv.html

    Ext Direct and Grid
    http://docs.sencha.com/ext-js/4-0/#!/guide/direct_grid_pt1

    I was able to get both tutorials working separately, but when attempting to combine them, I have no errors, but the screen is always blank.

    My code looks like this, where I want the first tab to include the grid:
    Code:
    Ext.application({
        name: 'RevEx',
    
        appFolder: 'app',
    
        launch: function(){
            var tabs2 = Ext.createWidget('tabpanel', {
                renderTo: document.body,
                activeTab: 0,
                plain: true,
                requires: [
                    'RevEx.view.grid2'
                ],
                defaults :{
                    autoScroll: true,
                    bodyPadding: 10
                },
                items: [{
                    title: 'Ajax Tab 1'
                    xType: 'grid2'
                },{
                    title: 'Ajax Tab 1',
                    loader: {
                        url: 'ajax1.htm',
                        contentType: 'html',
                        loadMask: true
                    },
                    listeners: {
                        activate: function(tab) {
                            tab.loader.load();
                        }
                    }
                },{
                    title: 'Ajax Tab 2',
                    loader: {
                        url: 'ajax2.htm',
                        contentType: 'html',
                        autoLoad: true,
                        params: 'foo=123&bar=abc'
                    }
                },{
                    title: 'Event Tab',
                    listeners: {
                        activate: function(tab){
                            alert(tab.title + ' was activated.');
                        }
                    },
                    html: "I am tab 4's content. I also have an event listener attached."
                },{
                    title: 'Disabled Tab',
                    disabled: true,
                    html: "Can't see me cause I'm disabled"
                }
                ]
            });
        }
    });
    My grid class looks like this:
    (I've modified the grid to hold my own data, and on its own it was working just fine.)
    Code:
    Ext.define('RevEx.view.grid2', {
        extend: 'Ext.window.Window',
        alias: 'widget.grid',
    
        title : 'Grid',
        layout : 'fit',
        autoShow : true,
        requires :[
        'Ext.form.field.File',
        'Ext.form.Panel',
        'Ext.window.MessageBox'
        ],
    
    
    
        initComponent: function() {
            Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
    
            Ext.define('PersonalInfo', {
                extend:'Ext.data.Model',
                fields:[
                    {name:'id', type:'int'},
                    'fname',
                    'lname',
                    'email',
                    'phone',
                    'client_manager_id',
                    'calorie_goal',
                    'burn_per_week',
                    'starting_date',
                    'starting_weight'
                ],
                proxy:{
                    type:'direct',
                    api:{
                        create:QueryDatabase.createRecord,
                        read:QueryDatabase.getUsers,
                        update:QueryDatabase.updateRecords,
                        destroy:QueryDatabase.destroyRecord
                    }
                }
            });
    
            var store = Ext.create('Ext.data.Store', {
                model:'PersonalInfo',
                autoLoad:true
            });
    
            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor:1,
                autoCancel:false
            });
    
            var alphaSpaceTest = /^[-\sa-zA-Z]+$/;
    
            Ext.apply(Ext.form.field.VTypes, {
                //  vtype validation function
                alphaSpace:function (val, field) {
                    return alphaSpaceTest.test(val);
                },
                alphaSpaceText:'Not a valid state. Must not contain numbers.',
                alphaSpaceMask:/^[-\sa-zA-Z]+$/
            });
    
            // create the Grid
            var grid = Ext.create('Ext.grid.Panel', {
                height:450,
                width:700,
                cls:'grid',
                title:'RevEx Users',
                store:store,
                columns:[
                    {
                        dataIndex:'id',
                        width:50,
                        text:'ID'
                    },
                    {
                        dataIndex:'fname',
                        flex:1,
                        text:'First Name',
                        allowBlank:false,
                        field:{
                            type:'textfield',
                            allowBlank:false
                        }
                    }/*, {
                     dataIndex: 'lname',
                     flex: 1.3,
                     text: 'Last Name',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     }, {
                     dataIndex: 'email',
                     flex: 0.8,
                     text: 'email',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     },{
                     dataIndex: 'phone',
                     flex: 1.3,
                     text: 'Phone number',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     },{
                     dataIndex: 'client_manager_id',
                     flex: 1.3,
                     text: 'Client Manager ID',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     },{
                     dataIndex: 'calorie_goal',
                     flex: 1.3,
                     text: 'Calorie Goal',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     },{
                     dataIndex: 'burn_per_week',
                     flex: 1.3,
                     text: 'Burn Per Week',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     },{
                     dataIndex: 'starting_weight',
                     flex: 1.3,
                     text: 'Starting Weight',
                     allowBlank: false,
                     field: {
                     type: 'textfield',
                     allowBlank: false
                     }
                     }*/
                ],
                renderTo:Ext.getBody(),
                plugins:[
                    rowEditing
                ],
                dockedItems:[
                    {
                        xtype:'toolbar',
                        dock:'bottom',
                        //creating, add items
                        items:[
                            {
                                iconCls:'add',
                                text:'Add',
                                handler:function () {
                                    rowEditing.cancelEdit();
                                    // create a blank record from PersonalInfo
                                    var record = Ext.create('PersonalInfo');
                                    //insert at top
                                    store.insert(0, record);
                                    //edit at row 0
                                    rowEditing.startEdit(0, 0);
                                }
                            },
                            {
                                iconCls:'delete',
                                text:'Delete',
                                handler:function () {
                                    rowEditing.cancelEdit();
                                    var sm = grid.getSelectionModel();
                                    Ext.Msg.show({
                                        title:'Delete Record?',
                                        msg:'You are deleting a record permanently, this cannot be undone. Proceed?',
                                        buttons:Ext.Msg.YESNO,
                                        icon:Ext.Msg.QUESTION,
                                        fn:function (btn) {
                                            if (btn === 'yes') {
                                                store.remove(sm.getSelection());
                                                store.sync();
                                            }
                                        }
                                    });
                                }
                            }
                        ]
                    }
                ]
            });
    
            grid.on('edit', function (e) {
                e.record.save();
            });
    
            //////////
    
            var msg = function (title, msg) {
                Ext.Msg.show({
                    title:title,
                    msg:msg,
                    minWidth:200,
                    modal:true,
                    icon:Ext.Msg.INFO,
                    buttons:Ext.Msg.OK
                });
            };
    
            var fibasic = Ext.create('Ext.form.field.File', {
                renderTo:'fi-basic',
                width:400,
                hideLabel:true
            });
    
            Ext.create('Ext.button.Button', {
                text:'Get File Path',
                renderTo:'fi-basic-btn',
                handler:function () {
                    var v = fibasic.getValue();
                    msg('Selected File', v && v != '' ? v : 'None');
                }
            });
    
            Ext.create('Ext.form.field.File', {
                renderTo:'fi-button',
                buttonOnly:true,
                hideLabel:true,
                listeners:{
                    'change':function (fb, v) {
                        var el = Ext.get('fi-button-msg');
                        el.update('<b>Selected:</b> ' + v);
                        if (!el.isVisible()) {
                            el.slideIn('t', {
                                duration:200,
                                easing:'easeIn',
                                listeners:{
                                    afteranimate:function () {
                                        el.highlight();
                                        el.setWidth(null);
                                    }
                                }
                            });
                        } else {
                            el.highlight();
                        }
                    }
                }
            });
    
            Ext.create('Ext.form.Panel', {
                renderTo:'fi-form',
                width:500,
                frame:true,
                title:'File Upload Form',
                bodyPadding:'10 10 0',
    
                defaults:{
                    anchor:'100%',
                    allowBlank:false,
                    msgTarget:'side',
                    labelWidth:50
                },
    
                items:[
                    {
                        xtype:'textfield',
                        fieldLabel:'Name'
                    },
                    {
                        xtype:'filefield',
                        id:'form-file',
                        emptyText:'Select an image',
                        fieldLabel:'Photo',
                        name:'photo-path',
                        buttonText:'',
                        buttonConfig:{
                            iconCls:'upload-icon'
                        }
                    }
                ],
    
                buttons:[
                    {
                        text:'Save',
                        handler:function () {
                            var form = this.up('form').getForm();
                            if (form.isValid()) {
                                form.submit({
                                    url:'file-upload.php',
                                    waitMsg:'Uploading your photo...',
                                    success:function (fp, o) {
                                        msg('Success', 'Processed file "' + o.result.file + '" on the server');
                                    }
                                });
                            }
                        }
                    },
                    {
                        text:'Reset',
                        handler:function () {
                            this.up('form').getForm().reset();
                        }
                    }
                ]
            });
    
        }
    
    });
    If I comment out the grid code from my app.js, the tabs display correctly. What am I doing wrong?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    Can you detail the problem that exist when you combine?
    Do you mean the entire page is blank, or there is no grid in each tab, or the grid has not data?

    What is your goal?

    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    50

    Default

    The entire page is blank. I want to be able to display the grid in the first tab.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    You have a missing comma in your first set of code
    title: 'Ajax Tab 1'

    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    50

    Default

    It's still the same.

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255

    Default

    Did you look in the error console? Are there errors?

    Also, your code doesn't show how the grid is supposed to be loaded into the tab, where does this happen?

    There are a whole bunch of things that aren't quite right in your code, but let's start with the errors.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Posting Permissions

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