1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default Form layout to position manually using Margin to prevent design view from disappearin

    Form layout to position manually using Margin to prevent design view from disappearin


    Hello,

    I have a Sencha app on which I have been working. I did not change the default Layout config values for the Ext.container.Viewport (it has auto) and the Ext.form.Panel that has anchor.

    On the form.Panel, I added the first data input control above the Submit button. I’ll show the code below. On that first input control, I used the Margin config to position it and I gave it a height of 20 and a max width and a label width. Then I added a second control by dragging it within Sencha Architect above the Submit button and below the first input control and I gave that second control the height of 20, a label width, a maxwidth, and margins. Basically, I was moving along without problems and I had in the Design view AND in the browser the first row of input controls (4 controls), the second row of input controls (4 controls), and then on the third row the Submit button.

    When I dragged a new data input control (the 9th data input control) from the Toolbox and dropped it between the Submit button and the last/most recently added control, I was entering some values for the this new and 9th data input control into the Config properties and I lost all in my Design view (the Design view went white completely) and when I Preview the Sencha app the positioning of the controls is messed up.

    I have been looking at the Sencha Example for Layout Managers/Layout Browser and trying to figure out what the correct Layout should be for the way I want to position my controls but I am having a hard time figuring it out. In the Sencha app, I have been trying for the form.Panel the various possibilities for Layout Config property but none of them seem to cause the Design view within Sencha to be visible again and none of them seem to work in the browser when I click Preview. I’m thinking though that I would need to do a new Sencha app and set the form.Panel Layout to something else and then rebuild the new Sencha app to have the same controls of the present Sencha app.

    I am thinking that for the way in which I want to position my controls, I can leave the Layout Config value auto for the Ext.container.Viewport. Am I correct do you think?

    Inside that Ext.container.Viewport, there is a Ext.form.Panel and I am thinking that I should use something other than the default anchor for its Layout Config. What should I use for the form.Panel Layout Config value if I want to set the height of all controls to 20, set the labelwidth and maxlength of all the controls, and use the Margin Config for each control to position?

    I noticed just now that for the first two data input controls paramBilledWeight and paramGrossWeight I had 150 for Width Config, so I removed the 150 in the Width Config for those two controls BUT still I do not see Design view again and still in browser the controls are all messed up.

    Here is the code from this Sencha app:

    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
     
        initComponent: function() {
            var me = this;
     
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'form',
                        itemId: 'theComboForm',
                        bodyPadding: 10,
                        title: 'Combo Box User Input',
                        listeners: {
                            afterrender: {
                                fn: me.onFormAfterRender,
                                scope: me
                            }
                        },
                        items: [
                            {
                                xtype: 'label',
                                text: 'Enter the data for a combo box.'
                            },
                            {
                                xtype: 'textfield',
                                id: 'paramBilledWeight',
                                margin: '25 0 0 0',
                                maxWidth: 200,
                                width: 150,
                                name: 'paramBilledWeight',
                                fieldLabel: 'Billed Weight',
                                labelWidth: 80,
                                allowBlank: false,
                                maskRe: /[0-9]/,
                                vtypeText: '',
                                listeners: {
                                    change: {
                                        fn: me.onParamBilledWeightChange,
                                        scope: me
                                    }
                                }
                            },
                            {
                                xtype: 'numberfield',
                                id: 'paramGrossWeight',
                                margin: '-20 0 0 220',
                                maxWidth: 200,
                                width: 150,
                                name: 'paramGrossWeight',
                                fieldLabel: 'Gross Weight',
                                labelWidth: 80,
                                allowBlank: false,
                                hideTrigger: true,
                                allowDecimals: false,
                                minValue: 0
                            },
                            {
                                xtype: 'textfield',
                                height: 150,
                                id: 'paramTare',
                                margin: '-20 0 0 440',
                                maxWidth: 150,
                                name: 'paramTare',
                                fieldLabel: 'Tare',
                                labelWidth: 30,
                                allowBlank: false,
                                maskRe: /[0-9]/
                            },
                            {
                                xtype: 'combobox',
                                height: 150,
                                margin: '-20 0 0 640',
                                maxWidth: 240,
                                name: 'paramMaterialPK',
                                autoFitErrors: false,
                                fieldLabel: 'Material (check each combo)',
                                labelWidth: 165,
                                allowBlank: false,
                                blankText: 'This field is required.',
                                autoSelect: false,
                                displayField: 'materialAbbreviation',
                                forceSelection: true,
                                queryMode: 'local',
                                store: 'comboMaterialStore',
                                typeAhead: true,
                                valueField: 'materialPK'
                            },
                            {
                                xtype: 'numberfield',
                                height: 150,
                                margin: '20 0 0 35',
                                maxWidth: 110,
                                name: 'paramFatPercent',
                                fieldLabel: 'Fat %',
                                labelWidth: 45,
                                allowBlank: false,
                                blankText: 'This field is required.',
                                selectOnFocus: true,
                                hideTrigger: true,
                                autoStripChars: true,
                                maxValue: 100,
                                minValue: 0
                            },
                            {
                                xtype: 'datefield',
                                height: 150,
                                id: 'paramSlaughterOrBoneDate',
                                margin: '-20 0 0 160',
                                maxWidth: 250,
                                name: 'paramSlaughterOrBoneDate',
                                fieldLabel: 'Slaughter or Bone Date',
                                labelWidth: 140,
                                allowBlank: false,
                                submitFormat: 'm/d/Y'
                            },
                            {
                                xtype: 'textfield',
                                height: 150,
                                id: 'paramTemp',
                                itemId: 'paramTemp',
                                margin: '-20 0 0 430',
                                maxWidth: 160,
                                name: 'paramTemp',
                                fieldLabel: 'Temp',
                                labelWidth: 40,
                                enforceMaxLength: true,
                                maskRe: /[0-9]/,
                                maxLength: 3
                            },
                            {
                                xtype: 'textfield',
                                height: 150,
                                margin: '-20 0 0 725',
                                maxWidth: 200,
                                name: 'paramTrailerTemp',
                                fieldLabel: 'Trailer Temp',
                                labelWidth: 80,
                                allowBlank: false,
                                enforceMaxLength: true,
                                maskRe: /[0-9]/,
                                maxLength: 3
                            },
                            {
                                xtype: 'combobox',
                                height: 150,
                                margin: '20 0 0 0',
                                maxWidth: 410,
                                name: 'paramManufacturerPK',
                                fieldLabel: 'Est. Code/Manufacturer',
                                labelWidth: 135,
                                allowBlank: false,
                                autoSelect: false,
                                displayField: 'manufacturerEstCodeAndName',
                                forceSelection: true,
                                queryMode: 'local',
                                store: 'comboManufacturerStore',
                                typeAhead: true,
                                valueField: 'manufacturerPK'
                            },
                            {
                                xtype: 'numberfield',
                                height: 150,
                                id: 'paramPurchaseOrder',
                                itemId: 'paramPurchaseOrder',
                                margin: '-20 0 0 435',
                                maxWidth: 200,
                                inputId: 'paramPurchaseOrder',
                                name: 'paramPurchaseOrder',
                                fieldLabel: 'PO #',
                                labelWidth: 35,
                                allowBlank: false,
                                enforceMaxLength: true,
                                maxLength: 18,
                                hideTrigger: true,
                                allowDecimals: false
                            },
                            {
                                xtype: 'button',
                                height: 150,
                                margin: '25 0 0 0',
                                text: 'Submit',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    }
                ]
            });
     
            me.callParent(arguments);
        },
    Basically, can anybody recommend what Layout Config value to use for the Ext.container.Viewport AND what Layout Config value to use for the Ext.form.Panel so that I manually can position the controls in Design view and in browswer by using the controls’ labelWidth, maxWidth, and Margin Config properties? With auto for the Viewport Layout and with anchor for the form.Panel Layout, all was working well for the first 8 controls (the first row of 4 controls aligned the same horizontally and the second row of 4 controls aligned the same horizontally) but then I lost Design view and the controls started messing up in the browser in terms of positioning when I added a 9th data input control to start above the bottom Submit button a third row of controls that will be aligned the same horizontally.

    Thanks much, and please do not hesitate to let me know if I can provide further information. I tried in this Sencha app changing for the form.Panel to use all of the different Layout possible values but still I cannot get back the Design view in Sencha and still in the browser the controls are messed up and are not like they were when I had the two rows of data input controls (4 controls to a row) above the Submit button. Maybe though it is too late with this Sencha app to get it back to seeing the Design view and maybe I must start a new Sencha app to redo, but I am not sure what Layout to use for the form.Panel and for the Viewport so that I can manipulate the positioning of all of the controls using the Margin Config along with the Height, labelWidth, and maxWidth Configs.

    Hviezdoslav 24-JAN-2013 Thursday

  2. #2
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,911
    Vote Rating
    63
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    I started recreating your screen here and realized your using negative margins ... I'm wondering why. Perhaps if you can show me how you'd like the form to look I can show you how to achieve that.

    As a for instance if you'd like some elements to stack left to right you can add a container and set it's layout to hbox (horizontal layout) and put whatever you'd like in there. The point is that it doesn't have to be the layout of the form but you can have containers inside the form that have layout set.
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Hi Phil,

    Thanks very much for the reply.

    Please see the attached document for my reply to your reply. It shows how I was using the negative margins to accomplish the positioning that I wanted and explains how it worked for the first two rows of data input controls but how I lost the Design view when I was working on the third row of data input controls.

    Hviezdoslav Friday 25-JAN-2013
    Attached Files

  4. #4
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,911
    Vote Rating
    63
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      1  

    Default


    I've created an Architect archive (xda) here http://cl.ly/0x2z1e0N283v you can open it from Architect. It will extract it and create a new project for you to check out what I've done.

    I believe this project shows some of what you're trying to do. Hopefully you can get some ideas from it regarding layouts, etc...

    I agree the negative margin thing is weird but clearly not the recommended method! ;p

    Hope this helps.
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    I thank you very much, Phil!

    I'll take a look at your sample project to which you kindly provided a link.

    Thanks again,

    Hviezdoslav 28-JAN-2013 Monday

Thread Participants: 1