Extjs4.2——Panel

一、Panel的border属性:

示例:

Ext.create(‘Ext.panel.Panel‘, {
                title: ‘Hello‘,
                width: 200,
                height:100,
                border:true,//设置具体值无效,如:border:12
                html: ‘<p>World!</p>‘,
                renderTo: Ext.getBody()
            });

虽然在API中查询是可设置border宽度的,但是实际测试只能设置是否显示border,若要设置border宽度,则在style中设置borderWidth属性,如下:

Ext.create(‘Ext.panel.Panel‘, {
            title: ‘Hello‘,
            width: 200,
            height:100,
            border:true,//显示边框
//                border: 15,//设置具体值无效无效
//                border:‘10 5 3 10‘,//无效
            style: {
                borderWidth:15,//设置边框宽度
                borderColor: ‘red‘,
                borderStyle: ‘solid‘
            },
            html: ‘<p>World!</p>‘,
            renderTo: Ext.getBody()
        });

效果:

时间: 2024-10-28 21:54:37

Extjs4.2——Panel的相关文章

ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 (转 )出处:[Lipan] (http://www.cnblogs.com/lipan/)

本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下面介绍几个基本配置项: 1.title:设置面板标题文本. 2.tbar,lbar,rbar,bbar:分别设置上.左.右.下四个部位的工具栏. 3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件. 4.buttons:设置按钮区的按钮. 下面看看面板生成代码:

ExtJS4.2学习(二)Ext统一组件模型——Panel

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-06/171.html ----------------------------------------------------------------------------------------- 前言:本博客几乎都是摘自Ext4.2的API 虽然Ext组件拥有几乎完美的对象继承模型,但是这毕竟属于底层架构的一部分,我们日常开发时候接触最多的还是

ExtJs4 笔记之Ext.tab.Panel 选项卡

本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文. 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据. 另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:精心开发5年的UI前端框架! <h1>基本

ExtJS4.2 grid panel双击事件

Ext.create('Ext.grid.Panel', {            store: relationStore,              listeners:{              itemdblclick:function(dataview, record, item, index, e){              }},            columns: [                { text: 'id',  dataIndex: 'id' , flex

Extjs4使用iframe注意事项

1 "video" : { 2 render : function(panel, eOpts) { 3 // 因为iframe在video 4 // panel渲染的时候就已经完全移动到video中了,所以document中就不再有iframe这个元素了 5 // video关闭的时候也会自动把panel中的所有元素销毁,所以如果我们还想使用iframe元素,只有再重新手动创建并添加到body中 6 var container = Ext.getBody(); 7 var eleMes

Extjs4.1MVC详解

app.js [javascript] view plaincopyprint? Ext.onReady(function(){ Ext.QuickTips.init(); Ext.Loader.setConfig({  //开启自动加载功能 enabled:true }); Ext.application({ name:'AM',      //自定义命名空间,通常都定义为AM appFolder:'app',  //配置Ext框架所在的文件目录 launch:function(){   //

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录

ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2

运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的index.jsp的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% response.setHeade

ExtJs4.2 登陆界面(点击验证码自动刷新,label实现click事件)

ExtJs4.2 登陆界面(点击验证码自动刷新,label实现click事件) 转载请注明:http://blog.csdn.net/qiuzhping/article/details/42596339 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%@ page langu