Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    11
    Vote Rating
    1
    hectormendozao is on a distinguished road

      0  

    Default No ScrollBar on Form inside Panel inside TabPanel

    No ScrollBar on Form inside Panel inside TabPanel


    Hello I've been having a problem with an app, where I can't get the scroll bars to show inside a FormPanel. The FormPanel I want to have a scroll is inside a Panel which is inside the tab's Panel like is drawn on the following image:

    SS.gif

    The structure of my app is the following:

    My main JS file is like this:

    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    Ext.application({
        views: [
            'MyViewport'
        ],
        autoCreateViewport: true,
        name: 'MyApp'
    });
    My Viewport is this one:

    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
        autoScroll: true,
        layout: {
            type: 'fit'
        },
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',
                        minHeight: 600,
                        minWidth: 800,
                        layout: {
                            type: 'border'
                        },
                        items: [
                            {
                                xtype: 'panel',
                                region: 'center',
                                items: [
                                    {
                                        xtype: 'tabpanel',
                                        border: 0,
                                        activeTab: 0,
                                        items: [
                                            {
                                                xtype: 'panel',
                                                border: 0,
                                                autoScroll: true,
                                                title: 'Datos de Salud',
                                                items: [
                                                    {
                                                        xtype: 'panel',
                                                        border: 0,
                                                        autoScroll: true,
                                                        items: [
                                                            {
                                                                xtype: 'form',
                                                                border: 0,
                                                                autoScroll: true,
                                                                bodyPadding: 10,
                                                                paramsAsHash: true,
                                                                trackResetOnLoad: true,
                                                                waitMsgTarget: true,
                                                                items: [
                                                                    {
                                                                        xtype: 'fieldset',
                                                                        collapsed: false,
                                                                        collapsible: false,
                                                                        title: 'Generales',
                                                                        items: [
                                                                            {
                                                                                xtype: 'fieldcontainer',
                                                                                padding: '0 0 7 0',
                                                                                layout: {
                                                                                    type: 'column'
                                                                                },
                                                                                items: [
                                                                                    {
                                                                                        xtype: 'numberfield',
                                                                                        padding: '0 5 0 0',
                                                                                        width: 180,
                                                                                        name: 'peso',
                                                                                        fieldLabel: 'Peso en kilogramos',
                                                                                        labelWidth: 110,
                                                                                        decimalPrecision: 0,
                                                                                        maxValue: 150,
                                                                                        minValue: 10
                                                                                    },
                                                                                    {
                                                                                        xtype: 'numberfield',
                                                                                        width: 180,
                                                                                        name: 'estatura',
                                                                                        fieldLabel: 'Estatura en metros',
                                                                                        labelWidth: 110,
                                                                                        maxValue: 2.5,
                                                                                        minValue: 0.5,
                                                                                        step: 0.01
                                                                                    },
                                                                                    {
                                                                                        xtype: 'displayfield',
                                                                                        value: '    Nota: Rango de 0.50 metros a 2.50 metros'
                                                                                    }
                                                                                ]
                                                                            },
                                                                            {
                                                                                xtype: 'fieldcontainer',
                                                                                padding: '0 0 7 0',
                                                                                layout: {
                                                                                    type: 'column'
                                                                                },
                                                                                items: [
                                                                                    {
                                                                                        xtype: 'combobox',
                                                                                        padding: '0 10 0 0',
                                                                                        width: 297,
                                                                                        name: 'general',
                                                                                        fieldLabel: 'Estado General de Salud',
                                                                                        labelWidth: 140,
                                                                                        allowBlank: false,
                                                                                        forceSelection: true,
                                                                                        minChars: 2,
                                                                                        typeAhead: true
                                                                                    },
                                                                                    {
                                                                                        xtype: 'combobox',
                                                                                        formBind: false,
                                                                                        padding: '0 10 0 0',
                                                                                        width: 170,
                                                                                        name: 'gruposanguineo',
                                                                                        fieldLabel: 'Grupo Sanguíneo',
                                                                                        forceSelection: true,
                                                                                        minChars: 1,
                                                                                        typeAhead: true
                                                                                    },
                                                                                    {
                                                                                        xtype: 'combobox',
                                                                                        padding: '0 10 0 0',
                                                                                        width: 113,
                                                                                        name: 'factorrh',
                                                                                        fieldLabel: 'Factor RH',
                                                                                        labelWidth: 60,
                                                                                        forceSelection: true,
                                                                                        minChars: 1,
                                                                                        typeAhead: true
                                                                                    },
                                                                                    {
                                                                                        xtype: 'combobox',
                                                                                        width: 254,
                                                                                        name: 'vacunacion',
                                                                                        fieldLabel: 'Esquema de vacunación completo',
                                                                                        labelWidth: 190,
                                                                                        allowBlank: false,
                                                                                        forceSelection: true,
                                                                                        minChars: 1,
                                                                                        typeAhead: true
                                                                                    }
                                                                                ]
                                                                            }
                                                                        ]
                                                                    },
                                                                    {
                                                                        xtype: 'fieldset',
                                                                        title: 'Actualmente',
                                                                        items: [
                                                                            {
                                                                                xtype: 'textareafield',
                                                                                anchor: '100%',
                                                                                name: 'padecimientos',
                                                                                fieldLabel: 'Enfermedades importantes que haya padecido: (Epilepsia, Varicela, Sarampión, Rubeola, Hepatitis, etc.)',
                                                                                labelAlign: 'top',
                                                                                labelWidth: 250,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 675,
                                                                                name: 'actualmente',
                                                                                fieldLabel: '¿Existe algún problema médico actual, padecimiento crónico, enfermedad o molestia frecuente que sea necesario conocer? (Asma, Gastritis, Colitis, Sinusitis, Migraña, Depresión, Diabetes Mellitus, Obesidad)',
                                                                                labelWidth: 600,
                                                                                allowBlank: false,
                                                                                forceSelection: true
                                                                            },
                                                                            {
                                                                                xtype: 'textareafield',
                                                                                anchor: '100%',
                                                                                name: 'actualmentecual',
                                                                                fieldLabel: 'Especificar',
                                                                                labelWidth: 60,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 363,
                                                                                name: 'tratamiento',
                                                                                fieldLabel: '¿Actualmente se encuentra bajo algún tratamiento?',
                                                                                labelWidth: 300,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'checkboxgroup',
                                                                                items: [
                                                                                    {
                                                                                        xtype: 'checkboxfield',
                                                                                        name: 'tratamientofisico',
                                                                                        boxLabel: 'Físico',
                                                                                        inputValue: '1',
                                                                                        uncheckedValue: '0'
                                                                                    },
                                                                                    {
                                                                                        xtype: 'checkboxfield',
                                                                                        name: 'tratamientomedico',
                                                                                        boxLabel: 'Médico',
                                                                                        inputValue: '1',
                                                                                        uncheckedValue: '0'
                                                                                    },
                                                                                    {
                                                                                        xtype: 'checkboxfield',
                                                                                        name: 'tratamientopsicologico',
                                                                                        boxLabel: 'Psicológico',
                                                                                        inputValue: '1',
                                                                                        uncheckedValue: '0'
                                                                                    }
                                                                                ]
                                                                            },
                                                                            {
                                                                                xtype: 'textareafield',
                                                                                anchor: '100%',
                                                                                name: 'tratamientodiagnostico',
                                                                                fieldLabel: 'Diagnóstico específico',
                                                                                labelWidth: 130,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'fieldcontainer',
                                                                                layout: {
                                                                                    type: 'column'
                                                                                },
                                                                                items: [
                                                                                    {
                                                                                        xtype: 'datefield',
                                                                                        padding: '0 10 0 0',
                                                                                        width: 274,
                                                                                        name: 'tratamientodesde',
                                                                                        fieldLabel: '¿Desde cuándo?',
                                                                                        format: 'd/F/Y'
                                                                                    },
                                                                                    {
                                                                                        xtype: 'datefield',
                                                                                        width: 275,
                                                                                        name: 'tratamientohasta',
                                                                                        fieldLabel: '¿Hasta cuándo?',
                                                                                        format: 'd/F/Y'
                                                                                    }
                                                                                ]
                                                                            },
                                                                            {
                                                                                xtype: 'textareafield',
                                                                                anchor: '100%',
                                                                                name: 'tratamientomedicamentos',
                                                                                fieldLabel: 'Medicamentos que toma y frecuencia',
                                                                                labelAlign: 'top',
                                                                                maxLength: 500
                                                                            }
                                                                        ]
                                                                    },
                                                                    {
                                                                        xtype: 'fieldset',
                                                                        title: 'Médico',
                                                                        items: [
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'medico',
                                                                                fieldLabel: 'Nombre del Médico',
                                                                                labelWidth: 120,
                                                                                allowBlank: false
                                                                            },
                                                                            {
                                                                                xtype: 'fieldcontainer',
                                                                                layout: {
                                                                                    type: 'column'
                                                                                },
                                                                                items: [
                                                                                    {
                                                                                        xtype: 'textfield',
                                                                                        columnWidth: 0.5,
                                                                                        padding: '0 10 0 0',
                                                                                        name: 'medicotel',
                                                                                        fieldLabel: 'Teléfono',
                                                                                        allowBlank: false
                                                                                    },
                                                                                    {
                                                                                        xtype: 'textfield',
                                                                                        columnWidth: 0.5,
                                                                                        name: 'medicocel',
                                                                                        fieldLabel: 'Celular'
                                                                                    }
                                                                                ]
                                                                            }
                                                                        ]
                                                                    },
                                                                    {
                                                                        xtype: 'fieldset',
                                                                        title: 'Hábitos',
                                                                        items: [
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 466,
                                                                                name: 'desayuna',
                                                                                fieldLabel: '¿Acostumbra desayunar en forma completa antes de asistir al Colegio?',
                                                                                labelWidth: 400,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 299,
                                                                                name: 'desparasita',
                                                                                fieldLabel: '¿Recibe tratamiento para desparasitarse?',
                                                                                labelWidth: 230,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'desparasitacadacuanto',
                                                                                fieldLabel: '¿Cada cuánto?',
                                                                                maxLength: 70
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 395,
                                                                                name: 'alergias',
                                                                                fieldLabel: '¿Tiene alguna alergia a medicamentos, alimentos, etc?',
                                                                                labelWidth: 320,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'alergiasdetalle',
                                                                                fieldLabel: 'Especificar',
                                                                                labelWidth: 70,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 158,
                                                                                name: 'lentes',
                                                                                fieldLabel: '¿Usa lentes?',
                                                                                labelWidth: 80,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'lentesdetalle',
                                                                                fieldLabel: 'Especificar el motivo',
                                                                                labelWidth: 120,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 292,
                                                                                name: 'fobias',
                                                                                fieldLabel: '¿Denota algún miedo intenso o fobia?',
                                                                                labelWidth: 220,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'fobiasdetalle',
                                                                                fieldLabel: 'Especificar',
                                                                                labelWidth: 70,
                                                                                maxLength: 250
                                                                            }
                                                                        ]
                                                                    },
                                                                    {
                                                                        xtype: 'fieldset',
                                                                        title: 'Historial Médico',
                                                                        items: [
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 377,
                                                                                name: 'columna',
                                                                                fieldLabel: '¿Tiene algún padecimiento de columna o pie plano?',
                                                                                labelWidth: 300,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'columnadetalle',
                                                                                fieldLabel: 'Especificar',
                                                                                labelWidth: 70,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 299,
                                                                                name: 'corazon',
                                                                                fieldLabel: '¿Tiene algún padecimiento del corazón?',
                                                                                labelWidth: 230,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'corazondetalle',
                                                                                fieldLabel: 'Especificar',
                                                                                labelWidth: 70,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 473,
                                                                                name: 'accidentes',
                                                                                fieldLabel: '¿Ha sufrido algún accidente, caída o golpe que haya dejado secuela?',
                                                                                labelWidth: 390,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'accidentesdetalle',
                                                                                fieldLabel: 'Especificar y anotar fechas',
                                                                                labelWidth: 150,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 390,
                                                                                name: 'cirugias',
                                                                                fieldLabel: '¿Ha tenido alguna operación o intervención quirúrgica?',
                                                                                labelWidth: 310,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'datefield',
                                                                                name: 'cirugiasfecha',
                                                                                fieldLabel: 'Fecha',
                                                                                labelWidth: 50,
                                                                                format: 'd/F/Y'
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'cirugiascausa',
                                                                                fieldLabel: 'Causa',
                                                                                labelWidth: 50,
                                                                                maxLength: 250
                                                                            },
                                                                            {
                                                                                xtype: 'textfield',
                                                                                anchor: '100%',
                                                                                name: 'cirugiastratamiento',
                                                                                fieldLabel: 'Tratamiento',
                                                                                labelWidth: 80,
                                                                                maxLength: 250
                                                                            }
                                                                        ]
                                                                    },
                                                                    {
                                                                        xtype: 'fieldset',
                                                                        title: 'Consentimiento',
                                                                        items: [
                                                                            {
                                                                                xtype: 'combobox',
                                                                                width: 466,
                                                                                name: 'tratarencolegio',
                                                                                fieldLabel: 'Autorizo a que mi hijo(a) sea tratado(a) durante su estancia en el Colegio, en caso de presentar fiebre, vómito, diarrea, etc.',
                                                                                labelWidth: 400,
                                                                                allowBlank: false,
                                                                                forceSelection: true,
                                                                                minChars: 1,
                                                                                typeAhead: true
                                                                            },
                                                                            {
                                                                                xtype: 'label',
                                                                                anchor: '100%',
                                                                                text: 'Declaro que los datos expuestos en la presente ficha de control médico se ajustan a la realidad y me comprometo a mantenerlos actualizados en caso de variar alguno de ellos'
                                                                            },
                                                                            {
                                                                                xtype: 'textareafield',
                                                                                anchor: '100%',
                                                                                name: 'comentarios',
                                                                                fieldLabel: 'Comentarios',
                                                                                maxLength: 500
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                region: 'north',
                                height: 60,
                                html: '<center>Header</center>'
                            },
                            {
                                xtype: 'panel',
                                region: 'south',
                                height: 50,
                                html: '<center>Footer</center>'
                            }
                        ]
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    
    });
    The panels inside the tab are not showing a scroll bar, I've tried already setting the "autoScroll" in the FormPanel, the Panel containing the FormPanel and the TabPanel. Also tested with setting overflowx and overflowy to "auto" and "scroll" and nothing.

    The only scroll I've managed to really control is the viewport, setting to autoscroll and setting a minHeight on the panel that contains the other panels..

    Am I missing something?

    Thanks in advace for the help.

    Hector

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Looks like a lot of overnesting really.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    11
    Vote Rating
    1
    hectormendozao is on a distinguished road

      0  

    Default


    thanks Mitchell, the overnesting si due to the fact that the form is inside a tabpanel, which is inside a tabpanel, which is inside a tabpanel, so si forgot to remove some panels, anyways, I solved it, it was a layout manager problem.....

Thread Participants: 1