ext.panel设置背景图片以及页面居中

最新推荐文章于 2021-06-15 21:05:10 发布
原创 最新推荐文章于 2021-06-15 21:05:10 发布 · 6.9k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一个使用ExtJS实现的登录界面布局实例，通过详细配置Panel组件及其内部元素的属性来展示如何设置登录界面的样式及布局。该界面采用了自定义CSS进行美化，并通过调整布局参数实现了元素的精确定位。
var panel = new Ext.Panel({
        border : false,
        width : 460,
        align:'center',
      cls : 'loginbgimage',//设置页面背景的CSS
       baseCls : 'ex-panel',//设置透明FORM 嵌入页面
        layout : 'column',
        items : [{
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : 1,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : ' ',
            html : '',
          baseCls : 'ex-panel'
        }, {
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : 1,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : ' ',
            html : '',
            baseCls : 'ex-panel'
        }, {
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : 1,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : ' ',
            html : '',
            baseCls : 'ex-panel'
        }, {
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : 1,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : ' ',
            html : '',
            baseCls : 'ex-panel'
        },{
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : .45,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : ' ',
            html : '',
            baseCls : 'ex-panel'
        }, {
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : .55,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : '<span style="color:#FFFFFF;font-size: 14px;"><b>系&nbsp;统&nbsp;登&nbsp;入</b></span>',
            html : '',
            baseCls : 'ex-panel'
        }, {
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : .45,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : '&nbsp;',
            html : '',
            baseCls : 'ex-panel'
        }, {
            // 指定内部元素所占宽度1表示100% .5表示50%
            columnWidth : .55,
            // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
            title : '&nbsp;',
            html : '',
            baseCls : 'ex-panel',
            items : f //f为我的登录表单
        }]
    })
    panel.render('login');//渲染到显示的DIV
    panel.el.center();//使的PANEL页面居中，注意必须放上渲染之后
}

css：
.loginbgimage { 
   background:url(https://blog.csdn.net/images/login_bbg.gif) no-repeat left top; 
   position:absolute; 
   height:282px; 
   width:460px;
} 
.ex-panel{border-style:solid;border-color:transparent;border-width:0;} 
chenlaoyang
关注
如何给Ext.panel增加一个背景图片
06-22
如何给Ext.panel增加一个背景图片
谈谈Ext JS的组件——布局的使用方法续一
weixin_34146986的博客
06-25 178
盒子布局 盒子布局主要作用是以水平（Ext.layout.container.HBox）或垂直方式（Ext.layout.container.VBox）来划分容器区域。这也是比较常有的布局方式。 使用盒子布局，除了要在容器定义layout配置项外，还需要在子组件指定子组件的宽度（HBox）或高度（VBox）。指定宽度或高度有两种方式，一是直接使用width或height来定...
extjs panel html 居中,ExtJs设置GridPanel表格文本垂直居中示例
weixin_28946735的博客
06-15 363
业务场景，需要实现最终效果图如下：GridPanel代码如下配置：{xtype : 'grid',id : 'grid_jglb',frame : true,region : 'center',title : '列表详细信息',columnLines : true,loadMask : true,store : 'test_store',viewConfig : {forceFit : true...
EXTJS布局示例（panel，Viewport，TabPanel）(带图)
weixin_30892037的博客
07-11 322
面板控件panel应用 newExt.Panel({ title:'面板头部（header）', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工具栏(bottom toolbars)'], height:200, ...
extjs panel html 居中,ExtJs设置GridPanel表格文本垂直居中
weixin_36249618的博客
06-15 335
业务场景，需要实现最终效果图如下：GridPanel代码如下配置：[javascript] {xtype : 'grid',id : 'grid_jglb',frame : true,region : 'center',title : '列表详细信息',columnLines : true,loadMask : true,store : 'test_store',viewConfig : {fo...
ext panel设置背景图片以及页面居中
qq_43746783的博客
01-11 731
ext panel设置背景图片以及页面居中
ExtJs4.1:设置panel的背景图片
热门推荐
追
01-26 1万+
Ext.define('MyApp.view.MyViewport_1', { extend: 'Ext.container.Viewport', layout: { type: 'border' }, initComponent: function() { var me = this; Ex
Ext.Net:Panel增加背景图
weixin_34138056的博客
05-17 137
         在Panel里增加背景图是很常见的那么在ext.net中如何实现呢？  直接上代码如下：     &lt;ext:Panel runat="server" ID="Panel1" BodyStyle="background:url(https://blog.csdn.net/Resources/images/Desktop/1%3Cem%3E.%3C/em%3Ejpg) left bottom repeat-x;"&gt;           ...
用java设置网页背景图片_JAVA设置背景图片
weixin_39618339的博客
02-25 2022
想要两个按钮下面就全是背景图片并且不要遮挡panel上的任何东西，网上找了好多办法但是图片总是出不来，不知道怎么回事，有没有人帮忙看一看...importjava.awt.*;importjavax.swing.*...想要两个按钮下面就全是背景图片并且不要遮挡panel上的任何东西，网上找了好多办法但是图片总是出不来，不知道怎么回事，有没有人帮忙看一看...import java.awt.*;i...
Extjs中panel的 collapseMode 属性的应用，修改折叠箭头样式
afei3418的专栏
07-17 4824
panel中属性collapseMode可以实现面板的折叠，不过属性自带的折叠箭头不太容易辨识，通过修改实现如下展现样式     具体代码实心如下： Ext.onReady(function(){    var mainPanel=Ext.create('Ext.panel.Panel',{   title:'主信息', //  collapsible:false, //
ExtJs 给Panel添加背景
圈儿的专栏
03-11 3756
Extjs中的Panel不能通过设定bodystyle来加载背景。我现在想到的办法是用firedebug看要加背景的div的id然后给panel添加reader的监听，方法里面修改div的class属性来达到添加背景的效果listeners: {        render: function(p){            Ext.fly(ext-gen32).
Extjs中gridPanel单元格自定义样式，根据值设置背景色长度
mengzhengjie的专栏
03-30 1184
Extjs中gridPanel单元格自定义样式，根据值设置背景色长度。 在网上找了很久的例子，无果！最后捣鼓出来了，其实很简单，但是浪费了很多时间，贴在此处供有需之人用！以免费时费力。。 这是效果图。 上面便是代码，关键是最后一相： {                         header: "项目进度%
在ExtJs的容器中显示图片，并动态更新
在实验室——宅出一片未来
02-26 868
    Extjs并没有提供直接的组件来显示图片。网上通过设置textfield的InputType为Image然后再修改dom对象来实现，其实image的属性值并没有包含在Extjs的官方文档当中。可以通过以下的思路实现，更可以进一步扩展成自定义组件。推荐的方法如下: 1、首先做一个容器 { xtype: 'box', //或者xtype: 'component', width:...
让Ext.panel(包含formPanel)在屏幕上居中显示
fming09的专栏
10-21 269
    用formPanel做了个登录界面，不能在页面居中，以下是解决方法   var panel =new Ext.panel({ }); var windowWidth = window.screen.availWidth; var left=windowWidth/2 - panel的宽度/2; var style='margin-top:150px;margin-l...
Extjs的布局控件--border布局
u011123176的专栏
02-21 5286
布局控件 所谓的布局就是指容器组件中子元素的分布,排列组合方式.Ext的所有容器组件都支持布局操作. 每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列,组合以及渲染方式 ExtJS的布局基类为 Ext.layout.ContainerLayout,其他的布局都是继承该类.ExtJS的容器组件包含一个layout及layoutConfig配置属性. 这两个属性用来指定容器使
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值