1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    0
    soniamru is on a distinguished road

      0  

    Default Unanswered: Back button not working gives error [urgent]

    Unanswered: Back button not working gives error [urgent]


    Hi,

    I am working on a MVC pattern. I have developed a screen having 4 panels in it. At a time only 1 panel is been set active with each panel having a back and next button. When my active panel is panel1 it should load my previous view I tried using Ext.dispatch and even ownerCt.setActiveItem. Ext.dispatch gives me "Uncaught TypeError: Cannot read property 'isComponent' of undefined" in chrome and "TypeError: Result of expression 'config' [undefined] is not an object" in safari whereas ownerCt.setActiveItem gives "Uncaught TypeError: Object [object Object] has no method 'setActiveItem'" and "TypeError: Result of expression 'this.layout.setActiveItem' [undefined] is not a function" in chrome and safari respectively.


    Code:
    mye01.views.Form_across_4_Panels = Ext.extend(Ext.Panel, {
    id: 'mainForm',
    layout: 'auto',
    scroll: 'vertical', 
    labelWidth: '120px',
    
    previousView: undefined,
    // constructor params
    previousCard: undefined,
    initComponent: function() {
    console.log('THIS:');
    console.log(this);
    this.buildItems();
    previousCard = this.previousView;
    mye01.views.Form_across_4_Panels.superclass.initComponent.call(this);
    },
    buildItems: function() {
    var item1 = {
    flex: 1,
    xtype: 'panel',
    id: 'panel1',
    bodyPadding: 0,
    scroll: 'vertical',
    items: [{
    xtype: 'textfield',
    label: 'Name',
    required: true,
    //maxLength:5,
    labelWidth: '30%',
    placeHolder: 'Enter your name'
    }, {
    xtype: 'textfield',
    label: 'Phone Number',
    required: true,
    placeHolder: 'Enter Contact Number'
    }, {
    xtype: 'emailfield',
    label: 'Email',
    required: true,
    placeHolder: 'Enter EmailId'
    }]
    }
    var item2 = 
    {
    flex: 1,
    xtype: 'panel',
    id: 'panel2',
    bodyPadding: 0,
    scroll: 'vertical',
    items: [{
    xtype: 'textfield',
    label: 'Location',
    placeHolder: 'Enter Location',
    }, {
    xtype: 'textfield',
    label: 'Title',
    placeHolder: 'Enter title',
    }, {
    xtype: 'textfield',
    label: 'Designation',
    placeHolder: 'enter Designation',
    }, 
    {
    xtype: 'selectfield',
    label: 'Ranking',
    required: true,
    options: [{
    text: 'First',
    value: 'first'
    }, {
    text: 'Second',
    value: 'second'
    }, {
    text: 'Third',
    value: 'third'
    }]
    }, 
    ]
    }
    var item3 = 
    {
    flex: 1,
    xtype: 'panel',
    id: 'panel3',
    bodyPadding: 0,
    scroll: 'vertical',
    items: [{
    xtype: 'textfield',
    label: 'Education',
    required: true,
    placeHolder: 'Enter Education'
    }, {
    xtype: 'textfield',
    label: 'Institute of Education',
    placeHolder: 'Enter Institute'
    }, {
    xtype: 'emailfield',
    label: 'Alternative Email Id',
    }]
    }, 
    
    var item4 = 
    {
    flex: 1,
    xtype: 'panel',
    id: 'panel4',
    bodyPadding: 0,
    baseCls: 'network-add',
    scroll: 'vertical',
    items: [{
    xtype: 'textfield',
    label: 'Hobbies',
    placeHolder: 'Enter Hobbies',
    }, {
    xtype: 'radiofield',
    label: 'Working Platforms Available',
    items: [{
    name: 'radio_button',
    label: 'Working Platforms',
    value: 'Working Platforms',
    id: 'radio7'
    }]
    }, ]
    } ]
    }, 
    ]
    }
    
    var formBase = new Ext.form.FormPanel({
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    fullscreen: true,
    layout: 'card',
    activeItem: 0,
    scroll: 'vertical',
    standardSubmit: false,
    id: 'form1',
    items: [item1, item2, item3, item4],
    dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
    text: 'PREV',
    ui: 'back',
    id: 'back-btn',
    handler: function(id, newCard, oldCard) {
    var backbutton_Text = Ext.getCmp('back-btn').getText();
    //console.log("BakButton"+backbutton_Text)
    if (backbutton_Text == 'PREV') {
    /*OwnerCt.setActiveItem as below doesn't work.....
    
    this.ownerCt.setActiveItem(this.previousView, {
    type: 'slide',
    reverse: 'true',
    scope: this,
    after: function() {
    this.destroy();
    }
    });
    
    Neither do Ext.dispatch as below works
    
    Ext.dispatch({
    controller: mye01.controllers.ProfileController,
    action: 'showProfileDetails'
    });
    */
    }
    Ext.getCmp('form1').layout.prev({
    type: 'slide',
    reverse: true
    });
    var panel_id = Ext.getCmp('form1').getActiveItem().getId();
    if (panel_id == "panel3") {
    Ext.getCmp('next_btn').show();
    Ext.getCmp('submit_btn').hide();
    }
    if (panel_id == "panel1") {
    Ext.getCmp('back-btn').setText("PREV");
    }
    }
    }, {
    xtype: 'spacer'
    }, 
    {
    text: 'NEXT',
    id: 'next_btn',
    ui: 'forward',
    handler: function(id, newCard, oldCard) {
    Ext.getCmp('form1').layout.next({
    type: 'slide',
    reverse: true
    });
    var panel_id = Ext.getCmp('form1').getActiveItem().getId();
    if (panel_id == "panel4") {
    Ext.getCmp('next_btn').hide();
    Ext.getCmp('submit_btn').show();
    }
    if (panel_id == "panel2") {
    Ext.getCmp('back-btn').setText("Back");
    }
    }
    }
    ]
    }, {
    xtype: 'panel',
    dock: 'bottom',
    style: "margin-bottom:46px",
    layout: {
    type: 'hbox',
    pack: 'center'
    },
    items: [{
    xtype: 'button',
    id: 'submit_btn',
    text: 'SUBMIT',
    ui: 'confirm',
    hidden: true,
    scope: this
    }, {
    xtype: 'button',
    dock: 'bottom',
    text: 'CANCEL',
    ui: 'decline',
    scope: this
    }]
    }
    ]
    })
    }
    });
    
    


    Please help me.

    Thanks in advance.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Please edit your code and wrap in code tags so that it is readable.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    0
    soniamru is on a distinguished road

      0  

    Default


    Hi Mitchell,
    I have edited the code please help me out.

Thread Participants: 1