1. #11
    Ext User
    Join Date
    Oct 2008
    Posts
    26
    Vote Rating
    0
    DirtDog is on a distinguished road

      0  

    Default Spacing

    Spacing


    I have a question concerning spacing between items placed on the same line.

    First:

    I had another area of my application where I wanted to put several items on the same line.

    I followed jgarcia's example and managed to get this to work.

    Here's my code snippet:

    var LineHeight = 35;
    var SpaceObj = new Ext.form.Label({ text: ' ', width: 10 });
    var SetSpaceObj = new Ext.form.FieldSet({ border: false, height: LineHeight, id: 'SetSpace', items: [SpaceObj], labelWidth: 40, width: 10 });

    var LeadIdObj = new Ext.form.TextField({ fieldLabel: 'LeadId', id: 'LeadId', name: 'LeadId', readOnly: true, width: 50 });

    var ScoreObj = new Ext.form.TextField({ fieldLabel: 'Score', id: 'Score', name: 'Score', readOnly: true, width: 30 });

    var AdDateObj = new Ext.form.TextField({ fieldLabel: 'Ad Date', id: 'AdDate', name: 'AdDate', readOnly: true, width: 200 });

    var StatusObj = new Ext.form.TextField({ fieldLabel: 'Status', id: 'LeadStatus', name: 'LeadStatus', readOnly: true, width: 100 });

    var SetLeadIdObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetLeadId', items: [LeadIdObj], labelWidth: 40 });
    var SetScoreObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetScore', items: [ScoreObj], labelWidth: 40 });
    var SetAdDateObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetAdDate', items: [AdDateObj], labelWidth: 55 });
    var SetStatusObj = new Ext.form.FieldSet({border: false, height: LineHeight, id: 'SetStatus', items: [StatusObj], labelWidth: 40 });
    var LineObj = new Ext.Panel({ border: false, height: 30, id: 'LeadFormLine', items: [SetLeadIdObj, SetSpaceObj, SetScoreObj, SetAdDateObj, SetStatusObj], layout: 'column' });

    FormObj.add(LineObj);


    If you look at the screenshot you'll notice there is no spacing between the FieldSets. I thought I'd add a label with a space wrapped by a fieldset to adding some spacing. But that didn't work. I tried adding or increasing the width on the space label and the space fieldset but no joy.

    Any ideas?

    Ed
    Attached Images

  2. #12
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Using a fieldset that many times is very wasteful. The example from my book was just to learn about fieldsets. you should be using containers. I'm examining your code and will get back to you.

  3. #13
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    try:
    Code:
    new Ext.Window({
        height   : 150,
        width    : 550,
        layout   : 'column',
        defaults : {
            width         : 100,
            labelWidth  : 40,
            defaultType : 'field',
            defaults      : { //yeah you can do this too!
                width : 75
            }
        },
        items  : [
           {
                xtype      : 'container',
                layout     : 'form',
                items      : {
                    fieldLabel : 'LeadId',
                    width      : 50
                }
           },
           {
                xtype      : 'container',
                layout     : 'form',
                items      : {
                    fieldLabel : 'Score',
                    width      : 50
                }
           },
           {
                xtype         : 'container',
                layout        : 'form',
                width         : 175,
                labelWidth  : 50,
                items         : {
                    fieldLabel : 'Ad Date',
                    width      : 110
                }
           },
           {
                xtype      : 'container',
                layout     : 'form',
                width      : 160,
                items      : {
                    fieldLabel : 'Status',
                    width      : 75
                }
            }
        ]
    }).show()
    Btw, most english teachers would say runon sentences are a no-no for the written language. The same goes for code.

  4. #14
    Ext User
    Join Date
    Oct 2008
    Posts
    26
    Vote Rating
    0
    DirtDog is on a distinguished road

      0  

    Default Containers = Errors

    Containers = Errors


    Garcia,

    I tried using containers based on your original example. I ran into exceptions deep inside the ExtJs code. In fact I tried 3-4 different variations and I kept running into exceptions. I didn't have the desire to spend several hours debugging the ExtJs code.

    Once I got the code working with FieldSets I was relieved.

    I appreciate your new example, but I'm reluctant to change the code because (I don't want to seem like a complainer but) it takes me several hours to figure out a solution to what I think I should be able to do in a short time frame.


    Ed

  5. #15
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    fieldsets extend panel, which is heavy. To achieve that layout in a better-performing way i would say the container is the best examle.

    This stuff will get easier for you once you get layouts and stuff down pat.

    have you see my container and layout screencasts?

  6. #16
    Ext User
    Join Date
    Oct 2008
    Posts
    26
    Vote Rating
    0
    DirtDog is on a distinguished road

      0  

    Default Exceptions

    Exceptions


    Garcia,

    I changed my code to use containers per your suggestion. I run into an exception.

    Update code to use Containers:

    var LineHeight = 35;
    var SpaceObj = new Ext.form.Label({ text: ' ', width: 10 });
    var SetSpaceObj = new Ext.Container({ border: false, height: LineHeight, id: 'SetSpace', items: [SpaceObj], width: 10 });

    var LeadIdObj = new Ext.form.TextField({ fieldLabel: 'LeadId', id: 'LeadId', name: 'LeadId', readOnly: true, width: 50 });

    var ScoreObj = new Ext.form.TextField({ fieldLabel: 'Score', id: 'Score', name: 'Score', readOnly: true, width: 50 });

    var AdDateObj = new Ext.form.TextField({ fieldLabel: 'Ad Date', id: 'AdDate', name: 'AdDate', readOnly: true, width: 110 });

    var StatusObj = new Ext.form.TextField({ fieldLabel: 'Status', id: 'LeadStatus', name: 'LeadStatus', readOnly: true, width: 175 });

    var SetLeadIdObj = new Ext.Container({height: LineHeight, id: 'SetLeadId', items: [LeadIdObj], layout: 'form' });
    var SetScoreObj = new Ext.Container({ height: LineHeight, id: 'SetScore', items: [ScoreObj], layout: 'form' });
    var SetAdDateObj = new Ext.Container({ height: LineHeight, id: 'SetAdDate', items: [AdDateObj], layout: 'form', width: 175 });
    var SetStatusObj = new Ext.Container({ height: LineHeight, id: 'SetStatus', items: [StatusObj], layout: 'form', width: 160 });
    var LineObj = new Ext.Panel({
    defaults: {
    width: 100,
    labelWidth: 40,
    defaultType: 'field',
    defaults: { width: 75}
    },
    height: 150,
    id: 'LeadFormLine',
    items: [SetLeadIdObj,
    SetScoreObj,
    SetAdDateObj,
    SetStatusObj],
    layout: 'column',
    width: 550
    });


    I get an exception on this line:
    rz.setSize(aw, ah);

    "Microsoft JScript runtime error: 'undefined' is null or not an object"

    In the following ExtJs code:

    setSize : function(w, h){
    if(typeof w == 'object'){
    h = w.height;
    w = w.width;
    }
    if(!this.boxReady){
    this.width = w;
    this.height = h;
    return this;
    }

    if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
    return this;
    }
    this.lastSize = {width: w, height: h};
    var adj = this.adjustSize(w, h);
    var aw = adj.width, ah = adj.height;
    if(aw !== undefined || ah !== undefined){ var rz = this.getResizeEl();
    if(!this.deferHeight && aw !== undefined && ah !== undefined){
    rz.setSize(aw, ah);
    }else if(!this.deferHeight && ah !== undefined){
    rz.setHeight(ah);
    }else if(aw !== undefined){
    rz.setWidth(aw);
    }
    this.onResize(aw, ah, w, h);
    this.fireEvent('resize', this, aw, ah, w, h);
    }
    return this;
    },

    The fields I want on one line are placed into a FormPanel.

    The FormPanel goes into a Center of a BorderLayout.
    The BorderLayout is in a CardLayout.
    The CardLayout is in a BorderLayout.
    The BorderLayout is in a Window.

    Ed

  7. #17
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    What's a "LayoutPanel"?

  8. #18
    Ext User
    Join Date
    Oct 2008
    Posts
    26
    Vote Rating
    0
    DirtDog is on a distinguished road

      0  

    Default Typo

    Typo


    I meant to type BorderLayout.

  9. #19
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    some thoughts:
    - Please consider using standard javascript formatting.
    - Defaults is meant to be used when using xtypes
    - With this implementation, any width being applied to an instance of a class is being overridden by the defaults object, whereas if you used xtypes the width would be honored (as demonstrated in my example);
    - It seems you're trying to do way too much at one time. You need to further abstract your problem to help narrow it down. it's hard for me to assist any further as I can get this layout to work.
    - Consider using XTypes as your could would look much cleaner
    - Consider using standard JavaScript variable capitalization
    - Consider dropping the noun "Obj" from your references. SetScoreObj is more meaningful if it was scoreContainer.

  10. #20
    Ext User
    Join Date
    Oct 2008
    Posts
    26
    Vote Rating
    0
    DirtDog is on a distinguished road

      0  

    Default Workaround

    Workaround


    Garcia,

    I appreciate your help. I understand your suggestions concerning the JavaScript formatting. However, I felt they were cosmetic in nature and didn't get at the real problem.

    I played around with this some more and discovered if I added some margins like this:

    style: 'margin: 0px 15px 0px 0px'

    to the fieldsets then I got the spacing I wanted between the elements in the same line.

    I understand you said the Container approach was quicker then the FieldSet approach.
    Yes the code may be quicker but I'm expending huge amounts of my time trying to get that to actually work. What's quicker (in terms of my time) right now is for me to use the FieldSets approach.

    Thanks for your help,

    DirtDog