extjs4.2加背景图片

最新推荐文章于 2019-01-17 10:27:52 发布

原创最新推荐文章于 2019-01-17 10:27:52 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在ExtJS4.2中添加背景图片。关键在于创建一个CSS样式，并确保将其应用到所有组件，以实现全页面的背景效果。同时，需要注意处理透明部分的样式设置。

思路: 要有个css样式，通过引入css样式实现背景图片的功能。注意透明样式要给每一个组件加上

/*背景图片css */
.customBackground {
    height: 80px;
    border: 1px solid #E8D59B;
    border-radius: 4px;
    background: url(../img/blue/search_bg01.jpg) right bottom no-repeat
        #F7F0DB;
}
/*透明 和customBackground搭配使用   */
.ex-panel {
    border-style: solid;
    border-color: transparent;
    border-width: 0;
}

this.button = Ext.create('Ext.form.Panel',{
             baseCls:'ex-panel',
            border: null,
            layout: {
                type: 'table',
                columns: 2,
                align: 'left'
            },
            items: [queryButton,exportExcelButton]
        })

        this.form = Ext.create('Ext.form.Panel', {
             baseCls:'ex-panel',//设置透明FORM 嵌入页面
            border: null,
            layout: {
                type: 'table',
                columns: 2,
                align: 'left'
            },
            items: [userRoleCombo,userNameCombo]
        });

        var backgroundForm = Ext.create('Ext.form.Panel',{ //默认就是一列
             cls:'customBackground',//背景图片样式 
             baseCls:'ex-panel',//设置透明FORM 嵌入页面
             border: false,
             frame:false,
             width : 800,
             items: [this.dateForm, this.form,this.button]
        });