1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    21
    Vote Rating
    0
    crasho is on a distinguished road

      0  

    Default I Want to do this front, but i have a troubles

    I Want to do this front, but i have a troubles


    Hi, good day.

    I want to do this:

    http://sistemas.seq.gob.mx/seab/propuesta_pantalla.gif

    how can i do it?

    thanks

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Heres one approach to get a complex form layout that meets your needs...
    Attached Images
    Attached Files
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    21
    Vote Rating
    0
    crasho is on a distinguished road

      0  

    Default


    Hi, thanks for your answer, however, the vsd file has errors, r u sure that is correct?

    can u send me, js file?


    Thanks

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The vsd file? You mean the xds? What errors do you encounter?

    Code:
    MyFormUi = Ext.extend(Ext.form.FormPanel, {
        title: 'My Form',
        labelWidth: 100,
        labelAlign: 'left',
        layout: 'form',
        width: 931,
        height: 404,
        padding: 10,
        initComponent: function() {
            this.items = [
                {
                    xtype: 'fieldset',
                    title: 'My Fields',
                    layout: 'form',
                    labelAlign: 'left',
                    items: [
                        {
                            xtype: 'container',
                            autoEl: 'div',
                            layout: 'hbox',
                            height: 24,
                            anchor: '100%',
                            layoutConfig: {
                                align: 'stretch'
                            },
                            items: [
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            autoEl: 'div',
                            layout: 'hbox',
                            height: 24,
                            anchor: '100%',
                            layoutConfig: {
                                align: 'stretch'
                            },
                            items: [
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            autoEl: 'div',
                            layout: 'form',
                            labelAlign: 'top',
                            items: [
                                {
                                    xtype: 'textarea',
                                    fieldLabel: 'Label',
                                    anchor: '100%'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'fieldset',
                    title: 'My Fields',
                    layout: 'form',
                    items: [
                        {
                            xtype: 'container',
                            autoEl: 'div',
                            layout: 'hbox',
                            height: 24,
                            anchor: '100%',
                            layoutConfig: {
                                align: 'stretch'
                            },
                            items: [
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'form',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Label',
                                            anchor: '100%'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    flex: 1,
                                    labelAlign: 'left',
                                    margins: '0 20 0 0'
                                }
                            ]
                        }
                    ]
                }
            ];
            MyFormUi.superclass.initComponent.call(this);
        }
    });
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext User
    Join Date
    Mar 2010
    Posts
    21
    Vote Rating
    0
    crasho is on a distinguished road

      0  

    Default


    With xsd, wasn't complete. But with the code, i cant's see nothing in the navigator, i have Linux Ubuntu Karmic, Firefox 3.5.8 and Extjs 3.1.

    The page is only blank.

    Can u send me, the web page?

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Open the .xds file in the Designer and click Export Project. It will generate a mockup/ directory that has the webpage in it.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Ext User
    Join Date
    Mar 2010
    Posts
    21
    Vote Rating
    0
    crasho is on a distinguished road

      0  

    Default


    Other thing, i need use tab panel,

    Personal dates Academic dates Other Dates.


    And i need put into only tab, your code.


    I'm novice in english, do u write in spanish?

  8. #8
    Ext User
    Join Date
    Mar 2010
    Posts
    21
    Vote Rating
    0
    crasho is on a distinguished road

      0  

    Default


    Hi, thanks

    I can see the GUI in the navigator.

    Any idea?

  9. #9
    Ext User
    Join Date
    Mar 2010
    Posts
    21
    Vote Rating
    0
    crasho is on a distinguished road

      0  

    Default


    Hi,

    I can see the GUI, the libraries are in other location.


Thread Participants: 1