- 浏览: 641638 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
nehaoww:
754588141@qq.com,源码可以给一份吗
Struts/JSP可上传、预览服务器端文件(图片、文件、Flash、多媒体)文件组件 -
zzd_md:
把XmlTreeLoader.js 这个文件的路径改一下就好了 ...
ExtJs 实现的后台管理框架 -
llixinrui_strive:
EXT之form.load(转) -
liangzhang0929:
部门管理和用户管理的url怎么显示#,没法打开dept_lis ...
Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05 -
datouren:
您好想问你一下 为什么只显示根节点 其它节点不显示 目前是在一 ...
ExtJs加载本地txt格式的数据
例二:
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");
var btnBack = Ext.get("move-next");
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"
});
});
六、column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:
例一:
Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"column", width:500, height:100, items:[{title:"列1",width:100}, {title:"列2",width:200}, {title:"列3",width:100}, {title:"列4",width:95} ] }); });
上面的代码在容器组件中放入了四个元素,在容器组件中形成4列,列的宽度分别为100,200,100及剩余宽度,执行结果如
例二:columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)
Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"column", width:500, height:100, items:[{title:"列1",columnWidth:0.2}, {title:"列2",columnWidth:0.3}, {title:"列3",columnWidth:0.3}, {title:"列4",columnWidth:0.2} ] }); });
例三:column和columnWidth的混合使用
Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"column", width:500, height:100, items:[{title:"列1",width:200}, {title:"列2",columnWidth:0.3}, {title:"列3",columnWidth:0.3}, {title:"列4",columnWidth:0.4} ] }); });
例四.
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 Form全攻略1
2010-10-24 10:51 22001 Form概述Formpanel是一个重要的页面组件,在具体 ... -
form.load()加载后,怎么得到服务端返回的JSON数据?-转至 一起Ext
2010-10-23 10:36 5294Ext.Ajax.request({ ur ... -
EXT之form.load(转)
2010-10-23 10:32 4603大家看下面的简单例子,如果我们要实现一个从后台读取对应数据 ... -
Ext 3.0 - 中文API文档 (完整的chm版本) 2009年5月由JS堂翻译小组完成
2009-12-14 16:37 5145大家可以下载了,我也是在网上下载的,出来和大家分享 此贴中 ... -
ExtJs 实现的后台管理框架
2009-12-14 16:21 12360由ExtJs实现的后台管理框架, 你只要添加你左边的树型数据 ... -
ExtJs加载本地xml格式的数据
2009-12-12 16:24 5248<script type="text/jav ... -
ExtJs加载本地txt格式的数据
2009-12-12 10:56 2799/** * 动态加载本地txt格式的数据 */ ... -
ExtJs加载JSON格式树
2009-12-12 10:41 12741html文件中加入 <script src=" ... -
ExtJs生成静态树
2009-12-12 09:40 4999类Ext.tree.TreePanel 包: ... -
ExtJS笔记--Ext.form.FormPanel(四)综合实例
2009-09-12 19:11 13513//表单开始----------------------- ... -
ExtJS笔记--Ext.form.FormPanel(三)
2009-09-12 19:08 36721、afterlayout( Ext.Container ... -
ExtJS笔记--Ext.form.FormPanel(二)
2009-09-12 19:04 72111、layout : String 此容器所使用 ... -
ExtJS笔记--Ext.form.FormPanel(一)
2009-09-12 18:59 10785Ext.form.FormPanel 类全称: ... -
ExtJS笔记--Ext.form.FieldSet
2009-09-12 18:57 8945Ext.form.FieldSet 类全称: Ext.for ... -
ExtJS笔记--Ext.form.Field
2009-09-12 18:55 9763Ext.form.Field 类全称: Ext.form.F ... -
ExtJS笔记--Ext.form.DateField
2009-09-11 13:14 12652Ext.form.DateField 类全称: Ex ... -
ExtJS笔记--Ext.form.ComboBox
2009-09-11 07:00 8097Ext.form.ComboBox 类全称: Ex ... -
ExtJS笔记--Ext.form.Checkbox
2009-09-11 06:58 6584Ext.form.Checkbox 类全称: Ext.f ... -
ExtJS笔记--Ext.data详解
2009-09-11 06:56 7789Ext.data Ext.data在命名空间中定义了一系 ... -
ExtJS笔记--Ext..Button组件
2009-09-11 06:52 12542Ext..Button组件 例: Ext.Quick ...
相关推荐
ExtJS应用总结的学习笔记,很实用、直观、讲述翔实,值得初学者学习参考。
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
ExtJs的LayOut详解.ExtJs界面绚丽,希望大家可以好好学习。
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
ExtJS的12种样式 挺丰富的. 有black.calista.darkgray.gray.green.indigo.midnight.olive.pink.purple.slate.slickness.
用extjs4搭的一个简单布局框架
extjs layout demo extjs layout demo
extjs数据存储与传输详解,为了方便大家学习ExtJs技术,特总结了ExtJs最常用的Store部分内容,供大家参考...
extjs-form组件配置参数详解 extjs各种组件说明
用户信息添加的表单 内有效果图 extjs 常用控件的使用 table layout 作业9
Extjs核心api详解
全面解析ExtJS4以及使用经验总结,包括新特性。
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。
这是《ExtJs Web应用程序开发详解》书中1-8章的源码
extjs_x主题样式文件
ExtJS开发实战 ExtJS开发实战 上传只能选资源分,没办法,我想免费分享的
Extjs4详解,详细介绍Extjs4开发技术,自是不必多说!
Extjs4.0学习手册、入门教程详解学习 Extjs4.0学习手册、入门教程详解学习 Extjs4.0学习手册、入门教程详解学习