Results 1 to 6 of 6

Thread: blue background color

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default blue background color

    Hello All,

    I migrate an application from Ext3 to Ext5.
    I have some forms in the previous version with blue background every where (the forms, the fieldSet, the fields (radio, combo, text ...).

    With the new version, the forms, the fieldSets and the fields have white background.

    So, for the form and for the fieldSets I set :
    Code:
    bodyStyle        :    'background-color:#dfe8f5'
    I get blue background around the fieldSets and around the fields, but I can not set the blue background correctly for the fields that are staying in white...

    My form example look like this:
    Code:
    Ext.define('MyForm', 
    {
        extend        :    'Ext.form.FormPanel'
        ,requires    :    [
            'MyFormController'
        ]
        ,alias        :    'widget.myform'
        ,controller    :    'myform'
                        
        /********* Properties *********/
        
        ,border        :    false
    
        ,baseCls        :     'x-plain'
        ,bodyStyle        :    'background-color:#dfe8f5'
    
        /********* Constructor *********/
        ,initComponent: function() 
        {
            this.items    =    [
            {
                title        :    'MyTitle1'
                ,xtype        :    'fieldSet'
                ,bodyStyle    :    'background-color:#dfe8f5;padding:10;margin:10'
                ,items        :    [
                {
                    layout        :    'column'
                    ,bodyStyle    :    'background-color:#dfe8f5;'
                    ,width        :    790
                     ,border        :    false    
                    ,defaults    :    { // defaults for columns
                        layout        :    'form'
                        ,border        :    false
                    }
                    ,items        :    [
                    {
                        defaults        :    {anchor:'100%'}
                        ,columnWidth    :    0.42
                        ,items            :    [
                        {
                            xtype    :    'comboBox'
                            ,title    :    'combo1 FS 1'
                          }]
                    },{
                        bodyStyle        :    'padding:0 15px'
                          ,columnWidth    :    0.16
                          ,items            :    [
                          {
                            xtype    :    'checkbox'
                            ,title    :    'Checkbox FS1'
                          }]
                    },{
                        defaults        :    {anchor:'100%'}
                        ,columnWidth    :    0.42
                        ,items            :    [
                        {
                            xtype    :    'comboBox'
                            ,title    :    'combo2 FS 1'
                        },{
                            xtype    :    'comboBox'
                            ,title    :    'combo3 FS 1'
                        },{
                            xtype    :    'comboBox'
                            ,title    :    'combo4 FS 1'
                        }]
                    }]
                }]
            },{
                title        :    'MyTitle2'
                ,xtype        :    'fieldSet'
                // [....... 4 FieldSets as the previous one]
            }]
             // Call the parent
            this.callParent(arguments);
        }//end of constructor
    });
    I really test a lot of differents params (bodystyle but also layout, containers...) at different places but without succes.
    What's my mistake ?
    Is it a layout problem?

    Thank you in advance for your help.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    It might help to post an image of what your app should look like, and another showing what you are seeing so far.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    Hello,

    Ok, please find it in attached the ExtJS5 version and full blue that I made on ExtJS3.

    Thank you for your help.
    Attached Images Attached Images

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    It seems to work in this Fiddle example:
    https://fiddle.sencha.com/#fiddle/q3f

    Is it possible that you have other CSS that is affecting things?

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    Hello Gary,

    Thank you very much for your help and your time.
    No CSS use in my application.

    But the problem appears when we add column layout into the fieldSet.
    I update your fiddle, but it seem I can not save it (it's logical), so please find the code below based on your fiddle:

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
            Ext.create('Ext.Panel', {
                renderTo: document.body,
                title: 'My Form',
                height: 400,
                width: 600,
                bodyStyle: 'background-color: #dfe8f5;',
                bodyPadding: 10,
                items: [{
                    xtype: 'fieldset',
                    title: 'My Fieldset',
                    collapsible: true,
                    height: 200,
    //                bodyStyle: 'background-color: #dfe8f5;',
                    items: [{
                        layout    :    'column'
                        ,items    :    [
                        {
                            colunmWidth    :    0.5
                            ,items    :    [
                            {
                                xtype: 'textfield',
                                name: 'name',
                                fieldLabel: 'Name',
                                allowBlank: false // requires a non-empty value
                            }]
                        },{
                            colunmWidth    :    0.5
                            ,items    :    [
                            {
                                xtype: 'textfield',
                                name: 'email',
                                fieldLabel: 'Email Address',
                                vtype: 'email' // requires value to be a valid email address format
                            }]
                        }]
    //                }, {
    //                    xtype: 'textfield',
    //                    name: 'email',
    //                    fieldLabel: 'Email Address',
    //                    vtype: 'email' // requires value to be a valid email address format
                    }]
                }]
            })
        }
    });
    Thank you for your help.

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    If I use hbox layout it's better.
    I think it can be a good way to get a clean solution:
    Always based on your fiddle, please find an example with blue background for fields.
    Now I have improve the display and look for a solution to get a vbox into my hbox for the third columns of the last fieldset.

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
            Ext.create('Ext.Panel', {
                renderTo: document.body,
                title: 'My Form',
                height: 400,
                width: 600,
                bodyStyle: 'background-color: #dfe8f5;',
                bodyPadding: 10,
                items: [{
                    xtype: 'fieldset',
                    title: 'My Fieldset',
                    collapsible: true,
                    height: 200,
    //                bodyStyle: 'background-color: #dfe8f5;',
                    layout    :    'hbox',
                    items: [{
                        xtype: 'textfield',
                        name: 'name',
                        fieldLabel: 'Name',
                        allowBlank: false // requires a non-empty value
                    },{
                        xtype: 'textfield',
                        name: 'email',
                        fieldLabel: 'Email Address',
                        vtype: 'email' // requires value to be a valid email address format
                    }]
                }]
            })
        }
    });
    What do you thing about this way?

Similar Threads

  1. How to remove blue background in Window
    By msuresh in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 8 Nov 2010, 8:15 AM
  2. Replies: 5
    Last Post: 25 Jan 2010, 4:38 PM
  3. Ext 2 Updater issue with blue background
    By carlinniss in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Dec 2009, 11:31 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •