1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    sekarpdkt is on a distinguished road

      0  

    Default Simple form panel not rendered in IE (Works in FF)

    Simple form panel not rendered in IE (Works in FF)


    I already built a complex form with lots of panels with in it. It was working in FF. When I rolled out, it was observed that it is working in IE.

    To simulate the issue, I restarted from scratch and got struck with this simple form. Works in FF, not in FF.

    Any help?

    Regards
    Sekar

    HTML Code:
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Route Finder WEB2.0 V1</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
        <script type="text/javascript" src="../../ext-all.js"> </script>
    
        <script type="text/javascript" src="test.js"> </script>
    
        <link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
        <style type="text/css">
            .x-check-group-alt {
                background: #D1DDEF;
                border-top:1px dotted #B5B8C8;
                border-bottom:1px dotted #B5B8C8;
            }
        body {
            padding:0 2em 3em;
            font: normal 12px arial, helvetica, sans-serif;
            color: #282828;
        }
    
    
        </style>
    </head>
    <body style="margin-top:1em">
        <center>
            <div id="newLocation" style = "valign:center"></div>
        </center>
    </body>
    js code

    HTML Code:
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var circuitTypeComboPanel = 
            {
            xtype: 'fieldset',
            title: 'Type',
            id: 'newCircuitTypePanel',
            autoHeight: true,
            collapsed: false,   // initially do not collapse the group
            collapsible: false, // Later we would like to collapse
            items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                    }
                    ]
                };
    
        var circuitBandwidthComboPanel = 
            {
            xtype: 'fieldset',
            title: 'Bandiwidth',
            id: 'newCircuitBandwidthPanel',
            autoHeight: true,
            collapsed: false,   // initially do not collapse the group
            collapsible: false, // Later we would like to collapse
            items: [{
                    xtype:'textfield',
                    fieldLabel: 'Second Name',
                    name: 'second',
                    allowBlank:false
                    }
                    ]
                };
    
        var circuitDefComboPanel = 
            {
            xtype: 'fieldset',
            title: 'Circuit Def',
            id: 'newCircuitDefPanel',
            autoHeight: true,
            collapsed: false,   // initially do not collapse the group
            collapsible: false, // Later we would like to collapse
            items: [{
                         xtype:'textfield',
                    fieldLabel: 'Mid Name',
                    name: 'mid',
                    allowBlank:false
                    }
                    ]
                };
    
    
        var circuitTypeSelectionPanel = [{
            
            xtype: 'fieldset',
            title: 'Select Circuit Type',
            id: 'newCircuitTypeSelection',
            autoHeight: true,
            collapsed: false,   // initially do not collapse the group
            collapsible: true, // Later we would like to collapse
            //bodyStyle:'padding:5px 5px 5px 5px',
            anchor : '100%',
            items: [            
                        {
                            layout: 'column',
                            border: false,
                            // defaults are applied to all child items unless otherwise specified by child item
                            defaults: {
                                columnWidth: '.31',
                                border: true,
                                bodyStyle:'padding:5px 5px 5px 5px'
                            },            
                             items: [
                                circuitTypeComboPanel,
                                circuitBandwidthComboPanel,
                                circuitDefComboPanel
                                ]
                        },
    
                    ]
        }];
    
        var fp = new Ext.FormPanel({
            title: 'Route finder request form',
            frame: true,
            standardSubmit: true,
            labelWidth: 110,
            anchor : '98%',
            renderTo:'newLocation',
            bodyStyle: 'padding:0 0px 0;',
    
                             items: [
                                circuitTypeSelectionPanel
                                ],
    
            buttons: [{
                text: 'Launch',
                handler: function(){
                   if(fp.getForm().isValid()){
                        fp.getForm().submit();
                    }
                }
            },{
                text: 'Reset',
                handler: function(){
                    fp.getForm().reset();
                }
            }]
        });
    });
    
    
    Attached Files

  2. #2
    Ext User
    Join Date
    Sep 2009
    Posts
    3
    Vote Rating
    0
    computerangel is on a distinguished road

      0  

    Default i wonder how in works in ff ?

    i wonder how in works in ff ?


    corect all ur css path and js path and do not forgot to coret adrees in ext-all.css it will work on all Browsers

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    sekarpdkt is on a distinguished road

      0  

    Default


    I have not added js and css in the zip. If you unzip them in to ext-js example directory, it will work.

    Regards
    S.Sekar

  4. #4
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178
    Vote Rating
    0
    tubamanu is on a distinguished road

      0  

    Default


    added some changes to your code, for me it is working on IE6 and FF3.5

    Code:
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var circuitTypeComboPanel = new Ext.form.FieldSet({
            title: 'Type',
            id: 'newCircuitTypePanel',
            autoHeight: true,
            width: 300,
            collapsed: false,   // initially do not collapse the group
            collapsible: false, // Later we would like to collapse
            items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                    }
                    ]
            });
    
        var circuitBandwidthComboPanel = new Ext.form.FieldSet({
            title: 'Bandiwidth',
            id: 'newCircuitBandwidthPanel',
            autoHeight: true,
            width: 300,
            collapsed: false,   // initially do not collapse the group
            collapsible: false, // Later we would like to collapse
            items: [{
                    xtype:'textfield',
                    fieldLabel: 'Second Name',
                    name: 'second',
                    allowBlank:false
                    }]
            });
    
        var circuitDefComboPanel = new Ext.form.FieldSet({
            title: 'Circuit Def',
            id: 'newCircuitDefPanel',
            autoHeight: true,
            width: 300,
            collapsed: false,   // initially do not collapse the group
            collapsible: false, // Later we would like to collapse
            items: [{
                xtype:'textfield',
                fieldLabel: 'Mid Name',
                name: 'mid',
                allowBlank:false
                }]
            });
    
    
        var circuitTypeSelectionPanel = new Ext.form.FieldSet({
            title: 'Select Circuit Type',
            id: 'newCircuitTypeSelection',
            autoHeight: true,
            collapsed: false,   // initially do not collapse the group
            collapsible: true, // Later we would like to collapse
            //bodyStyle:'padding:5px 5px 5px 5px',
            anchor : '100%'
        });
        
        var panelTest = new Ext.Panel({
            layout: 'column',
            border: 'none'
        })
        panelTest.add(circuitTypeComboPanel);
        panelTest.add(circuitBandwidthComboPanel);
        panelTest.add(circuitDefComboPanel);
        circuitTypeSelectionPanel.add(panelTest);
        
        
        var fp = new Ext.FormPanel({
            title: 'Route finder request form',
            frame: true,
            standardSubmit: true,
            labelWidth: 110,
            anchor : '98%',
            renderTo:'newLocation',
            bodyStyle: 'padding:0 0px 0;',
            buttons: [{
                text: 'Launch',
                handler: function(){
                   if(fp.getForm().isValid()){
                        fp.getForm().submit();
                    }
                }
            },{
                text: 'Reset',
                handler: function(){
                    fp.getForm().reset();
                }
            }]
        });
        fp.add(circuitTypeSelectionPanel);
        fp.doLayout();
    });

  5. #5
    Ext User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    sekarpdkt is on a distinguished road

      0  

    Thumbs up It worked

    It worked


    It worked. Also it opened up the knowledge of lot more power of Panel and form panel.

    Thanks.

    Regards
    S.Sekar

Thread Participants: 2