1. #1
    Sencha User
    Join Date
    Dec 2010
    Location
    Toronto
    Posts
    62
    Vote Rating
    1
    thomsonzh is on a distinguished road

      0  

    Default How to submit tabpanel items?

    How to submit tabpanel items?


    I have an tabpanel. when I click submit, how can I submit all items to the server like a form?

    panel = new Ext.TabPanel({...

    panel.get...submit...
    Please advise.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    I assume you have a formPanel inside each tab?

    If that is the case, then upon clicking submit, do the following:

    - get each form
    - loop through each form and get their values
    - combine these values into a param object
    - send this as your parameters on an AJAX call

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Location
    Toronto
    Posts
    62
    Vote Rating
    1
    thomsonzh is on a distinguished road

      0  

    Default


    Thanks willigogs, I am looking for a way to submit tabPanel like form. If I create tabPanel like

    panel = new Ext.FormPanel({
    items: [
    {
    xtype: "tabpanel",
    activeTab: 0,
    .......
    panel.getForm().submit({ url: 'myData.aspx?action=' + action , success: success, failure: failure });
    It is working. But this way just working in my Firefox. IE and Chrome is not working.
    The reason maybe this tabpanel built in the other FormPanel. And the FormPanel build in a win form.
    If I create panel as FormPanel, the win form can not be pop up. Maybe I need fix how to make win form popup when I create panel as FormPanel.
    Anyway, the reason I change formPanel as TabPanel is that tabPanel can popup win form with FF,IE and chrome. FormPanel just can use at FF.

    Please advise.
    Many thanks,

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Quote Originally Posted by thomsonzh View Post
    The reason maybe this tabpanel built in the other FormPanel. And the FormPanel build in a win form.
    If I create panel as FormPanel, the win form can not be pop up. Maybe I need fix how to make win form popup when I create panel as FormPanel.
    Anyway, the reason I change formPanel as TabPanel is that tabPanel can popup win form with FF,IE and chrome. FormPanel just can use at FF.
    Sorry, but would you be able to clarify the above, as I'm not following

    The above code you supplied should work, therefore I can only assume you're doing something unorthodox?

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Location
    Toronto
    Posts
    62
    Vote Rating
    1
    thomsonzh is on a distinguished road

      0  

    Default


    I got the error "Object doesn't support property or method 'onRemove' ", when I change tabPanel to FormPanel. This is IE pop up windows error,but firefox is OK.
    Any ideas?

  6. #6
    Sencha User
    Join Date
    Dec 2010
    Location
    Toronto
    Posts
    62
    Vote Rating
    1
    thomsonzh is on a distinguished road

      0  

    Default Answer about this issue

    Answer about this issue


    I found the answer below.
    Its not a possible put FormPanel in TabPanel which be in another FormPanel.

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    I didn't even realise you were trying to put a form inside another form

    This isn't supported even by startdard HTML form elements, regardless of whether you're attempting this within EXTJS

  8. #8
    Sencha User
    Join Date
    Dec 2010
    Location
    Toronto
    Posts
    62
    Vote Rating
    1
    thomsonzh is on a distinguished road

      0  

    Default


    lol, but I have to face to how to submit TabPanel items to backend code. The problem stay here.
    Maybe I have to use your first solution get each item value as parameters ajax call back.
    Do you have any other smart solution for that?
    Cheers

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    If you simply need to submit a form where the fields are shown on separate tabs, then something like the following should work:

    Code:
    var myTabs = new Ext.TabPanel({
        activeTab: 0,
        plain:true,
        defaults:{autoScroll: true, padding:10, border:false},
        items:[{
                title: 'Tab 1',
                layout:'form',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field 1',
                    name: 'field1'
                }]
            },{
                title: 'Tab 2',
                layout:'form',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Field 2',
                    name: 'field2'
                }]
            }
        ]
    });
        
    var myForm = new Ext.form.FormPanel({
        items: myTabs,
        layout:'fit',
        buttons: [{
            text: 'Submit',
            handler: function() {
                var f = form.getForm();
                if(f.isValid()) {
                    f.submit({
                        url: 'yoururl.url',
                        success: function(form, action) {
                            console.log('Success', form, action)
                        },
                        failure: function(form, action) {
                            console.log('Fail', form, action)    
                        }
                    })
                }
            }    
        }]
    });

  10. #10
    Sencha User
    Join Date
    Dec 2010
    Location
    Toronto
    Posts
    62
    Vote Rating
    1
    thomsonzh is on a distinguished road

      0  

    Default


    Thanks for your code.
    I can not put my TabPanel to FormPanel. Sorry I am not clarify my code structure.
    My structure is page show employee list in a grid. When I click the grid row, this employee detail information show in a pop up windows. This window hold a FormPanel(Mutiple tab). One of the FormPanel's tab, I create another grid( named grid1) and tabpanel(named tabpanel1). When I click grid1, the grid1 detailed information will fill to the tabpanel1. When I modify /new this tabpanel1, I need to submit the information to server.
    The problem is how to submit this sub tabpanel information to the server side?
    My main FormPanel(hold by win) is using the code similar like you post.
    If I create tabPanel1 as FormPanel, I think we can post back too. Firefox is working.
    But If the FormPanel built in another FormPanel tab and holding by a pop up window, the window can be pop up in IE and Chrome. Firefox is fine.

    IE and Chrome get "Object doesn't support property or method 'onRemove' " error.

    Any suggestions, many thanks,

Thread Participants: 1