对Ext的Panel界面组件,如果配置它的frame为true,则Panel是圆角框显示,但也会出现如下效果:
如图,Panel的body在文字周围显示的是Panel的底色,这些间隙是css的padding引起的。
如果使用圆角,则Panel组件将使用 .x-panel-ml .x-panel-mc .x-panel-mr 这些样式,这些规定了padding值为6px
如:
.x-panel-ml{background:#fff url(../images/default/panel/left-right.gif) repeat-y 0 0;padding-left:6px;zoom:1;}
如果有页面使用圆角Panel,又不想padding太大,可以在页面中定义样式:
.x-panel-ml{padding-left:6px;}
另外,如果使用column layout,则同一列的两个Panel可能挨着,可以使用如下样式,定义两个Panel之间的垂直间隔:
x-column-layout-ct .x-panel {
margin-bottom:5px;
}
定义圆角Panel的部分实例代码:
{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 5 5px 5px',
items:[{
title: 'Panel',
frame:true,
bodyStyle:'background:white;font:normal 12px verdana;',
html: Ext.example.shortBogusMarkup
}]
}
- 大小: 14 KB
分享到:
相关推荐
frame:true, //是否渲染表单 renderTo :'form', //表单渲染的地方 defaultType: 'numberfield', //设置表单字段的默认类型 defaults:{ //统一设置表单字段默认属性 autoFitErrors : false, //展示错误信息时...
frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之。 xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:”...
//创建面板 Ext.create(‘Ext.grid.Panel’, { title: ‘easy grid’, width: 400, height: 300, renderTo: Ext.getBody(), frame: true, viewConfig: { forceFit: true, stripRows: true }, store: {//配置数据...
showForm = new Ext.FormPanel({ renderTo:”showPanel”, region:’north’, border:false, bodyBorder:false, frame:true, waitMsgTarget: true, labelAlign:’right’, id:”showForm”, items:[{ layout:’...
二、应用举例 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:”人员信息”, renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:”accordion”, layout
Extjs Layout Browser . Extjs3.1.0 版本支持17种,下面挑... 示例用法: 代码如下: new Ext.Panel({ layout: ‘absolute’, title: ‘AbsuluteLayout’, renderTo: document.body, frame: true, defaultType: ‘textf
一、 Form布局由类Ext.layout.FormLayout定义,名称为form,... 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:”人员信息”, renderTo:Ext.getBody(), frame:true, width:500, height:300, l
Ext.create(“Ext.form.Panel”,{ title:’本地hiddenfield实例’, renderTo:’formDemo’, bodyPadding:’5 5 5 5′, height:100, width:270, frame:true, defaults:{ labelSeparator :”: “, labelWidth : 70, ...
- 0000765: UniImage: Bug when both Proportional and Stretch are true - New Demo: DrawCell 0.83.1.812 +---------------------------------------------------------------------------------------- - ...
public class SR_Slider extends Frame implements ActionListener, WindowListener, Runnable { public static void main(String Pagli[]) { new SR_Slider(); } Thread time; //new thread File fl; URL ...