extjs 4更改默认面板颜色

时间:2014-05-01 14:51:41

标签: javascript extjs4

我想知道是否可以更改面板的背景颜色。我有一个带有textfield和其他输入的表单面板,以及一个提交按钮。我会重新设置我的自定义表单,例如将面板更改为绿色和我的按钮类。我已尝试使用bodStyle,但更改仅反映了formPanel。你有没有完全改变formPanel的风格?

thanx很多。

HTML code:

<div id="ext-form"  align="center" style="box-shadow:#000">     
    <div id="topborder"  align="center" style="box-shadow:#000"/>           
       <div id="test"> 
        </div>
    <div id="bottomborder"  align="center" style="box-shadow:#000">
 </div>

Exjs代码:

Ext.onReady( function() {    

    Ext.create('Ext.form.Panel', {

        id:'mypanel',
    frame: false,
    //title: 'Analysis Form',
    width: 690,
    bodyPadding: 2,
    renderTo: 'test', 
         bodyStyle: 'background:#a20; padding:10px;',     
     style: {             
         borderColor:'#000000', borderStyle:'solid', borderWidth:'2px'},   

    fieldDefaults: {             
    labelAlign: 'left',
    labelWidth: 90,
    anchor: '100%',
        msgTarget: 'under'
    }, 

    items: [           
        {
    xtype: 'textfield', //3
    fieldStyle: 'background-color: #ddd; background-image: none;',             

    name: 'userAnalysis.username',
    fieldLabel: 'Name',

    value: 'Type Name',
            allowBlank: false //1
    },
            {
    xtype: 'textfield', //3
    name: 'userAnalysis.surname',
    fieldLabel: 'Surname',
    value: 'Type surname'
    },
    {
    xtype: 'datefield', //8
    name: 'userAnalysis.dateFrom',
    fieldLabel: 'From',
    format: 'd/m/Y',
    value: new Date()
    } ,
        {
    xtype: 'datefield', //8
    name: 'userAnalysis.dateTo',
    fieldLabel: 'To',
            format: 'd/m/Y',
    value: new Date()
    } ,
    {
    xtype: 'checkboxgroup', //11

    fieldLabel: 'Choose',
        items:[
            {
            boxLabel: 'Type A',
            name: 'userAnalysis.pressBlod',
                inputValue:'ps'                 
            },
             {
            boxLabel: 'Type B' 
                 ,
                 name: 'userAnalysis.glicemia',
                inputValue:'gli'
           }                  

            ] }  
    ]    
     ,            
        buttons: [                
            {                                
    text: 'Send',                  

    handler: function() {

    var form = this.up('form').getForm();       

    }

     }]


    }); 


    });

我的表格示例:

Custom Form colored

jsfiddle网站。 Try it

0 个答案:

没有答案