- 浏览: 398725 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (139)
- java (39)
- linux (9)
- hibernate (2)
- Spring (10)
- Struts2 (1)
- Ext (38)
- Ext + Java (5)
- Oracle (5)
- JavaScript (15)
- 开发工具 (3)
- ajax (2)
- WebSerivice+Spring (2)
- WebService+CXF (2)
- 服务器 (4)
- MQ (1)
- Apache (3)
- axis (3)
- myeclipse,maven (2)
- WebService (4)
- web (11)
- httpinvoke (1)
- 多线程 (3)
- 同步 (1)
- Servlet (2)
- css (2)
- div (2)
- html (1)
- file (2)
- 应用软件 (1)
- myEclipse10 (1)
- mysql (2)
- Extjs4 (2)
- JavaScript css (1)
- mongodb (2)
- socket (6)
- 流媒体 (5)
- 语音技术 (5)
- freeswitch (1)
最新评论
-
白天看黑夜:
Apache Mina Server 2.0 中文参考手册(带 ...
Apache Mina 学习 -
stduPanda:
引用引用[自行车在现场咨询quote]引用引用引用引用引用引用 ...
Errors running builder 'DeploymentBuilder' on project '工程名' -
鱼翔空:
maven3 导入报Plugin execution not ...
CXF自动生成wsdl与xsd文件 -
哈哈哥_Supper:
closeAction:'hide',
Extjs4 tabPanel关闭后打开 cannot read property addcls of null -
哈哈哥_Supper:
var tab1 = tabPanel.add(
...
Extjs4 tabPanel关闭后打开 cannot read property addcls of null
文章转载自:http://virgoooos.iteye.com/blog/288924,版权归原作者所有
extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下,帮助记忆。
- Ext.OnReady(function(){
- var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'accordion',
- width:500,
- height:200,
- layoutConfig:{animate:false},
- items:[
- {title:'元素1',html:''},
- {title:'元素2',html:''},
- {title:'元素3',html:''},
- {title:'元素4',html:''}
- ]
- }
- );
- });
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
- Ext.onReady(function() {
- var panel1 = new Ext.Panel({
- title: "panel1",
- height: 100,
- anchor: '-50',
- html: "高度等于100,宽度=容器宽度-50"
- });
- var panel2 = new Ext.Panel({
- title: "panel2",
- height: 100,
- anchor: '50%',
- html: "高度等于100,宽度=容器宽度的50%"
- });
- var panel3 = new Ext.Panel({
- title: "panel3",
- anchor: '-10, -250',
- html: "宽度=容器宽度-10,高度=容器宽度-250"
- });
- var win = new Ext.Window({
- title: "Anchor Layout",
- height: 400,
- width: 400,
- plain: true,
- layout: 'anchor',
- items: [panel1, panel2,panel3]
- });
- win.show();
- });
- Ext.onReady(function() {
- var button = Ext.get('show-btn');
- var win;
- button.on('click', function() {
- //创建TabPanel
- var tabs = new Ext.TabPanel({
- region: 'center', //border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间
- margins: '3 3 3 0',
- activeTab: 0,
- defaults: {
- autoScroll: true
- },
- items: [{
- title: 'Bogus Tab',
- html: "第一个Tab的内容."
- }, {
- title: 'Another Tab',
- html: "我是另一个Tab"
- }, {
- title: 'Closable Tab',
- html: "这是一个可以关闭的Tab",
- closable: true
- }]
- });
- //定义一个Panel
- var nav = new Ext.Panel({
- title: 'Navigation',
- region: 'west', //放在西边,即左侧
- split: true,
- width: 200,
- collapsible: true, //允许伸缩
- margins: '3 0 3 3',
- cmargins: '3 3 3 3'
- });
- //如果窗口第一次被打开时才创建
- if (!win) {
- win = new Ext.Window({
- title: 'Layout Window',
- closable: true,
- width: 600,
- height: 350,
- border : false,
- plain: true,
- layout: 'border',
- closeAction:'hide',
- items: [nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局
- });
- }
- win.show(button);
- });
- });
- Ext.onReady(function() {
- var i = 0;
- var navHandler = function(direction) {
- if (direction == -1) {
- i--;
- if (i < 0) { i = 0; }
- }
- if (direction == 1) {
- i++;
- if (i > 2) { i = 2; return false; }
- }
- var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
- var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
- if (i == 0) {
- btnBack.disabled = true;
- }
- else {
- btnBack.disabled = false;
- }
- if (i == 2) {
- btnNext.value = "完成";
- btnNext.disabled = true;
- }
- else {
- btnNext.value = "下一步";
- btnNext.disabled = false;
- }
- card.getLayout().setActiveItem(i);
- };
- var card = new Ext.Panel({
- width: 200,
- height: 200,
- title: '注册向导',
- layout: 'card',
- activeItem: 0, // make sure the active item is set on the container config!
- bodyStyle: 'padding:15px',
- defaults: {
- border: false
- },
- bbar: [
- {
- id: 'move-prev',
- text: '上一步',
- handler: navHandler.createDelegate(this, [-1])
- },
- '->',
- {
- id: 'move-next',
- text: '下一步',
- handler: navHandler.createDelegate(this, [1])
- }
- ],
- items: [{
- id: 'card-0',
- html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
- }, {
- id: 'card-1',
- html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
- }, {
- id: 'card-2',
- html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
- }],
- renderTo: "container"
- });
- });
- Ext.onReady(function() {
- var win = new Ext.Window({
- title: "Column Layout",
- height: 300,
- width: 400,
- plain: true,
- layout: 'column',
- items: [{
- title:"width=50%",
- columnWidth:0.5,
- html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
- height:200
- },
- {
- title:"width=250px",
- width: 200,
- height:100,
- html:"固定宽度为250px"
- }
- ]
- });
- win.show();
- });
- Ext.OnReady(function(){
- var panel=new Ext.Panel(
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'fit',
- width:500,
- height:100,
- items:[
- {title:'子元素1'},
- {title:'子元素2'},
- {title:'子元素3'},
- {title:'子元素4'},
- {title:'子元素5'}
- ]
- }
- );
- });
- Ext.onReady(function() {
- var win = new Ext.Window({
- title: "form Layout",
- height: 150,
- width: 230,
- plain: true,
- bodyStyle: 'padding:15px',
- items:
- {
- xtype: "form",
- labelWidth: 30,
- defaultType: "textfield",
- frame:true,
- items:
- [
- {
- fieldLabel:"姓名",
- name:"username",
- allowBlank:false
- },
- {
- fieldLabel:"呢称",
- name:"nickname"
- },
- {
- fieldLabel: "生日",
- xtype:'datefield',
- name: "birthday",
- width:127
- }
- ]
- }
- });
- win.show();
- });
- Ext.onReady(function(){
- var panel=new Ext.Panel(
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'table',
- width:500,
- height:200,
- layoutConfig:{columns:3},//将父容器分成3列
- items:[
- {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
- {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
- {title:'元素3',html:'sdfsdfsdf'},
- {title:'元素4',html:''}
- ]
- }
- );
- });
发表评论
-
linux下查找java进程占用CPU过高原因
2018-04-03 12:35 8071. 查找进程 top查看进程占用资源情况 ... -
Ext6 treePanel默认加载两级或多级本地树信息其他加载远程数据
2018-03-21 16:54 774代码使用如下: Ext.define('user.v ... -
Apache Mina TCP/UDP功能使用说明
2017-03-14 14:18 1788Apache Mina ... -
Ext4 viewConfig getRowClass 背景颜色修改
2016-03-02 01:28 2196css .my_row_red .x-grid-cell ... -
Ext4 treePanel checkBox选择样例
2015-12-27 13:57 2061/** * 功能主程序类 */ Ext.defin ... -
Input File sumbit Class not found
2015-12-02 00:05 1159最近文件上传,遇到一个愚蠢问题,在form表单提交内容到ac ... -
Extjs4 获取node
2014-07-22 16:17 927var node=treePanel.getStore().g ... -
Extjs4 节点刷新
2014-07-09 15:05 1101ext4以前的节点刷新,只需要 node.reload()即可 ... -
Extjs4 grid 修改后去掉红三角
2014-03-19 16:09 1222Extjs4 gridPanel 中添加以下配置,修改后, ... -
Extjs4 comboBox 动态赋值
2014-03-12 10:35 1887//首先先定义comboBox的Model Ext.de ... -
Extjs4 tabPanel关闭后打开 cannot read property addcls of null
2014-03-03 13:45 5501最近遇到一个刺手的问题,折腾了好久,一直没找到原因,问题是: ... -
Extjs4 gridpanel 鼠标放上,qtip数据提示
2014-01-27 13:58 2369colModel : new Ext.grid.Colum ... -
Extjs4 comboBox qtip
2014-01-27 13:54 1449// 数据 var _Store = new Ext.da ... -
Extjs4 treepanel 选中当前 节点
2014-01-27 13:45 7353Extjs3 中 可以这样获取 this.getNodeBy ... -
Extjs4 ref 不支持。可以通过query查询
2014-01-15 11:04 1956var panel = new Ext.panel.Pane ... -
Extjs4 fieldLabel width
2014-01-14 16:49 5547var wordName = new Ext.form.Te ... -
Extjs4 gridPanel 编辑
2014-01-03 16:48 0Ext.grid.RowEditor.prototype.s ... -
Extjs4 分页绑定参数
2014-01-03 14:22 1123//注意红字部分。由于分页的时候,需要带上原始的参数。所以需 ... -
Ext textField 回车 提交
2013-12-16 17:11 959var name = new Ext.form.TextFi ... -
Extjs4 gridPanel 列按照百分比分配宽度
2013-12-16 17:05 5006//下面红色部分设置属性值,看注释 var _store ...
相关推荐
ExtJs允许自定义主题和皮肤,通过CSS样式表和图片资源,可以轻松改变整个应用程序的外观,以适应不同的品牌风格。 总的来说,ExtJs 3.3中文API文档详尽地介绍了这些知识点,为开发者提供了全面的参考指南,帮助...
最后,ExtJS的皮肤系统允许开发者自定义界面样式,以适应不同品牌和风格的需求。教程中可能涉及如何选择和应用预置的皮肤,甚至如何创建自己的皮肤。 总之,"ExtJs2.0电子教程"将带你全面了解ExtJS 2.0的基本概念、...
- **ext-all.css**:包含EXTJS所有组件的CSS样式定义。 - **ext-base.js**:EXTJS的基础库,可根据需要选择其他基础库。 - **ext-all.js** 或 **ext-all-debug.js**:分别用于生产环境和开发调试环境的EXTJS核心库。...
ExtJS提供了多种布局策略,如边框布局(Border Layout)、卡片布局(Card Layout)等,方便开发者灵活安排页面元素的显示方式。 ### 1.4 ExtJS的开发环境与工具 ExtJS的开发不仅依赖于良好的编码习惯,还需要一...
ExtJS是一种广泛应用于Web开发的JavaScript库,特别适合构建富客户端应用。在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以...
- **resource**: 包含 ExtJs 使用的图片文件和样式表文件。 - **src**: 未压缩的源文件代码。 - **bootstrap.js**: 引导文件,可以根据参数自动切换 ext-all.js 和 ext-all-debug.js。 - **ext-all.js**: 核心库...
5. Graphic JavaScript Tree with Layout:实现了特定的节点定位算法,提供了一种视觉展示的树形结构。 6. FlyminiTree 1.0:作为另一款JavaScript树控件,虽然没有更多的描述,但名字暗示了它可能是小巧易用的类型...
`themes`目录则包含了EasyUI的主题样式文件,开发者可以自定义或选择预设的主题,以改变应用的视觉效果,满足不同设计风格的需求。 总的来说,EasyUI的最新版本提供了丰富的UI组件、灵活的布局方案以及良好的扩展性...
4. **布局管理**:`Ext.layout`包含各种布局管理器,如`Ext.layout.container.Fit`和`Ext.layout.container.Border`,它们负责计算和调整组件的大小和位置。 5. **AJAX通信**:`Ext.Ajax`提供了与服务器交互的接口...
- **EXT** 提供了多种布局方式,如卡片布局(Card Layout)、边界布局(Border Layout)等。 - 通过布局可以方便地管理和调整界面元素的位置和大小。 7. **表格组件**: - **Grid** 组件是 **EXT** 中非常重要的一...
1. **安装与引入**:了解如何在项目中引入jQuery和jQuery EasyUI的库文件,包括CSS样式表和JavaScript文件。 2. **基本使用**:学习如何通过HTML标签和数据属性(data-*)来创建和配置组件。 3. **组件初始化**:...
- **改进的组件库**:Ext.JS 4.0 对组件库进行了大量的改进和扩展,新增了许多高级组件,如卡片式布局(Card Layout)、视图分组(Viewport Grouping)等,使得开发者能够构建更加复杂的用户界面。 - **样式定制**:通过...
- **comboxForToolBar**:工具栏下拉框,与工具栏风格一致的下拉框。 - **fill**:填充空间,用于自动适应剩余空间。 - **menuCheckItem**:菜单中的复选项,用于菜单中的复选功能。 - **colorMenu**:颜色选择...