1. #31
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Quote Originally Posted by ingkat View Post
    How to place the boxWrap in each tab on your example. Thank in advance
    Can you elaborate on your question? What boxWrap?

  2. #32
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Quote Originally Posted by methodz View Post
    Any idea on how to get this concept to work with a layout dialog? Even just making the outer tags "form" tags should work...
    You should get the reordering part to work by replacing "dialog.body" with "dialog.getLayout().getRegion("center").bodyEl"
    and "dialog.bwrap" with "dialog.getLayout().getRegion("center").el" in the render method of Ext.form.DialogForm

    Then you have at least the HTML structure right. What's missing is the creation of the tabs. "dialog.initTabs();" will not work on a LayoutDialog so you have to figure out, how to create center panels of a BorderLayout from existing markup after the BorderLayout was rendered. I cannot help you with that right now (on the road, no proper setup for developing)

    As I mentioned earlier in this thread: Ext 2.0 will have a far superior way to make multi-tabbed forms that also can be placed in the successor of LayoutDialogs. So if you can wait for Ext 2.0 (or buy a Support subscription with Ext 2.0 SVN included) you could save you this trouble.

  3. #33
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Quote Originally Posted by ccquiles View Post
    Any idea how to apply this to an editable grid? I would like to have an editable grid that spans mutliple tabs... I have thought about using hide and show to hide columns on the activate event of a specific tab, but there has got to be some way to use these ideas towards an easier solution... any ideas?

    Thanks!
    One solution would be - as you suggested - to place the tabbar right above the editable grid and to just use the tabs as buttons to select the column-set that should be activated. The grid is not a child of the tab-component so it stays visible all the time. The body-height of the tab component is 0px so it is invisible.

    Another solution would be to have multiple editable grids - one for each tab. They all use the same DataSource but different CoumnModels.

    The first solution would probably be the preferred one because multiple grids on one page have proven to be a performance killer.

  4. #34
    Ext User
    Join Date
    Jun 2007
    Posts
    26
    Vote Rating
    0
    methodz is on a distinguished road

      0  

    Default Can't wait!!

    Can't wait!!


    Quote Originally Posted by dj View Post
    You should get the reordering part to work by replacing "dialog.body" with "dialog.getLayout().getRegion("center").bodyEl"
    and "dialog.bwrap" with "dialog.getLayout().getRegion("center").el" in the render method of Ext.form.DialogForm

    Then you have at least the HTML structure right. What's missing is the creation of the tabs. "dialog.initTabs();" will not work on a LayoutDialog so you have to figure out, how to create center panels of a BorderLayout from existing markup after the BorderLayout was rendered. I cannot help you with that right now (on the road, no proper setup for developing)

    As I mentioned earlier in this thread: Ext 2.0 will have a far superior way to make multi-tabbed forms that also can be placed in the successor of LayoutDialogs. So if you can wait for Ext 2.0 (or buy a Support subscription with Ext 2.0 SVN included) you could save you this trouble.
    I would buy a subscription just for that if it was anywhere close to stable or usable, unfortunately I am producing an application that requires tighter stability. When it's final I can use it

    I don't want to change the center element to a form tag, i need to if possible overload the LayoutDialog class itself and change its parent outer tags to be form tags, I think that'd work, then I can serialize the entire form and post via Ext.ajax or something, problem is I need the collapsible west region in the particular thing I'm working on, and it needs to contain form elements... if I could figure out how to create 4 seperate forms (one per tab) and serialize / concatenate them all that'd work too.

  5. #35
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Quote Originally Posted by methodz View Post
    I would buy a subscription just for that if it was anywhere close to stable or usable, unfortunately I am producing an application that requires tighter stability. When it's final I can use it
    I'm using Ext 2.0 in production right now and am happy with it. But you are right, stability of all SVN builds is not guaranteed and I have to carefully choose which SVN build to use.

    Quote Originally Posted by methodz View Post
    I don't want to change the center element to a form tag, i need to if possible overload the LayoutDialog class itself and change its parent outer tags to be form tags, I think that'd work, then I can serialize the entire form and post via Ext.ajax or something, problem is I need the collapsible west region in the particular thing I'm working on, and it needs to contain form elements... if I could figure out how to create 4 seperate forms (one per tab) and serialize / concatenate them all that'd work too.
    Have a look at Ext.Ajax's serializeForm method. You can use that for serializing the contents of all forms, concatenate all serialized strings with "&" delimiter and use Ext.Ajax.request or Ext.data.Connection.request to send the form contents to the server.

  6. #36
    Ext User
    Join Date
    Jun 2007
    Posts
    66
    Vote Rating
    0
    cutigersfan is on a distinguished road

      0  

    Default Add Grid too?

    Add Grid too?


    I've been using this and it works great. However I need to add a grid to one panel. So far I'm not good enough with extjs to do this. Can anyone help me with this exercise?

    I know this will throw a wrench in the submit, but I can deal with that if someone can help get it displayed.

    Thanks

  7. #37
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    287
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Hej everybody,

    I solved having tabs in a form problem by creating multiple forms (Actually in different ContentPanels). The trick is to keep track of all these forms, so I use a warpper/bookkeeper object, which holds a forms array with all the (sub)forms.

    Then, when the Ok/Save button is clicked, I gather the data of all forms in the getValues method in the data variable, and post it as a single data string in JSON format.
    (Just to be able to get rid of all the different Struts forms and use a generic Struts form)

    Code:
    getValues: function(asString) {
            var values = this.forms[0].getValues(asString);
            for(var i=1; i<this.forms.length; i++) {
                values = Ext.apply(values, this.forms[i].getValues(asString));
            }
            return values;
        },
        onButtonOk : function(btn, target) {
            var isValid = true;
            for(var i=1; i<this.forms.length; i++) {
                if(this.forms[i].isValid() == false)
                  isValid = false;
            }
            if(isValid == false) 
               return;
            
            var data = Ext.util.JSON.encode({primaryFile: this.primaryFile, 
                            record: Ext.util.JSON.encode(this.getValues(false))
            });
            this.forms[0].submit({
                    url: this.url , 
                    method: 'POST',
                    params : { request : 'save', data: data },
                    waitMsg:'Saving...',
                    reset: false,
                    failure: function(form, action) {
                       ...
                    },
                    success: function(form, action) {
                        ...
                    }
            }else{
                Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
            }
        }
    For every form I created, I unhook the default submit function:

    Code:
    var form = new Ext.form.Form({...});
    form.un("submit", form.onSubmit, form);
    Last edited by Ronaldo; 10 Sep 2007 at 12:32 PM. Reason: I gave myself thumbs down actually

  8. #38
    Ext User
    Join Date
    Apr 2007
    Posts
    71
    Vote Rating
    0
    nbinder is on a distinguished road

      0  

    Default


    I know that this will change in Ext2, but I am currently using DialogForm in my project, which works fine so far (thank you...)

    Now I need to extend the project, and have to put a grid in one of the tabs (instead of form fields).
    This is impossible because the tab containers don't have unique ids (and you can only add form fields, not divs).

    Has anyone got advices how to solve the problem? All I need is to create a tab containing an div with an unique id instead of form fields, something like:

    dialog.tab({title:'myGridHere'}, new Ext.element('div','thisisthegrid_id'));

  9. #39
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Quote Originally Posted by nbinder View Post
    I know that this will change in Ext2, but I am currently using DialogForm in my project, which works fine so far (thank you...)

    Now I need to extend the project, and have to put a grid in one of the tabs (instead of form fields).
    This is impossible because the tab containers don't have unique ids (and you can only add form fields, not divs).

    Has anyone got advices how to solve the problem? All I need is to create a tab containing an div with an unique id instead of form fields, something like:

    dialog.tab({title:'myGridHere'}, new Ext.element('div','thisisthegrid_id'));

    All you need to do is insert a div with the class "x-dlg-tab" directly in the body of the dialog. BasicDialog creates a tab for your div then.

    Try replace the normal call to form.render() with
    Code:
    var body = form.getDialog(true).body;
    var gridDiv = body.createChild({tag:"div",cls:"x-dlg-tab",title:"tab title"});
    form.render(document.body):
    I haven't tried that code myself - don't have a Ext 1.x handy at the moment - but theoretically that's all it takes.

  10. #40
    Ext User
    Join Date
    Apr 2007
    Posts
    71
    Vote Rating
    0
    nbinder is on a distinguished road

      0  

    Default


    Thank you very much, that did the trick!

    If I now find a way to reorder the tabs (the div tab appears as first tab), everything's fine...