如何修改微信好友昵称:extjs 大杂烩
来源:百度文库 编辑:中财网 时间:2024/05/03 09:29:11
表单组件_v2.2(四)
- 博客分类:
- ExtJS_3.0
1、下拉框组件支持中间模糊查询
Js代码- function listener_ComboboxBeforeQuery(e){
- var combo = e.combo;
- try{
- var value = e.query;
- combo.lastQuery = value;
- combo.store.filterBy(function(record,id){
- var text = record.get(combo.displayField);
- return (text.indexOf(value)!=-1);
- });
- combo.onLoad();
- combo.expand();
- return false;
- }catch(e){
- combo.selectedIndex = -1;
- combo.store.clearFilter();
- combo.onLoad();
- combo.expand();
- return false;
- }
- }
function listener_ComboboxBeforeQuery(e){var combo = e.combo; try{ var value = e.query;combo.lastQuery = value; combo.store.filterBy(function(record,id){ var text = record.get(combo.displayField); return (text.indexOf(value)!=-1); });combo.onLoad();combo.expand();return false;}catch(e){combo.selectedIndex = -1;combo.store.clearFilter();combo.onLoad(); combo.expand();return false; }}
- 15:51
- 评论 / 浏览 (0 / 265)
- 分类:Web前端
表单组件_v2.2(三)
- 博客分类:
- ExtJS_3.0
本范例展示如何使用表单的各种组件。
下拉框组件展示了5种使用范例:普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget = "qtip";
- //component
- var hiddenField = new Ext.form.Hidden({
- name: "hiddenField",
- value: "1"
- });
- var usernameField = new Ext.form.TextField({
- name: "username",
- fieldLabel: "用户名",
- allowBlank: true,
- blankText: "请输入用户名!"
- });
- var pwdField = new Ext.form.TextField({
- name: "password",
- fieldLabel: "密码",
- allowBlank: true,
- blankText: "请输入密码!",
- inputType: "password"
- });
- var ageField = new Ext.form.NumberField({
- name: "age",
- allowBlank: true,
- blankText: "请输入年龄!",
- fieldLabel: "年龄",
- allowDecimals: false,
- allowNegative: false,
- minValue: 18,
- minText: "年龄不能少于18",
- maxValue: 100,
- maxText: "年龄不能大于100"
- });
- var love1 = new Ext.form.Checkbox({
- name: "love1",
- boxLabel: "打球",
- inputValue: "1"
- });
- var love2 = new Ext.form.Checkbox({
- name: "love2",
- boxLabel: "游泳",
- inputValue: "2"
- });
- var love3 = new Ext.form.Checkbox({
- name: "love3",
- boxLabel: "登山",
- inputValue: "3"
- });
- var loveGroup = new Ext.form.CheckboxGroup({
- name: "love",
- columns: [80, 80, 1.0],
- fieldLabel: "爱好",
- items: [love1, love2, love3]
- });
- var sex1 = new Ext.form.Radio({
- name: "sex1",
- boxLabel: "男",
- inputValue: "1"
- });
- var sex2 = new Ext.form.Radio({
- name: "sex1",
- boxLabel: "女",
- inputValue: "0"
- });
- var sexGroup = new Ext.form.RadioGroup({
- name: "sex",
- columns: [80, 1.0],
- fieldLabel: "性别",
- items: [sex1, sex2]
- });
- //本地数据源的组合框
- var store = new Ext.data.SimpleStore({
- fields: ["code", "name"],
- data: [
- ["1", "北京"],
- ["5", "上海"],
- ["4", "广东"]
- ]
- });
- var cmbProvince = new Ext.form.ComboBox({
- id: "cmbProvince",
- hiddenName: "province.id",
- fieldLabel: "省份",
- resizable: true,
- editable: false,
- width: 100,
- emptyText: "请选择...",
- store: store,
- valueField: "code",
- displayField: "name",
- triggerAction: "all",
- mode: "local"
- });
- //远程数据源的组合框
- var store2 = new Ext.data.SimpleStore({
- fields: ["name"],
- proxy: new Ext.data.HttpProxy({
- url: "../testForm!loadData.action"
- })
- });
- var cmbManager = new Ext.form.ComboBox({
- hiddenName: "manager",
- fieldLabel: "经理",
- editable: false,
- triggerAction: "all",
- mode: "local",
- maxHeight: 200,
- store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
- onSelect: Ext.emptyFn,
- tpl: "
" - });
- var root = new Ext.tree.TreeNode({
- nodeId: 1,
- text: "根节点",
- expanded: true
- });
- root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));
- root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));
- var tree = new Ext.tree.TreePanel({
- root: root,
- border: false,
- autoHeight: true,
- autoScroll: true
- });
- tree.on("click", function(node){
- if(!node.isLeaf()) return; //只能选择叶节点
- //下拉框的隐藏值
- if(cmbManager.hiddenField){
- cmbManager.hiddenField.value = node.attributes.nodeId;
- }
- cmbManager.setRawValue(node.text); //下拉框的显示值
- cmbManager.collapse(); //折叠下拉框
- });
- cmbManager.on("expand", function(){
- tree.render("tree");
- });
- //分页远程数据源的组合框
- var store3 = new Ext.data.JsonStore({
- url: "../testForm!loadData3.action",
- totalProperty: "totalNum",
- root: "books",
- fields: ["id", "name"]
- });
- var cmbBook = new Ext.form.ComboBox({
- hiddenName: "books",
- fieldLabel: "书籍",
- store: store3,
- valueField: "name",
- displayField: "name",
- triggerAction: "all",
- mode: "remote",
- queryParam: "books",
- loadingText: "正在装载数据...",
- width: 180,
- minChars: 1,
- editable: false,
- listWidth: 250,
- pageSize: 3
- });
- //HTML标准组件
- var cmbPass = new Ext.form.ComboBox({
- hiddenName: "status",
- fieldLabel: "是否有效",
- triggerAction: "all",
- editable: false,
- width: 100,
- transform: "isPass",
- lazyRender: true
- });
- var cmbTimes = new Ext.form.TimeField({
- hiddenName: "time",
- fieldLabel: "时间",
- minValue: "09:00",
- minText: "所选时间应大于{0}",
- maxValue: "18:00",
- maxText: "所选时间应小于{0}",
- format: "H时i分",
- increment: 30,
- invalidText: "时间格式无效!",
- maxHeight: 200,
- width: 100,
- value: "09时00分",
- editable: false
- });
- var cmbMonths = new Ext.ux.MultiSelectCombo({
- hiddenName: "months",
- fieldLabel: "月份",
- maxHeight: 200,
- editable: false,
- store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
- mode: "local",
- width: 180,
- maxItemsCount: 3,
- maxItemsCountText: "最多只能选择三个选项!"
- });
- var cmbBirths = new Ext.form.DateField({
- name: "births",
- fieldLabel: "出生日期",
- disabledDays: [0,6],
- disabledDaysText: "禁止选择周末!",
- width: 100,
- readOnly: true,
- format: "Y-m-d",
- invalidText: "不是有效的日期值!"
- });
- var fieldSet1 = new Ext.form.FieldSet({
- title: "下拉框",
- checkboxName: "fieldSet1",
- checkboxToggle: true,
- autoHeight: true,
- layout: "table",
- layoutConfig: {
- columns: 3
- },
- defaults: {
- style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
- layout:"form",
- labelAlign: "right"
- },
- items: [
- {rowspan:1, colspan:1, items:[cmbProvince]},
- {rowspan:1, colspan:1, items:[cmbManager]},
- {rowspan:1, colspan:1, items:[cmbBook]},
- {rowspan:1, colspan:1, items:[cmbPass]},
- {rowspan:1, colspan:1, items:[cmbTimes]},
- {rowspan:1, colspan:1, items:[cmbMonths]},
- {rowspan:1, colspan:1, items:[cmbBirths]}]
- });
- var remarksField = new Ext.form.TextArea({
- name: "remarks",
- fieldLabel: "备注",
- width: 400,
- height: 80
- });
- var form = new Ext.form.FormPanel({
- id: "frmAddUser",
- title: "新增用户",
- autoWidth: true,
- autoHeight: true,
- frame: true,
- renderTo: Ext.getBody(),
- labelWidth: 70,
- tbar: toolbar,
- items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
- fieldSet1, remarksField],
- url: "../testForm!ajaxSubmitForm.action"
- });
- });
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif"; Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = "qtip";//componentvar hiddenField = new Ext.form.Hidden({name: "hiddenField",value: "1"});var usernameField = new Ext.form.TextField({name: "username",fieldLabel: "用户名",allowBlank: true,blankText: "请输入用户名!"});var pwdField = new Ext.form.TextField({name: "password",fieldLabel: "密码",allowBlank: true,blankText: "请输入密码!",inputType: "password"});var ageField = new Ext.form.NumberField({name: "age",allowBlank: true,blankText: "请输入年龄!",fieldLabel: "年龄",allowDecimals: false,allowNegative: false,minValue: 18,minText: "年龄不能少于18",maxValue: 100,maxText: "年龄不能大于100"});var love1 = new Ext.form.Checkbox({name: "love1",boxLabel: "打球",inputValue: "1"});var love2 = new Ext.form.Checkbox({name: "love2",boxLabel: "游泳",inputValue: "2"});var love3 = new Ext.form.Checkbox({name: "love3",boxLabel: "登山",inputValue: "3"});var loveGroup = new Ext.form.CheckboxGroup({name: "love",columns: [80, 80, 1.0],fieldLabel: "爱好",items: [love1, love2, love3]});var sex1 = new Ext.form.Radio({name: "sex1",boxLabel: "男",inputValue: "1"});var sex2 = new Ext.form.Radio({name: "sex1",boxLabel: "女",inputValue: "0"});var sexGroup = new Ext.form.RadioGroup({name: "sex",columns: [80, 1.0],fieldLabel: "性别",items: [sex1, sex2]});//本地数据源的组合框var store = new Ext.data.SimpleStore({fields: ["code", "name"],data: [["1", "北京"],["5", "上海"],["4", "广东"]]});var cmbProvince = new Ext.form.ComboBox({id: "cmbProvince",hiddenName: "province.id",fieldLabel: "省份",resizable: true,editable: false,width: 100,emptyText: "请选择...",store: store,valueField: "code",displayField: "name",triggerAction: "all",mode: "local"});//远程数据源的组合框var store2 = new Ext.data.SimpleStore({fields: ["name"],proxy: new Ext.data.HttpProxy({url: "../testForm!loadData.action"})});var cmbManager = new Ext.form.ComboBox({hiddenName: "manager",fieldLabel: "经理",editable: false,triggerAction: "all",mode: "local",maxHeight: 200,store: new Ext.data.SimpleStore({fields:[],data:[[]]}),onSelect: Ext.emptyFn,tpl: ""});var root = new Ext.tree.TreeNode({nodeId: 1,text: "根节点",expanded: true});root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));var tree = new Ext.tree.TreePanel({root: root,border: false,autoHeight: true,autoScroll: true});tree.on("click", function(node){ if(!node.isLeaf()) return; //只能选择叶节点//下拉框的隐藏值if(cmbManager.hiddenField){cmbManager.hiddenField.value = node.attributes.nodeId;}cmbManager.setRawValue(node.text); //下拉框的显示值cmbManager.collapse(); //折叠下拉框});cmbManager.on("expand", function(){ tree.render("tree"); }); //分页远程数据源的组合框var store3 = new Ext.data.JsonStore({url: "../testForm!loadData3.action",totalProperty: "totalNum",root: "books",fields: ["id", "name"]});var cmbBook = new Ext.form.ComboBox({hiddenName: "books",fieldLabel: "书籍",store: store3,valueField: "name",displayField: "name",triggerAction: "all",mode: "remote",queryParam: "books",loadingText: "正在装载数据...",width: 180,minChars: 1,editable: false,listWidth: 250,pageSize: 3});//HTML标准组件var cmbPass = new Ext.form.ComboBox({hiddenName: "status",fieldLabel: "是否有效",triggerAction: "all",editable: false,width: 100,transform: "isPass",lazyRender: true});var cmbTimes = new Ext.form.TimeField({hiddenName: "time",fieldLabel: "时间",minValue: "09:00",minText: "所选时间应大于{0}",maxValue: "18:00",maxText: "所选时间应小于{0}",format: "H时i分",increment: 30,invalidText: "时间格式无效!",maxHeight: 200,width: 100,value: "09时00分",editable: false});var cmbMonths = new Ext.ux.MultiSelectCombo({hiddenName: "months",fieldLabel: "月份",maxHeight: 200,editable: false,store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],mode: "local",width: 180,maxItemsCount: 3,maxItemsCountText: "最多只能选择三个选项!"});var cmbBirths = new Ext.form.DateField({name: "births",fieldLabel: "出生日期",disabledDays: [0,6],disabledDaysText: "禁止选择周末!",width: 100,readOnly: true,format: "Y-m-d",invalidText: "不是有效的日期值!"});var fieldSet1 = new Ext.form.FieldSet({title: "下拉框",checkboxName: "fieldSet1",checkboxToggle: true,autoHeight: true,layout: "table",layoutConfig: {columns: 3},defaults: {style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",layout:"form",labelAlign: "right"},items: [{rowspan:1, colspan:1, items:[cmbProvince]},{rowspan:1, colspan:1, items:[cmbManager]},{rowspan:1, colspan:1, items:[cmbBook]},{rowspan:1, colspan:1, items:[cmbPass]},{rowspan:1, colspan:1, items:[cmbTimes]},{rowspan:1, colspan:1, items:[cmbMonths]},{rowspan:1, colspan:1, items:[cmbBirths]}]});var remarksField = new Ext.form.TextArea({name: "remarks",fieldLabel: "备注",width: 400,height: 80});var form = new Ext.form.FormPanel({id: "frmAddUser",title: "新增用户",autoWidth: true,autoHeight: true,frame: true,renderTo: Ext.getBody(),labelWidth: 70,tbar: toolbar,items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, fieldSet1, remarksField],url: "../testForm!ajaxSubmitForm.action"});});
- 大小: 15.1 KB
- 查看图片附件
- 22:21
- 评论 / 浏览 (0 / 570)
- 分类:Web前端
表单组件_v2.2(二)
- 博客分类:
- ExtJS_3.0
1、Ext.form.Hidden
2、Ext.form.Label
配置项:
html:
text:
3、Ext.form.TextField
配置项:
allowBlank:是否允许为空,默认为true
blankText:空验证失败后显示的提示信息
emptyText:在一个空字段中默认显示的信息
grow:字段是否自动伸展和收缩,默认为false
growMin:收缩的最小宽度
growMax:伸展的最大宽度
inputType:字段类型:默认为text
maskRe:用于过滤不匹配字符输入的正则表达式
maxLength:字段允许输入的最大长度
maxLengthText:最大长度验证失败后显示的提示信息
minLength:字段允许输入的最小长度
minLengthText:最小长度验证失败后显示的提示信息
regex:正则表达式
regexText:正则表达式验证失败后显示的提示信息
vtype:验证类型的名字
alpha:限制只能输入字母
alphanum:限制只能输入字母和数字
email
url
vtypeText:验证失败时的提示信息
validator:自定义验证函数
selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false
4、Ext.form.TextArea
配置项:
preventScrollbars:是否禁止出现滚动条,默认为false
5、Ext.form.NumberField
配置项:
allowDecimals:是否允许输入小数,默认为true
allowNegative:是否允许输入负数,默认为true
baseChars:输入的有效数字集合,默认为'0123456789'
decimalPrecision:数字的精度,默认保留小数点后2位
decimalSeparator:十进制分隔符,默认为'.'
maxValue:允许输入的最大数值
maxText:超过最大值之后的提示信息
minValue:允许输入的最小数值
minText:超过最小值之后的提示信息
nanText:输入非有效数值之后的提示信息
6、Ext.form.Checkbox
配置项:
boxLabel:复选框的文字描述
checked:复选框是否被选择,默认为false
handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked
inputValue:
方法:
getValue():返回复选框的checked状态
setValue( Boolean/String checked ):
7、Ext.form.CheckboxGroup
配置项:
allowBlank:是否允许不选择,默认为true
blankText:
columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
items:对象数组
vertical:是否垂直方向显示对象,默认为false
8、Ext.form.Radio
方法:
getGroupValue():
setValue( value {String/Boolean} ):
9、Ext.form.RadioGroup
配置项:
allowBlank:
blankText:
10、Ext.form.ComboBox
配置项:
displayField:被显示在下拉框中的字段名
editable:是否可编辑,默认为true
forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。
hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth:下拉列表的宽度
minListWidth:下拉列表的最小宽度,默认为70像素
loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
maxHeight:下拉列表框的最大高度,默认为300像素
minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,mode='local'默认为0
mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据
pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效
queryParam:查询的名字,默认为'query',将被传递到查询字符串中
allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''
selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable=true时才会生效
store:列表框绑定的数据源
transform:将页面中已存在的元素转换为组合框
lazyInit:延时初始化下拉列表,默认为true
lazyRender:延时渲染,默认为false
triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询
typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false
value:初始化组合框中的值
valueField:组合框的值字段
valueNotFoundText:值不存在时的提示信息
tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式
方法:
clearValue():清空字段当前值
doQuery( String query, Boolean forceAll ):
getValue():
getStore():
setValue( String value ):
11、Ext.form.DateField
配置项:
maxValue:允许选择的最大日期
maxText:当日期大于最大值时的错误提示信息
minValue:允许选择的最小时间
minText:当日期小于最小值时的错误提示信息
format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”
Y:四位年份
m:带前缀0的月份
d:带前缀0的日期
y:两位年份
n:不带前缀0的月份
j:不带前缀0的日期
w:星期的数字,0表示星期日,1代表星期一
showToday:是否显示今天按钮,默认为true
altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates:禁止选择的日期组成的数组
disabledDatesText:选择禁选日期时显示的提示信息
disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一
disabledDaysText:选择禁选星期时显示的提示信息
invalidText:当日期值非法时显示的提示信息
方法:
getValue():取得日期值
12、Ext.form.FieldSet
配置项:
animCollapse:动画折叠,默认为false
checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false
checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效
labelWidth:字段标签的宽度,可以级联到子容器
layout:布局,默认为form
13、Ext.form.TimeField
配置项:
maxValue:列表中允许的最大时间
maxText:当时间大于最大值时的错误提示信息
minValue:列表中允许的最小时间
minText:当时间小于最小值时的错误提示信息
increment:两个相邻选项间的时间间隔,默认为15分钟
format:显示格式,默认为“g:i A”。一般使用“H:i:s”
H:带前缀0的24小时
i:带前缀0的分钟
s:带前缀0的秒
invalidText:当时间值非法时显示的提示信息
altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割
- 21:57
- 评论 / 浏览 (0 / 389)
- 分类:Web前端
表单组件_v2.2(一)
- 博客分类:
- ExtJS_3.0
1、Ext.form.Action
配置项:
success:执行成功后回调的函数,包括两个参数:form和action
failure:执行失败后回调的函数,包括两个参数:form和action
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
url:动作提交的路径
waitMsg:动作执行时显示的等待信息
属性:
Action.CLIENT_INVALID:客户端验证错误
Action.CONNECT_FAILURE:通信错误
Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回
Action.SERVER_INVALID:服务端验证错误
failureType:错误类型
result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}
type:动作类型,可选值有submit和load
Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性
Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性
2、Ext.form.BasicForm
配置项:
baseParams:传递到请求中的参数
method:表单的提交方式,有效值包括GET、POST
url:表单默认的提交路径
fileUpload:表单是否进行文件上传
timeout:表单动作的超时时间,默认为30秒
trackResetOnLoad:是否在表单初次创建时清楚数据
方法:
doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:
url:动作提交的路径
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
headers:
success:执行成功后回调的函数,包括两个参数:form和action
failure:执行失败后回调的函数,包括两个参数:form和action
clientValidation:是否客户端验证
clearInvalid():清除表单中所有的无效验证信息
findField( String id ):查找表单字段
getValues( [Boolean asString] ):
isDirty():表单数据是否被更改过
isValid():客户端验证是否成功
load( Object options ):执行表单读取动作
loadRecord( Record record ):从一个数据记录中读取数据到表单中
markInvalid( Array/Object errors ):成批设置表单字段为验证无效
reset():重置表单
setValues( Array/Object values ):成批设置表单字段值
submit( Object options ):执行表单提交动作
updateRecord( Record record ):持久化表单数据到记录集中
3、Ext.form.FormPanel
配置项:
items:一个元素或元素数组
buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中
buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center
labelWidth:表单标签的宽度
labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left
labelSeparator:字段标签与字段之间的分隔符,默认为':'
minButtonWidth:按钮的最小宽度,默认为75
方法:
getForm() : Ext.form.BasicForm
load( Object options )
startMonitoring()
stopMonitoring()
4、Ext.form.Field
配置项:
name:字段名
value:字段的初始化值
disabled:字段是否不可用,默认为false
fieldLabel:字段标签说明
hideLabel:隐藏字段标签,默认为false
labelSeparator:字段标签与字段之间的分隔符,默认为':'
labelStyle:字段标签样式
inputType:默认为text
invalidClass:默认为x-form-invalid
invalidText:字段非法文本提示
msgTarget:错误信息显示的位置,默认为qtip
qtip:显示一个浮动的提示信息
title:显示一个浏览器的浮动提示信息
under:在字段下方显示一个提示信息
side:在字段右边显示一个提示信息
readOnly:字段是否只读,默认为false
validateOnBlur:字段在失去焦点时被验证,默认为true
方法:
clearInvalid():
getRawValue()
setRawValue( Mixed value )
getValue()
setValue( Mixed value )
isDirty():字段值在装载后是否被修改过
isValid( Boolean preventMark ):当前字段值是否合法
markInvalid( [String msg] )
validate()
reset()
- 21:48
- 评论 / 浏览 (0 / 412)
- 分类:Web前端
属性表格:Ext.grid.PropertyGrid
- 博客分类:
- ExtJS_3.0
1、Ext.grid.PropertyGrid
主要配置项:
customEditors:自定义编辑器。内置编辑器有string、date、number、boolean
source:表格要显示的数据对象
主要方法:
getSource():取得数据源对象
setSource( Object source ):设置数据源对象,数据源格式如下:
grid.setSource({
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
});
2、范例源码
Js代码- var grid = new Ext.grid.PropertyGrid({
- title: "PropertyGrid实例",
- width: 300,
- height: 300,
- frame: true,
- source: {
- "员工名称": "张三",
- "出生日期": new Date(1978, 01, 02),
- "性别": "男",
- "是否已婚": true,
- "年龄": 31
- },
- customEditors: {
- "性别": new Ext.grid.GridEditor(new Ext.form.ComboBox({
- editable: false,
- displayField: "sex",
- mode: "local",
- triggerAction: "all",
- store: new Ext.data.SimpleStore({
- fields: ["sex"],
- data: [["男"], ["女"]]
- })
- })),
- //内置的日期编辑器有bug,自定义日期字段的编辑器可解决
- "出生日期": new Ext.grid.GridEditor(new Ext.form.DateField({
- format: "Y年m月d日",
- selectOnFocus: true,
- allowBlank: false
- }))
- }
- });
- //内置的日期字段格式是”m/j/Y“,如果需要改变默认格式则要通过取得表格的列模式来实现
- grid.getColumnModel().dateFormat = "Y年m月d日";
- grid.render("div1");
var grid = new Ext.grid.PropertyGrid({title: "PropertyGrid实例",width: 300,height: 300,frame: true,source: {"员工名称": "张三","出生日期": new Date(1978, 01, 02),"性别": "男","是否已婚": true,"年龄": 31},customEditors: {"性别": new Ext.grid.GridEditor(new Ext.form.ComboBox({editable: false,displayField: "sex",mode: "local",triggerAction: "all",store: new Ext.data.SimpleStore({fields: ["sex"],data: [["男"], ["女"]]})})),//内置的日期编辑器有bug,自定义日期字段的编辑器可解决"出生日期": new Ext.grid.GridEditor(new Ext.form.DateField({format: "Y年m月d日",selectOnFocus: true,allowBlank: false}))}});//内置的日期字段格式是”m/j/Y“,如果需要改变默认格式则要通过取得表格的列模式来实现grid.getColumnModel().dateFormat = "Y年m月d日";grid.render("div1");
- 大小: 19.7 KB
- 查看图片附件
- 21:03
- 评论 / 浏览 (0 / 1233)
- 分类:Web前端
可编辑表格:Ext.grid.EditorGridPanel
- 博客分类:
- ExtJS_3.0
1、Ext.grid.EditorGridPanel
主要配置项:
clicksToEdit:设置点击单元格进入编辑模式的点击次数,默认为2
autoEncode:是否自动编码/解码HTML内容,默认为false
selModel:默认为Ext.grid.CellSelectionModel
主要方法:
startEditing( Number rowIndex, Number colIndex ):开始编辑指定单元格
stopEditing( [Boolean cancel] ):结束编辑操作
2、范例源码
Js代码- var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];
- var person = Ext.data.Record.create([
- {name: "personId", mapping: 0},
- {name: "personName", mapping: 1},
- {name: "personAge", mapping: 2},
- {name: "personGender", mapping: 3},
- {name: "personBirth", mapping: 4}
- ]);
- //复选框选择模式
- var checkboxSM = new Ext.grid.CheckboxSelectionModel({
- checkOnly: false,
- singleSelect: false
- });
- var cellSM = new Ext.grid.CellSelectionModel();
- var grid = new Ext.grid.EditorGridPanel({
- title: "EditorGridPanel实例",
- renderTo: "div1",
- width: 500,
- height: 300,
- frame: true,
- tbar: [
- {
- text: "保存",
- iconCls: "save",
- handler: function(){
- }
- },
- {
- text: "刷新",
- iconCls: "refresh",
- handler: function(){
- }
- }
- ],
- store: new Ext.data.Store({
- reader: new Ext.data.ArrayReader({id:0}, person),
- data: datas
- }),
- columns: [
- checkboxSM,
- {
- id:"personId",
- header:"编号",
- width:50,
- dataIndex:"personId"
- },
- {
- id:"personName",
- header:"姓名",
- width:70,
- dataIndex:"personName",
- editor:new Ext.form.TextField({
- allowBlank:false
- })
- },
- {
- id:"personAge",
- header:"年龄",
- width:45,
- dataIndex:"personAge",
- editor:new Ext.form.NumberField()
- },
- {
- id:"personGender",
- header:"性别",
- width:45,
- dataIndex:"personGender",
- editor: new Ext.form.ComboBox({
- editable: false,
- displayField: "sex",
- mode: "local",
- triggerAction: "all",
- store: new Ext.data.SimpleStore({
- fields: ["sex"],
- data: [["男"], ["女"]]
- })
- })
- },
- {
- id:"personBirth",
- header:"出生日期",
- width:120,
- dataIndex:"personBirth",
- renderer:Ext.util.Format.dateRenderer("Y年m月d日"),
- editor:new Ext.form.DateField({
- format: "Y-m-d"
- })
- }
- ],
- autoExpandColumn: "personBirth",
- stripeRows: true,
- sm: checkboxSM
- });
var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]]; var person = Ext.data.Record.create([{name: "personId", mapping: 0},{name: "personName", mapping: 1},{name: "personAge", mapping: 2},{name: "personGender", mapping: 3},{name: "personBirth", mapping: 4}]);//复选框选择模式var checkboxSM = new Ext.grid.CheckboxSelectionModel({checkOnly: false,singleSelect: false});var cellSM = new Ext.grid.CellSelectionModel();var grid = new Ext.grid.EditorGridPanel({title: "EditorGridPanel实例",renderTo: "div1",width: 500,height: 300,frame: true,tbar: [{text: "保存",iconCls: "save",handler: function(){}},{text: "刷新",iconCls: "refresh",handler: function(){}}],store: new Ext.data.Store({reader: new Ext.data.ArrayReader({id:0}, person),data: datas}),columns: [checkboxSM,{id:"personId", header:"编号", width:50, dataIndex:"personId"},{id:"personName", header:"姓名", width:70, dataIndex:"personName", editor:new Ext.form.TextField({allowBlank:false})},{id:"personAge", header:"年龄", width:45, dataIndex:"personAge", editor:new Ext.form.NumberField()},{id:"personGender", header:"性别", width:45, dataIndex:"personGender", editor: new Ext.form.ComboBox({editable: false,displayField: "sex",mode: "local",triggerAction: "all",store: new Ext.data.SimpleStore({fields: ["sex"],data: [["男"], ["女"]]})})},{id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日"), editor:new Ext.form.DateField({format: "Y-m-d"})}],autoExpandColumn: "personBirth",stripeRows: true,sm: checkboxSM});
- 大小: 40 KB
- 查看图片附件
- 20:59
- 评论 / 浏览 (0 / 2364)
- 分类:Web前端
表格数据分组:Ext.grid.GroupingView
- 博客分类:
- ExtJS_3.0
1、Ext.grid.GroupingView
主要配置项:
enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true
groupByText:表头菜单中分组控制的菜单文字,默认为'Group By This Field'
enableNoGroups:是否允许用户关闭分组功能,默认为true
showGroupsText:在表头菜单中启用分组和禁用分组的菜单文字,默认为'Show in Groups'
groupTextTpl:用于渲染分组信息的模板,默认为'{text}',常用的可选值有:
text:列标题:组字段值
gvalue:组字段的值
startRow:组行索引
enableGrouping:是否对数据分组,默认为true
hideGroupedColumn:是否隐藏分组列,默认为false
ignoreAdd:在向表格中添加数据时是否刷新表格,默认为false
showGroupName:是否在分组行上显示分组字段的名字,默认为true
startCollapsed:初次显示时分组是否处于收缩状态,默认为false
主要方法:
collapseAllGroups():收缩所有分组行
expandAllGroups():展开所有分组行
getGroupId( String value ):根据分组字段值取得组id
toggleAllGroups( [Boolean expanded] ):切换所有分组行的展开或收缩状态
toggleGroup( String groupId, [Boolean expanded] ):切换指定分组行的展开或收缩状态
2、Ext.data.GroupingStore
groupField:分组字段
groupOnSort:是否在分组字段上排序,默认为false
remoteGroup:是否远程分组数据,默认为false。如果是远程分组数据,则通过groupBy参数发送分组字段名
3、范例源码
Js代码- var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];
- var person = Ext.data.Record.create([
- {name: "personId", mapping: 0},
- {name: "personName", mapping: 1},
- {name: "personAge", mapping: 2},
- {name: "personGender", mapping: 3},
- {name: "personBirth", mapping: 4}
- ]);
- var grid = new Ext.grid.GridPanel({
- title: "GroupingView实例",
- renderTo: "div1",
- width: 500,
- height: 300,
- frame: true,
- tbar: [
- {
- text: "展开/收缩",
- iconCls: "search",
- handler: function(){
- var view = grid.getView();
- //var groupId = view.getGroupId("男");
- //view.toggleGroup(groupId);
- view.toggleAllGroups();
- }
- }
- ],
- store: new Ext.data.GroupingStore({
- reader: new Ext.data.ArrayReader({id:0}, person),
- data: datas,
- sortInfo: {field:"personId", direction:"ASC"}, //数据排序
- groupField: "personGender" //分组字段
- }),
- view: new Ext.grid.GroupingView({
- sortAscText: "升序",
- sortDescText: "降序",
- columnsText: "表格字段",
- groupByText: "使用当前字段进行分组",
- showGroupsText: "表格分组",
- groupTextTpl: "{text}(共{[values.rs.length]}条)"
- }),
- columns: [
- {id:"personId", header:"编号", width:50, dataIndex:"personId"},
- {id:"personName", header:"姓名", width:70, dataIndex:"personName"},
- {id:"personAge", header:"年龄", width:45, dataIndex:"personAge"},
- {id:"personGender", header:"性别", width:45, dataIndex:"personGender"},
- {id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}
- ]
- });
var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]]; var person = Ext.data.Record.create([{name: "personId", mapping: 0},{name: "personName", mapping: 1},{name: "personAge", mapping: 2},{name: "personGender", mapping: 3},{name: "personBirth", mapping: 4}]);var grid = new Ext.grid.GridPanel({title: "GroupingView实例",renderTo: "div1",width: 500,height: 300,frame: true,tbar: [{text: "展开/收缩",iconCls: "search",handler: function(){var view = grid.getView();//var groupId = view.getGroupId("男");//view.toggleGroup(groupId);view.toggleAllGroups();}}],store: new Ext.data.GroupingStore({reader: new Ext.data.ArrayReader({id:0}, person),data: datas,sortInfo: {field:"personId", direction:"ASC"}, //数据排序groupField: "personGender" //分组字段}),view: new Ext.grid.GroupingView({sortAscText: "升序",sortDescText: "降序",columnsText: "表格字段",groupByText: "使用当前字段进行分组",showGroupsText: "表格分组",groupTextTpl: "{text}(共{[values.rs.length]}条)"}),columns: [{id:"personId", header:"编号", width:50, dataIndex:"personId"},{id:"personName", header:"姓名", width:70, dataIndex:"personName"},{id:"personAge", header:"年龄", width:45, dataIndex:"personAge"},{id:"personGender", header:"性别", width:45, dataIndex:"personGender"},{id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}]});
- 大小: 37.1 KB
- 查看图片附件
- 20:46
- 评论 / 浏览 (0 / 2577)
- 分类:Web前端
普通表格范例
- 博客分类:
- ExtJS_3.0
主要演示以下功能:
包含复选框列、行号列
自定义单元格的渲染
定制表格视图
各种选择模式:单元格、行、复选框
范例源码:
Js代码- var datas = [[1,"张三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]];
- var person = Ext.data.Record.create([
- {name: "personId", mapping: 0},
- {name: "personName", mapping: 1},
- {name: "personAge", mapping: 2},
- {name: "personGender", mapping: 3},
- {name: "personBirth", mapping: 4}
- ]);
- //复选框选择模式
- var checkboxSM = new Ext.grid.CheckboxSelectionModel({
- checkOnly: true,
- singleSelect: false
- });
- var grid = new Ext.grid.GridPanel({
- id: "grid1",
- title: "GridPanel实例",
- renderTo: "div1",
- width: 500,
- height: 300,
- //frame: true,
- tbar: [
- {
- text: "取得所选单元格",
- iconCls: "search",
- handler: function(){
- /*
- //单元格选择模式:new Ext.grid.CellSelectionModel()
- var cell = grid.getSelectionModel().getSelectedCell();
- if(cell!=null) alert(cell[1]);
- */
- /*
- //行选择模式:new Ext.grid.RowSelectionModel()
- var msg = "";
- grid.getSelectionModel().each(function(record){
- msg += record.get("personName") + "\n";
- });
- if(msg!="") alert(msg);
- */
- }
- }
- ],
- store: new Ext.data.Store({
- reader: new Ext.data.ArrayReader({id:0}, person),
- data: datas
- }),
- columns: [
- checkboxSM,
- new Ext.grid.RowNumberer({header:"行号", width:35}),
- {id:"personId", header:"编号", width:50, dataIndex:"personId"},
- {id:"personName", header:"姓名", width:70, dataIndex:"personName"},
- {id:"personAge", header:"年龄", width:45, dataIndex:"personAge", renderer:formatAge},
- {id:"personGender", header:"性别", width:45, dataIndex:"personGender", renderer:formatGender},
- {id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}
- ],
- //autoExpandColumn: "personBirth",
- stripeRows: true,
- //sm: new Ext.grid.CellSelectionModel()
- //sm: new Ext.grid.RowSelectionModel()
- sm: checkboxSM,
- viewConfig: { //表格视图配置对象
- enableRowBody: true,
- sortAscText: "升序",
- sortDescText: "降序",
- columnsText: "列表字段",
- getRowClass: function(record, index, rowParams, store){
- rowParams.body = "" + record.get("personName") + "";
- rowParams.bodyStyle = "height:30;background-color:#FFFFCC;";
- }
- }
- });
- //自定义单元格渲染函数
- function formatAge(value, metadata){
- if(value>=30){
- metadata.attr = 'style="background-color:#CCFFFF"';
- }
- return value;
- }
- function formatGender(value){
- return value=="Y" ? "男" : "女";
- }
var datas = [[1,"张三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]]; var person = Ext.data.Record.create([{name: "personId", mapping: 0},{name: "personName", mapping: 1},{name: "personAge", mapping: 2},{name: "personGender", mapping: 3},{name: "personBirth", mapping: 4}]);//复选框选择模式var checkboxSM = new Ext.grid.CheckboxSelectionModel({checkOnly: true,singleSelect: false});var grid = new Ext.grid.GridPanel({id: "grid1",title: "GridPanel实例",renderTo: "div1",width: 500,height: 300,//frame: true,tbar: [{text: "取得所选单元格",iconCls: "search",handler: function(){/*//单元格选择模式:new Ext.grid.CellSelectionModel()var cell = grid.getSelectionModel().getSelectedCell();if(cell!=null) alert(cell[1]);*//*//行选择模式:new Ext.grid.RowSelectionModel()var msg = "";grid.getSelectionModel().each(function(record){msg += record.get("personName") + "\n";});if(msg!="") alert(msg);*/}}],store: new Ext.data.Store({reader: new Ext.data.ArrayReader({id:0}, person),data: datas}),columns: [checkboxSM,new Ext.grid.RowNumberer({header:"行号", width:35}),{id:"personId", header:"编号", width:50, dataIndex:"personId"},{id:"personName", header:"姓名", width:70, dataIndex:"personName"},{id:"personAge", header:"年龄", width:45, dataIndex:"personAge", renderer:formatAge},{id:"personGender", header:"性别", width:45, dataIndex:"personGender", renderer:formatGender},{id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}],//autoExpandColumn: "personBirth",stripeRows: true,//sm: new Ext.grid.CellSelectionModel()//sm: new Ext.grid.RowSelectionModel()sm: checkboxSM,viewConfig: { //表格视图配置对象enableRowBody: true,sortAscText: "升序",sortDescText: "降序",columnsText: "列表字段",getRowClass: function(record, index, rowParams, store){rowParams.body = "" + record.get("personName") + "";rowParams.bodyStyle = "height:30;background-color:#FFFFCC;";}}});//自定义单元格渲染函数function formatAge(value, metadata){if(value>=30){metadata.attr = 'style="background-color:#CCFFFF"';}return value;}function formatGender(value){return value=="Y" ? "男" : "女";}
- 大小: 31.1 KB
- 查看图片附件
- 16:14
- 评论 / 浏览 (0 / 486)
- 分类:Web前端
普通表格:Ext.grid.GridPanel
- 博客分类:
- ExtJS_3.0
表格相关组件总图:
1、Ext.grid.GridPanel
主要配置项:
store:表格的数据集
columns:表格列模式的配置数组,可自动创建ColumnModel列模式
autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0
stripeRows:表格是否隔行换色,默认为false
cm、colModel:表格的列模式,渲染表格时必须设置该配置项
sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel
enableHdMenu:是否显示表头的上下文菜单,默认为true
enableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为true
loadMask:是否在加载数据时显示遮罩效果,默认为false
view:表格视图,默认为Ext.grid.GridView
viewConfig:表格视图的配置对象
autoExpandMax:自动扩充列的最大宽度,默认为1000
autoExpandMin:自动扩充列的最小宽度,默认为50
columnLines:是否显示列分割线,默认为false
disableSelection:是否禁止行选择,默认为false
enableColumnMove:是否允许拖放列,默认为true
enableColumnResize:是否允许改变列宽,默认为true
hideHeaders:是否隐藏表头,默认为false
maxHeight:最大高度
minColumnWidth:最小列宽,默认为25
trackMouseOver:是否高亮显示鼠标所在的行,默认为true
主要方法:
getColumnModel():取得列模式
getSelectionModel():取得选择模式
getStore():取得数据集
getView():取得视图对象
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件
2、Ext.grid.Column
主要配置项:
id:列id
header:表头文字
dataIndex:设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应
width:列宽
align:列数据的对齐方式
hidden:是否隐藏列,默认为false
fixed:是否固定列宽,默认为false
menuDisabled:是否禁用列的上下文菜单,默认为false
resizable:是否允许改变列宽,默认为true
sortable:是否允许排序,默认为true
renderer:设置列的自定义单元格渲染函数
传入函数的参数有:
value:数据的原始值
metadata:元数据对象,用于设置单元格的样式和属性,该对象包含的属性有:
css:应用到单元格TD元素上的样式名称
attr:一个HTML属性定义字符串,例如'style="color:blue"'
record:当前数据记录对象
rowIndex:单元格的行索引
colIndex:单元格的列索引
store:数据集对象
xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolumn等
editable:是否可编辑,默认为true
editor:编辑器
groupName:
emptyGroupText:
groupable:
3、Ext.grid.ColumnModel
主要配置项:
columns:字段数组
defaultSortable:是否进行默认排序,默认为false
defaultWidth:默认宽度
主要方法:
findColumnIndex( String col ):根据给定的dataIndex查找列索引
getColumnById( String id ):取得指定id对应的列
getColumnCount( Boolean visibleOnly ):取得列总数
getColumnHeader( Number col ):取得列的表头
getColumnId( Number index ):取得列id
getDataIndex( Number col ):取得列对应的数据字段名
getIndexById( String id ):取得列索引
getTotalWidth( Boolean includeHidden )
isCellEditable( Number colIndex, Number rowIndex )
isFixed()
isHidden( Number colIndex )
setColumnHeader( Number col, String header )
setColumnWidth( Number col, Number width, Boolean suppressEvent )
setDataIndex( Number col, String dataIndex )
setEditable( Number col, Boolean editable )
setEditor( Number col, Object editor )
setHidden( Number colIndex, Boolean hidden )
setRenderer( Number col, Function fn )
4、Ext.grid.AbstractSelectionModel
主要方法:
lock():锁定选择区域
unlock():解锁选择区域
isLocked():当前选择区域是否被锁定
5、Ext.grid.CellSelectionModel
主要方法:
clearSelections( Boolean preventNotify ):清除选择区域
getSelectedCell():取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]
hasSelection():当前是否有选择区域
select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):选择指定单元格
6、Ext.grid.RowSelectionModel
主要配置项:
singleSelect:是否单选模式,默认为false,即可以选择多条数据
主要方法:
clearSelections( [Boolean fast] ):清除所有选择区域
deselectRange( Number startRow, Number endRow ):取消范围内的行选择
deselectRow( Number row, [Boolean preventViewNotify] ):取消指定行的选择状态
each( Function fn, [Object scope] ):遍历所有选择行,并调用指定函数。当前被选行将传入该函数中
getCount():得到选择的总行数
getSelected():得到第一个被选记录
getSelections():得到所有被选记录的数组
hasNext():判断当前被选行之后是否还有记录可以选择
hasPrevious():判断当前被选行之前是否还有记录可以选择
hasSelection():是否已选择了数据
isIdSelected( String id ):判断指定id的记录是否被选择
isSelected( Number/Record index ):判断指定记录或记录索引的数据是否被选择
selectAll():选择所有行
selectFirstRow():选择第一行
selectLastRow( [Boolean keepExisting] ):选择最后行
keepExisting:是否保持已有的选择
selectNext( [Boolean keepExisting] ):选择当前选择行的下一行
selectPrevious( [Boolean keepExisting] ):选择当前选择行的上一行
selectRange( Number startRow, Number endRow, [Boolean keepExisting] ):选择范围内的所有行
selectRecords( Array records, [Boolean keepExisting] ):选择一组指定记录
selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] ):选择一行
row:行索引
selectRows( Array rows, [Boolean keepExisting] ):选择多行
rows:行索引数组
7、Ext.grid.CheckboxSelectionModel
主要配置项:
singleSelect:是否单选模式,默认为false,即可以选择多条数据
checkOnly:是否只能通过点击checkbox列进行选择,默认为false
sortable:是否允许checkbox列排序,默认为false
width:checkbox列的宽度,默认为20
8、Ext.grid.RowNumberer
主要配置项:
header:行号列表头显示的内容
width:列宽,默认为23
9、Ext.grid.GridView
主要配置项:
enableRowBody:是否包含行体
sortAscText:表格标题菜单中升序的文字描述
sortDescText:表格标题菜单中降序的文字描述
columnsText:表格标题菜单中列对应的文字描述
autoFill:是否自动扩展列以充满整个表格,默认为false
forceFit:是否强制调整表格列宽以适用表格的整体宽度,防止出现水平滚动条,默认为false
主要方法:
focusCell( Number row, Number col ):将焦点移到指定单元格
focusRow( Number row ):将焦点移动指定行
getCell( Number row, Number col ):取得指定单元格对应的td元素
getHeaderCell( Number index ):取得指定表头对应的td元素
getRow( Number index ):取得指定行对应的tr元素
getRowClass( Record record, Number index, Object rowParams, Store store ):得到附加到表格行上的样式名
record:当前行的数据记录对象
index:当前行的索引
rowParams:渲染时传入到行模板中的配置对象,通过它可以为行体定制样式,该对象只在enableRowBody为true时才生效,可能的属性如下:
body:渲染到行体中的HTML代码片段
bodyStyle:应用到行体tr元素style属性的字符串
cols:应用到行体td元素colspan属性的值,默认为总列数
store:表格数据集
refresh( [Boolean headersToo] ):刷新表格组件
scrollToTop():滚动表格到顶端
- 大小: 107.3 KB
- 查看图片附件
- 15:48
- 评论 / 浏览 (0 / 2675)
- 分类:Web前端
树组件:异步树范例
- 博客分类:
- ExtJS_3.0
1、范例主要展示以下功能点:
树节点通过请求服务器URL地址获得
请求附加自定义参数值
重新加载树节点的子节点
节点附件自定义属性值
2、范例源码
Js代码- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
- Ext.QuickTips.init();
- var tree = new Ext.tree.TreePanel({
- title: "异步加载树节点",
- renderTo: Ext.getBody(),
- width: 300,
- height: 300,
- useArrows: true,
- rootVisible: false,
- /*
- root: new Ext.tree.AsyncTreeNode({
- id: "root",
- text: "根节点",
- expanded: true
- }),
- */
- root: {
- nodeType: "async",
- id: "root",
- text: "根节点",
- expanded: true
- },
- tbar: [
- {
- text: "重新加载",
- handler: function(){
- var loader = tree.getLoader();
- var node = tree.getNodeById("1_2");
- loader.load(node); //重新加载树节点的子节点
- node.expand(); //展开树节点
- }
- }
- ],
- loader: new Ext.tree.TreeLoader({
- dataUrl: "../tree-loader.action",
- baseAttrs: {
- username: "cjm"
- },
- baseParams: {
- password: "cjm"
- },
- listeners: {
- "beforeload": function(loader, node){
- loader.baseParams.nodeText = node.text; //将节点属性值作为请求参数值发送
- }
- }
- }),
- listeners: {
- "click": function(node, event){
- //alert(node.attributes.username); //获取附加的属性值
- }
- }
- });
- //节点编辑
- new Ext.tree.TreeEditor(tree);
- //节点排序
- new Ext.tree.TreeSorter(tree, {
- folderSort: true,
- property: "id",
- dir: "asc"
- });
- });
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";Ext.QuickTips.init(); var tree = new Ext.tree.TreePanel({title: "异步加载树节点",renderTo: Ext.getBody(),width: 300,height: 300,useArrows: true,rootVisible: false,/*root: new Ext.tree.AsyncTreeNode({id: "root",text: "根节点",expanded: true}),*/root: {nodeType: "async",id: "root",text: "根节点",expanded: true},tbar: [{text: "重新加载",handler: function(){var loader = tree.getLoader();var node = tree.getNodeById("1_2");loader.load(node); //重新加载树节点的子节点node.expand(); //展开树节点}}],loader: new Ext.tree.TreeLoader({dataUrl: "../tree-loader.action",baseAttrs: {username: "cjm"},baseParams: {password: "cjm"},listeners: {"beforeload": function(loader, node){loader.baseParams.nodeText = node.text; //将节点属性值作为请求参数值发送}}}),listeners: {"click": function(node, event){//alert(node.attributes.username); //获取附加的属性值}}});//节点编辑new Ext.tree.TreeEditor(tree);//节点排序new Ext.tree.TreeSorter(tree, {folderSort: true,property: "id",dir: "asc"});});
3、后台获取参数值(struts2)
Java代码- //获取节点的id值
- String nodeId = ServletActionContext.getRequest().getParameter("node");
- //获取附加的参数值
- String password = ServletActionContext.getRequest().getParameter("password");
- String nodeText = ServletActionContext.getRequest().getParameter("nodeText");
//获取节点的id值String nodeId = ServletActionContext.getRequest().getParameter("node");//获取附加的参数值String password = ServletActionContext.getRequest().getParameter("password");String nodeText = ServletActionContext.getRequest().getParameter("nodeText");
4、子节点数据
Java代码- <%@ page language="java" pageEncoding="UTF-8"%>
- <%
- String id = request.getParameter("node");
- %>
- <% if("root".equals(id)){ %>
- [
- {id:"1", text:"node1", leaf:false},
- {id:"2", text:"node2", leaf:true}
- ]
- <% } %>
- <% if("1".equals(id)){ %>
- [
- {id:"1_1", text:"node1_1", leaf:true},
- {id:"1_2", text:"node1_2", children: [
- {id:"1_2_1", text:"node1_2_1", leaf:true}
- ]}
- ]
- <% } %>
<%@ page language="java" pageEncoding="UTF-8"%><%String id = request.getParameter("node");%><% if("root".equals(id)){ %>[{id:"1", text:"node1", leaf:false},{id:"2", text:"node2", leaf:true}]<% } %><% if("1".equals(id)){ %>[{id:"1_1", text:"node1_1", leaf:true},{id:"1_2", text:"node1_2", children: [{id:"1_2_1", text:"node1_2_1", leaf:true}]}]<% } %>
- 大小: 12.8 KB
- 查看图片附件
- 15:34
- 评论 / 浏览 (0 / 662)
- 分类:Web前端
树组件:普通树范例
- 博客分类:
- ExtJS_3.0
1、范例包含以下功能点:
节点包含复选框
单击节点触发事件
取得所有选中的节点(包括节点获取焦点和复选框选中两种情况)
2、范例源码
Js代码- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
- Ext.QuickTips.init();
- var root = new Ext.tree.TreeNode({
- id: "root",
- text: "根节点"
- });
- root.appendChild(new Ext.tree.TreeNode({
- text: "子节点1",
- checked: false
- }));
- var node2 = new Ext.tree.TreeNode({
- id: "node2",
- text: "子节点2"
- });
- node2.appendChild(new Ext.tree.TreeNode({
- text: "二级菜单",
- checked: false
- }));
- root.appendChild(node2);
- var tree = new Ext.tree.TreePanel({
- title: "树面板(Ext.tree.TreePanel)",
- renderTo: Ext.getBody(),
- width: 300,
- height: 300,
- tbar: [
- {
- text: "selected",
- handler: function(){
- var sm = tree.getSelectionModel();
- //用于单选模式
- /*
- var node = sm.getSelectedNode();
- if(node!=null){
- alert(node.text);
- }else{
- alert("没有节点被选中!");
- }
- */
- //用于多选模式
- var nodes = sm.getSelectedNodes();
- var length = nodes.length;
- if(length>0){
- alert("当前选中" + length + "个节点");
- }else{
- alert("没有节点被选中!");
- }
- }
- },
- {
- text: "checked",
- handler: function(){
- var msg = "";
- var nodes = tree.getChecked();
- Ext.each(nodes, function(node){
- if(msg.length>0) msg += ", ";
- msg += node.text;
- });
- if(msg.length>0) alert(msg);
- }
- }
- ],
- listeners: {
- "click": function(node, event){
- var toolbar = tree.getBottomToolbar();
- toolbar.items.item(0).setText("当前选中的节点:" + node.text);
- }
- },
- bbar: [
- "当前选中的节点:"
- ],
- root: root,
- useArrows: true,
- selModel: new Ext.tree.MultiSelectionModel()
- });
- tree.getRootNode().expand(true); //级联展开所有子节点
- //alert(tree.getNodeById("node2").getPath()); //获取节点的text属性值
- });
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";Ext.QuickTips.init(); var root = new Ext.tree.TreeNode({id: "root",text: "根节点"});root.appendChild(new Ext.tree.TreeNode({text: "子节点1",checked: false}));var node2 = new Ext.tree.TreeNode({id: "node2",text: "子节点2"});node2.appendChild(new Ext.tree.TreeNode({text: "二级菜单",checked: false}));root.appendChild(node2);var tree = new Ext.tree.TreePanel({title: "树面板(Ext.tree.TreePanel)",renderTo: Ext.getBody(),width: 300,height: 300,tbar: [{text: "selected",handler: function(){var sm = tree.getSelectionModel();//用于单选模式/*var node = sm.getSelectedNode();if(node!=null){alert(node.text);}else{alert("没有节点被选中!");}*///用于多选模式var nodes = sm.getSelectedNodes();var length = nodes.length;if(length>0){alert("当前选中" + length + "个节点");}else{alert("没有节点被选中!");}}},{text: "checked",handler: function(){var msg = "";var nodes = tree.getChecked();Ext.each(nodes, function(node){if(msg.length>0) msg += ", ";msg += node.text;});if(msg.length>0) alert(msg);}}],listeners: {"click": function(node, event){var toolbar = tree.getBottomToolbar();toolbar.items.item(0).setText("当前选中的节点:" + node.text);}},bbar: ["当前选中的节点:"],root: root,useArrows: true,selModel: new Ext.tree.MultiSelectionModel()});tree.getRootNode().expand(true); //级联展开所有子节点//alert(tree.getNodeById("node2").getPath()); //获取节点的text属性值});
3、点击节点后在TabPanel增加一个页签
Js代码- function addTab(node){
- if(node.isLeaf()==false) return;
- var tabs = Ext.getCmp("tabs");
- if(node.attributes.action){
- for(var i=1;i
- tabs.remove(tabs.items.item(i));
- }
- tabs.add({
- title: node.text,
- closable: true,
- autoLoad: node.attributes.action
- }).show();
- }
- }
function addTab(node){if(node.isLeaf()==false) return; var tabs = Ext.getCmp("tabs"); if(node.attributes.action){for(var i=1;i
- 大小: 16.7 KB
- 查看图片附件
2010-05-21缩略显示
- 15:26
- 评论 / 浏览 (0 / 420)
- 分类:Web前端
树组件:主要配置项、属性、方法
博客分类:
配置管理EXTUI应用服务器框架- ExtJS_3.0
1、Ext.tree.TreePanel
主要配置项:
root:树的根节点。
rootVisible:是否显示根节点,默认为true。
useArrows:是否在树中使用Vista样式箭头,默认为false。
lines:是否显示树线,默认为true。
loader:树节点的加载器,默认为Ext.tree.TreeLoader。
selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
pathSeparator:树节点路径的分隔符,默认为“/”。
singleExpand:是否一次只展开树中的一个节点,默认为true。
requestMethod:请求方法,可选值有POST、GET。
containerScroll:是否将树形面板注册到滚动管理器ScrollManager中。
主要方法:
collapseAll():收缩所有树节点
expandAll():展开所有树节点
getRootNode():获取根节点
getNodeById(String id):获取指定id的节点
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )
expandPath( String path, [String attr], [Function callback] )
getChecked( [String attribute], [TreeNode startNode] )
selectPath( String path, [String attr], [Function callback] )
getSelectionModel():
2、Ext.data.Node
主要配置项:
id:节点id
leaf:当前节点是否为叶子节点
主要属性:
id:节点id
attributes:节点属性的集合
parentNode:当前节点的父节点
childNodes:当前节点所有子节点组成的数组
firstChild:当前节点的第一个直接子节点,如果没有则为null值
lastChild:当前节点的最后一个直接子节点,如果没有则为null值
nextSibling:当前节点的下一个兄弟节点,如果没有则为null值
previousSibling:当前节点的前一个兄弟节点,如果没有则为null值
主要方法:
appendChild( Node/Array node ):追加新的子节点
bubble( Function fn, [Object scope], [Array args] ):从当前节点开始向上迭代调用指定函数,如果指定函数返回false则将终止迭代。
args:传入函数中的参数,默认为当前节点
cascade( Function fn, [Object scope], [Array args] ):从当前节点开始向下迭代调用指定函数,如果指定函数返回false则将终止迭代。
contains( Node node ):当前节点是否包含指定子节点。
eachChild( Function fn, [Object scope], [Array args] ):迭代当前节点的所有子节点调用指定函数,如果指定函数返回false则将终止迭代。
findChild( String attribute, Mixed value ):查找具有指定属性的第一个子节点。
findChildBy( Function fn, [Object scope] ):根据自定义函数查找第一个符合要求的子节点,如果自定义函数返回true则说明匹配成功。
getDepth():取得当前节点的深度,根节点的深度为0
getOwnerTree():取得当前节点所在树。
getPath( [String attr] ):取得当前节点对应的路径,这个路径在程序中可用于展开或者选择节点。
attr:用于查找路径的属性,默认为节点id
hasChildNodes():是否有子节点
indexOf( Node node ):取得指定子节点的索引值,未找到返回-1。
insertBefore( Node node, Node refNode ):在当前节点的指定子节点之前插入一个新的子节点。
node:要插入的新节点isAncestor( Node node ):判断指定节点是否为当前节点的父节点(可以是任何一级中的父节点)。
isFirst():是否为父节点的第一个子节点。
isLast():是否为父节点的最后一个子节点。
isLeaf():是否为叶子节点。
item( Number index ):取得指定索引的子节点。
remove():从父节点中删除当前节点。
removeChild( Node node ):删除当前节点的指定子节点。
replaceChild( Node newChild, Node oldChild ):用新的子节点替换当前节点的指定子节点。
sort( Function fn, [Object scope] ):用指定的排序函数为当前节点的子节点进行排序。
3、Ext.tree.TreeNode
主要配置项:
text:节点上的文本信息
qtip:节点上的提示信息
icon:节点图标对应的路径
iconCls:应用到节点图标上的样式
checked:当前节点的选择状态
true:在节点前显示一个选中状态的复选框
false:在节点前显示一个未选中状态的复选框
不指定该值:不显示任何复选框
href:节点的连接属性,默认为#
hrefTarget:显示节点连接的目标框架
editable:是否允许编辑,默认为true
expanded:是否展开节点,默认为false
disabled:是否禁用节点,默认为false
singleClickExpand:是否通过单击方式展开节点
allowChildren:是否允许当前节点具有子节点,默认为true
expandable:当不含子节点时,是否总显示一个加减图标,默认为false
uiProvider:节点的UI类,默认为Ext.tree.TreeNodeUI
主要属性:
text:节点上的文本信息
disabled:当前节点是否被禁用
主要方法:
collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):收缩当前节点
deep:是否级联收缩全部子节点
collapseChildNodes( [Boolean deep] ):收缩所有子节点
disable():禁用当前节点
enable():启用当前节点
ensureVisible( [Function callback], [Object scope] ):确保所有父节点都是展开的
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):展开当前节点
expandChildNodes( [Boolean deep] ):展开所有子节点
isExpanded():当前节点是否展开
isSelected():当前节点是否被选中
select():选择当前节点
setText( String text ):设置当前的文本
toggle():切换当前节点的展开和收缩状态
unselect():取消对当前节点的选择
getUI():取得节点的UI对象
4、Ext.tree.AsyncTreeNode
主要配置项:
loader:当前节点的树加载器,默认使用树中配置的树加载器
主要方法:
isLoaded():当前节点是否已经加载数据
reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数
5、Ext.tree.TreeNodeUI
主要方法:
getAnchor():从节点的UI中获取焦点的元素
getIconEl():获取图标的元素
getTextEl():获取文本节点
addClass( String/Array className ):
removeClass( String/Array className ):
hide():
show():
isChecked():取得节点的选择状态,如果当前节点没有复选框则函数返回false
toggleCheck( Boolean (optional) ):设置节点复选框的选择状态
6、Ext.tree.RootTreeNodeUI
7、Ext.tree.DefaultSelectionModel
是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。
主要方法:
clearSelections():清除对树中所有节点的选择
getSelectedNode():取得当前被选中的节点
isSelected( TreeNode node ):节点是否被选中
select( TreeNode node ):选中指定节点
unselect( TreeNode node ):取消指定节点的选中状态
selectNext():选择当前被选节点的下一个节点
selectPrevious():选择当前被选节点的上一个节点
8、Ext.tree.MultiSelectionModel
是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。
主要方法:
clearSelections():清除所有节点的选中状态
getSelectedNodes():取得被选节点组成的数组
isSelected( TreeNode node ):节点是否被选中
select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
unselect( TreeNode node ):取消指定节点的选中状态
9、Ext.tree.TreeLoader
Js代码
提供了对子节点的延时加载功能,请求指定的URL地址,返回子节点数据,返回的数据格式如下:
- [
- {
- id: 1,
- text: "node1",
- leaf: true,
- check: false
- },
- {
- id: 2,
- text: "node2",
- children: [
- {
- id: 3,
- text: "node3",
- leaf: true
- }
- ]
- }
- ]
[{id: 1,text: "node1",leaf: true,check: false},{id: 2,text: "node2",children: [{id: 3,text: "node3",leaf: true}]}]树节点展开时,当前节点的id会作为请求参数被发送到服务器,在服务器可以通过node参数名进行获取。
主要配置项:
dataUrl:获取子节点的URL地址。
baseAttrs:子节点的基本属性对象,该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
baseParams:基本的请求参数,这些参数会被附加到每一个节点的请求中。
clearOnLoad:在加载前是否移除已存在的子节点,默认为true。
preloadChildren:在第一次加载子节点后是否递归加载所有子节点。
requestMethod:请求方法,可选值有POST、GET。
uiProviders:加载器创建子节点的UI实现类。
url:与dataUrl作用相同。
主要方法:
load( Ext.tree.TreeNode node, Function callback, (Object) scope ):从指定的URL加载树节点。
node:需要加载子节点的树节点。
10、Ext.tree.TreeEditor
主要配置项:
alignment:对齐方式。
editDelay:两次点击节点触发编辑操作的延时时间,默认为350毫秒。
hideEl:在显示编辑器组件时是否隐藏绑定元素。
maxWidth:编辑器的最大宽度,默认为250。
11、Ext.tree.TreeSorter
主要配置项:
property:用于排序的节点属性名,默认为text。
dir:排序方向,可选值有asc、desc,默认为asc。
caseSensitive:是否区分大小写,默认为false。
folderSort:叶节点是否排在非叶节点之下,默认为false。
leafAttr:叶子节点在folder排序时的值,默认为leaf。
sortType:一个自定义函数用于在排序前转换节点值。
2010-05-20缩略显示
- 15:01
- 评论 / 浏览 (0 / 1170)
- 分类:Web前端
Ext.TabPanel
博客分类:
EXT活动脚本HTML- ExtJS_3.0
TabPanel不显示面板的标题和头部工具条。
1、主要配置项:
activeTab:初始激活的tab,索引或者id值,默认为none
autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。
当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。
deferredRender:是否延迟渲染,默认为true。
autoTabSelector:默认为'div.x-tab'。
resizeTabs:是否可以改变tab的尺寸,默认为false。
minTabWidth:tab的最小宽度,默认为30。
tabWidth:每个新增加的tab宽度,默认为120。
tabTip:tab的提示信息
tabPosition:tab位置,可选值有top、bottom,默认为top。
enableTabScroll:是否允许Tab溢出时可以滚动,默认为false。
closable:tab是否可关闭,默认为false
scrollDuration:每次的滚动时长,默认为0.35毫秒。
scrollIncrement:每次的滚动步长,默认为100像素。
wheelIncrement:每次鼠标滑轮的滚动步长,默认为20像素。
2、主要方法:
activate( String/Panel tab )
getActiveTab():获取当前活动的tab
get( String/Number key ):根据组件id或者索引获取组件
getItem(String id):根据tab id获取tab
setActiveTab( String/Number item )
remove( Component/String component, [Boolean autoDestroy] )
removeAll( [Boolean autoDestroy] )
3、范例
Js代码
- new Ext.TabPanel({
- id: "mainTab",
- renderTo: "div1",
- width: 500,
- height: 300,
- activeTab: 0,
- defaults: {
- autoScroll: true,
- autoHeight:true,
- style: "padding:5"
- },
- items:[
- {title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},
- {title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},
- {title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},
- {title:"event", iconCls:"save", listeners:{activate:activateHandler}}
- ],
- enableTabScroll: true
- });
- function activateHandler(tab){
- //alert(tab.title);
- }
- var index = 0;
- function addTab(){
- var tabs = Ext.getCmp("mainTab");
- var t = tabs.getItem("tab"+index);
- if(t) tabs.remove(t);
- tabs.add({
- id: "tab" + (++index),
- title: "NewTab" + index,
- html: "new tab" + index,
- closable: true
- }).show();
- }
- //按钮渲染到div1元素之前
- new Ext.Button({
- text:"add tab",
- handler:addTab,
- iconCls:"add"
- }).render(document.body, "div1");
new Ext.TabPanel({id: "mainTab",renderTo: "div1",width: 500,height: 300,activeTab: 0,defaults: {autoScroll: true,autoHeight:true,style: "padding:5"},items:[{title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},{title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},{title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},{title:"event", iconCls:"save", listeners:{activate:activateHandler}}],enableTabScroll: true});function activateHandler(tab){//alert(tab.title);}var index = 0;function addTab(){var tabs = Ext.getCmp("mainTab");var t = tabs.getItem("tab"+index);if(t) tabs.remove(t);tabs.add({id: "tab" + (++index),title: "NewTab" + index,html: "new tab" + index,closable: true}).show();}//按钮渲染到div1元素之前new Ext.Button({text:"add tab",handler:addTab,iconCls:"add"}).render(document.body, "div1");
在使用TabPanel时需要注意:
1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问选项卡时,该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时,谨记将该配置项设置为false。
2、在FormPanel中使用TabPanel,如果在TabPanel中不定义deferredRender的值为false,那么,当你使用Load方法为Form加载数据,或使用setValue为没有激活过的Panel的控件赋值时,将会发生错误。原因是,在默认设置下deferredRender为true,TabPanel并不会渲染所有Panel上的控件,只有在该Panel被激活时才渲染控件,所以当你为这些控件设置数据时,将会找不到这些控件,会出现错误。因而,在FormPanel中使用TabPanel,一定要在TabPanel中设置deferredRender的值为false,强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。
应用范例代码片段:
//关闭tab项
var tabpanel = Ext.getCmp("deskTabPanel");
if(tabpanel!=null && tabpanel.getActiveTab()!=null){
tabpanel.remove(tabpanel.getActiveTab());
}
//隐藏tab项
Ext.getCmp("deskTabPanel").hideTabStripItem(0);
//激活tab项
Ext.getCmp("deskTabPanel").setActiveTab("noticeAttachmentGrid");
- 大小: 16.1 KB
- 查看图片附件
2010-05-18缩略显示
- 14:28
- 评论 / 浏览 (1 / 4674)
- 分类:Web前端
Ext.Viewport
博客分类:
EXT浏览器HTML- ExtJS_3.0
Ext.Viewport代表浏览器窗口的整个显示区域,将document body作为渲染对象,它会根据浏览器窗口的大小自动调整自身的尺寸。
在一个页面中只允许出现一个Viewport实例,没有提供对滚动条的支持。Js代码
- Ext.onReady(function(){
- var accordion = new Ext.Panel({
- title: "功能分组",
- layout: "accordion",
- layoutConfig: {
- animate: true
- },
- width: 250,
- minWidth: 100,
- region: "west",
- split: false,
- collapsible: true,
- items: [
- {title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"},
- {title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"},
- {title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"}
- ]
- });
- new Ext.Viewport({
- title: "Viewport",
- layout: "border",
- defaults: {
- bodyStyle: "background-color: #FFFFFF;",
- frame: true
- },
- items: [
- accordion,
- {region:"north", height:100},
- {region:"center"}
- ]
- });
- });
Ext.onReady(function(){var accordion = new Ext.Panel({title: "功能分组",layout: "accordion",layoutConfig: {animate: true},width: 250,minWidth: 100,region: "west",split: false,collapsible: true,items: [{title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"},{title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"},{title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"}]});new Ext.Viewport({title: "Viewport",layout: "border",defaults: {bodyStyle: "background-color: #FFFFFF;",frame: true},items: [accordion,{region:"north", height:100},{region:"center"}]});});
- 大小: 23.4 KB
- 查看图片附件
2010-05-18缩略显示
- 02:00
- 评论 / 浏览 (2 / 3491)
- 分类:Web前端
垂直盒布局(VBoxLayout)
博客分类:
FlexEXT- ExtJS_3.0
Ext.layout.VBoxLayout扩展自Ext.layout.BoxLayout,其xtype值为vbox。
主要配置项:
align:子元素在水平方式的对齐方式,可选值有left、center、stretch(水平伸展)、stretchmax,默认为left。
flex:垂直伸缩。将面板的body高减去不伸缩的子元素的高后剩余的高度等分成【flex和值】份,子元素伸缩后占的份数。默认为0,即不伸缩。
pack:子元素在垂直方向的包装方式,可选值有start、center、end,默认为start。Js代码
- new Ext.Panel({
- title: "垂直盒布局(VBoxLayout)",
- width: 500,
- height: 300,
- renderTo: "div2",
- frame: true,
- layout: "vbox",
- layoutConfig: {
- align: "left",
- pack: "start"
- },
- items: [
- {xtype:"button", text:"按钮1", width:40, flex:1},
- {xtype:"spacer", flex:1},
- {xtype:"button", text:"按钮2", width:60, flex:1},
- {xtype:"spacer", flex:1},
- {xtype:"button", text:"按钮3", width:80, flex:1},
- {xtype:"spacer", flex:1},
- {xtype:"button", text:"按钮4", width:100, flex:1}
- ]
- });
new Ext.Panel({title: "垂直盒布局(VBoxLayout)",width: 500,height: 300,renderTo: "div2",frame: true,layout: "vbox",layoutConfig: {align: "left",pack: "start"},items: [{xtype:"button", text:"按钮1", width:40, flex:1},{xtype:"spacer", flex:1},{xtype:"button", text:"按钮2", width:60, flex:1},{xtype:"spacer", flex:1},{xtype:"button", text:"按钮3", width:80, flex:1},{xtype:"spacer", flex:1},{xtype:"button", text:"按钮4", width:100, flex:1}]});
- 大小: 14 KB
- 查看图片附件
2010-05-18缩略显示
- 01:54
- 评论 / 浏览 (0 / 782)
- 分类:Web前端
水平盒布局(HBoxLayout)
博客分类:
FlexEXT- ExtJS_3.0
Ext.layout.HBoxLayout扩展自Ext.layout.BoxLayout,其xtype值为hbox。
主要配置项:
align:子元素在垂直方向的对齐方式,可选值有top、middle、stretch(垂直伸展)、stretchmax,默认为top。
flex:水平伸缩。将面板的宽减去不伸缩的子元素的宽后剩余的宽度等分成【flex和值】份,子元素伸缩后占的份数。默认为0,即不伸缩。
pack:子元素在水平方向的包装方式,可选值有start、center、end,默认为start。Js代码
- new Ext.Panel({
- title: "水平盒布局(HBoxLayout)",
- width: 500,
- height: 300,
- renderTo: "div2",
- frame: true,
- layout: "hbox",
- layoutConfig: {
- align: "top",
- defaultMargins: {
- top: 0,
- right: 0,
- bottom: 0,
- left: 0
- },
- pack: "start"
- },
- items: [
- {xtype:"button", text:"按钮1", height:30, flex:1},
- {xtype:"button", text:"按钮2", height:50, flex:1},
- {xtype:"button", text:"按钮3", height:70, flex:1},
- {xtype:"button", text:"按钮4", height:90, flex:3}
- ]
- });
new Ext.Panel({title: "水平盒布局(HBoxLayout)",width: 500,height: 300,renderTo: "div2",frame: true,layout: "hbox",layoutConfig: {align: "top",defaultMargins: {top: 0,right: 0,bottom: 0,left: 0},pack: "start"},items: [{xtype:"button", text:"按钮1", height:30, flex:1},{xtype:"button", text:"按钮2", height:50, flex:1},{xtype:"button", text:"按钮3", height:70, flex:1},{xtype:"button", text:"按钮4", height:90, flex:3}]});
- 大小: 15.1 KB
- 查看图片附件
2010-05-18缩略显示
- 01:51
- 评论 / 浏览 (0 / 810)
- 分类:Web前端
边框布局(BorderLayout)
博客分类:
EXT- ExtJS_3.0
Ext.layout.BorderLayout扩展自Ext.layout.ContainerLayout,其xtype值为border。此布局将容器分为5个部分,分别是east、south、west、north、center。其中,center是必须的。
子面板配置项:
region:设置子面板所在区域。Js代码
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "border",
- title: "边框布局(BorderLayout)",
- width: 600,
- height: 400,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF;",
- frame: true
- },
- items: [
- {title:"north", region:"north", height:100},
- {title:"east", region:"east", width:100},
- {title:"south", region:"south", height:100},
- {title:"west", region:"west", width:100},
- {title:"center", region:"center"}
- ]
- });
new Ext.Panel({renderTo: "div2",frame: true,layout: "border",title: "边框布局(BorderLayout)",width: 600,height: 400,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF;",frame: true},items: [{title:"north", region:"north", height:100},{title:"east", region:"east", width:100},{title:"south", region:"south", height:100},{title:"west", region:"west", width:100},{title:"center", region:"center"}]});
- 大小: 31.3 KB
- 查看图片附件
2010-05-18缩略显示
- 01:48
- 评论 / 浏览 (0 / 606)
- 分类:Web前端
表格布局(TableLayout)
博客分类:
EXTHTML- ExtJS_3.0
Ext.layout.TableLayout扩展自Ext.layout.ContainerLayout,其xtype值为table。
布局的配置项:
columns:设置表格布局的列数。
子面板的配置项:
rowspan:跨行的数量。
colspan:跨列的数量。Js代码
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "table",
- layoutConfig: {
- columns: 4
- },
- title: "表格布局(TableLayout)",
- width: 500,
- height: 200,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF;",
- frame: true,
- height: 60
- },
- items: [
- {title:"嵌套面板1", html:"嵌套面板1", colspan:3},
- {title:"嵌套面板2", html:"嵌套面板2", rowspan:2, height:120, width:200},
- {title:"嵌套面板3", html:"嵌套面板3"},
- {title:"嵌套面板4", html:"嵌套面板4"},
- {title:"嵌套面板5", html:"嵌套面板5"}
- ]
- });
new Ext.Panel({renderTo: "div2",frame: true,layout: "table",layoutConfig: {columns: 4},title: "表格布局(TableLayout)",width: 500,height: 200,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF;",frame: true,height: 60},items: [{title:"嵌套面板1", html:"嵌套面板1", colspan:3},{title:"嵌套面板2", html:"嵌套面板2", rowspan:2, height:120, width:200},{title:"嵌套面板3", html:"嵌套面板3"},{title:"嵌套面板4", html:"嵌套面板4"},{title:"嵌套面板5", html:"嵌套面板5"}]});
- 大小: 24 KB
- 查看图片附件
2010-05-18缩略显示
- 01:46
- 评论 / 浏览 (0 / 825)
- 分类:Web前端
列布局(ColumnLayout)
博客分类:
EXTHTML- ExtJS_3.0
Ext.layout.ColumnLayout扩展自Ext.layout.ContainerLayout,其xtype值为column。
子面板的主要配置项:
columnWidth:以百分比为单位的列宽,必须是大于0小于1的小数,所有列的columnWidth值相加必须等于1。
width:以像素为单位的固定宽度。
百分比计算的基础宽度是父容器的宽度减去固定列宽之后剩余的宽度值。Js代码
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "column",
- title: "列布局(ColumnLayout)",
- width: 500,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF;",
- frame: true
- },
- items: [
- {width:150, title:"嵌套面板1", html:"嵌套面板1"},
- {columnWidth:0.7, title:"嵌套面板2", html:"嵌套面板2"},
- {columnWidth:0.3, title:"嵌套面板3", html:"嵌套面板3"}
- ]
- });
new Ext.Panel({renderTo: "div2",frame: true,layout: "column",title: "列布局(ColumnLayout)",width: 500,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF;",frame: true},items: [{width:150, title:"嵌套面板1", html:"嵌套面板1"},{columnWidth:0.7, title:"嵌套面板2", html:"嵌套面板2"},{columnWidth:0.3, title:"嵌套面板3", html:"嵌套面板3"}]});
- 大小: 16.7 KB
- 查看图片附件
2010-05-18缩略显示
- 01:43
- 评论 / 浏览 (0 / 536)
- 分类:Web前端
表单布局(FormLayout)
博客分类:
EXTprototype- ExtJS_3.0
Ext.layout.FormLayout是为表单特殊设计的布局,其xtype值为form。
主要配置项:
labelAlign:字段标签的对齐方式,默认为left。
labelPad:字段标签与字段之间的间距,默认为5。
labelWidth:字段标签的宽度,默认为100。
hideLabels:是否隐藏字段标签,默认为false。Js代码
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget = "side";
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "form",
- title: "表单布局(FormLayout)",
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF",
- labelSeparator: ":"
- },
- defaultType: "textfield",
- labelAlign: "right",
- items: [
- {fieldLabel:"用户名", hideLabel:false, allowBlank:false, blankText:"用户名不能为空!"},
- {fieldLabel:"密码", allowBlank:false, blankText:"密码不能为空!"}
- ]
- });
Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "side";new Ext.Panel({renderTo: "div2",frame: true,layout: "form",title: "表单布局(FormLayout)",defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF",labelSeparator: ":"},defaultType: "textfield",labelAlign: "right",items: [{fieldLabel:"用户名", hideLabel:false, allowBlank:false, blankText:"用户名不能为空!"},{fieldLabel:"密码", allowBlank:false, blankText:"密码不能为空!"}]});
- 大小: 10.3 KB
- 查看图片附件
2010-05-18缩略显示
- 01:40
- 评论 / 浏览 (0 / 515)
- 分类:Web前端
绝对位置布局(AbsoluteLayout)
博客分类:
EXTHTML- ExtJS_3.0
Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局,其xtype值为absolute。根据子面板中配置的x/y坐标进行定位,并且坐标值支持使用固定值和百分比两种形式。
Js代码
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "absolute",
- title: "绝对位置布局(AbsoluteLayout)",
- width: 500,
- height: 300,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF"
- },
- items: [
- {x:10, y:10, width:200, title:"嵌套面板1", html:"嵌套面板1"},
- {x:10, y:"50%", height:100, title:"嵌套面板2", html:"嵌套面板2"}
- ]
- });
new Ext.Panel({renderTo: "div2",frame: true,layout: "absolute",title: "绝对位置布局(AbsoluteLayout)",width: 500,height: 300,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF"},items: [{x:10, y:10, width:200, title:"嵌套面板1", html:"嵌套面板1"},{x:10, y:"50%", height:100, title:"嵌套面板2", html:"嵌套面板2"}]});
- 大小: 19.4 KB
- 查看图片附件
2010-05-18缩略显示
- 01:34
- 评论 / 浏览 (0 / 857)
- 分类:Web前端
锚点布局(AnchorLayout)
博客分类:
EXTHTML- ExtJS_3.0
Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局,其xtype值为anchor。
主要配置项:
anchorSize:父容器提供
anchor:子容器提供
加入到使用anchor布局面板中的子面板都支持一个anchor配置项,它是一个包含两个值的字符串,水平值和垂直值。其有效值:
百分比: 100% 50%
第1项数值:表示子面板占父容器宽度的百分比
第2项数值:表示子面板占父容器高度的百分比
如果只提供一个值则只对子面板的宽度生效,高度保持默认值。
偏移量: -50 -100
第1项数值:表示子面板到父容器右边缘的偏移量
第2项数值:表示子面板到父容器下边缘的偏移量
如果只提供一个值则只对子面板的宽度生效,高度保持默认值。
参考边: r b
要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果。Js代码
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "anchor",
- title: "锚点布局(AnchorLayout)",
- height: 300,
- width: 500,
- autoScroll: true,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF"
- },
- items: [
- {anchor: "50% 30%", title:"嵌套面板1", html:"嵌套面板1"},
- {anchor: "-50 -150", title:"嵌套面板2", html:"嵌套面板2"},
- {anchor: "r b", width: 300, height:100, title:"嵌套面板3", html:"嵌套面板3"}
- ]
- });
new Ext.Panel({renderTo: "div2",frame: true,layout: "anchor",title: "锚点布局(AnchorLayout)",height: 300,width: 500,autoScroll: true,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF"},items: [{anchor: "50% 30%", title:"嵌套面板1", html:"嵌套面板1"},{anchor: "-50 -150", title:"嵌套面板2", html:"嵌套面板2"},{anchor: "r b", width: 300, height:100, title:"嵌套面板3", html:"嵌套面板3"}]});
- 大小: 22.6 KB
- 查看图片附件
2010-05-18缩略显示
- 01:31
- 评论 / 浏览 (0 / 574)
- 分类:Web前端
卡片式布局(CardLayout)
博客分类:
EXTHTMLCC++C#- ExtJS_3.0
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,其xtype值为card。切换子面板的唯一途径是调用setActiveItem方法。
Js代码
- var panel = new Ext.Panel({
- renderTo: "div3",
- frame: true,
- layout: "card",
- title: "卡片式布局(CardLayout)",
- height: 300,
- activeItem: 0,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF"
- },
- items: [
- {id: "c1", title:"嵌套面板一", html:"嵌套面板一"},
- {id: "c2", title:"嵌套面板二", html:"嵌套面板二"},
- {id: "c3", title:"嵌套面板三", html:"嵌套面板三"}
- ],
- buttons: [
- {
- text: "上一页",
- handler: changePage
- },
- {
- text: "下一页",
- handler: changePage
- }
- ]
- });
- function changePage(btn){
- var index = Number(panel.layout.activeItem.id.substring(1));
- if(btn.text == "上一页"){
- index -= 1;
- if(index<1) index = 1;
- }else{
- index += 1;
- if(index>3) index = 3;
- }
- panel.layout.setActiveItem("c"+index);
- }
var panel = new Ext.Panel({renderTo: "div3",frame: true,layout: "card",title: "卡片式布局(CardLayout)",height: 300,activeItem: 0,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF"},items: [{id: "c1", title:"嵌套面板一", html:"嵌套面板一"},{id: "c2", title:"嵌套面板二", html:"嵌套面板二"},{id: "c3", title:"嵌套面板三", html:"嵌套面板三"}],buttons: [{text: "上一页",handler: changePage},{text: "下一页",handler: changePage}]});function changePage(btn){var index = Number(panel.layout.activeItem.id.substring(1));if(btn.text == "上一页"){index -= 1;if(index<1) index = 1;}else{index += 1;if(index>3) index = 3;}panel.layout.setActiveItem("c"+index);}
- 大小: 18.2 KB
- 查看图片附件
2010-05-18缩略显示
- 01:27
- 评论 / 浏览 (0 / 947)
- 分类:Web前端
折叠布局(AccordionLayout)
博客分类:
EXTHTML- ExtJS_3.0
Ext.layout.Accordion扩展自Ext.layout.FitLayout布局,其xtype值为accordion。
主要配置项:
activeOnTop:是否保持展开的子面板处于父面板的顶端,默认为false。
animate:是否在展开或收缩子面板时使用滑动方式,默认为false。
fill:设置子面板是否自动调整高度充满父面板的剩余空间,默认为true。
titleCollapse:设置是否允许通过单击子面板的标题来展开或收缩面板,默认为true。
hideCollapseTool:是否隐藏子面板的“展开收缩”按钮,默认为false。Js代码
- new Ext.Panel({
- renderTo: "div2",
- frame: true,
- layout: "accordion",
- layoutConfig: {
- animate: true
- },
- title: "折叠布局(AccordionLayout)",
- height: 300,
- defaults: {
- bodyStyle: "padding:3px; background-color: #FFFFFF"
- },
- items: [
- {title:"嵌套面板一", html:"嵌套面板一"},
- {title:"嵌套面板二", html:"嵌套面板二"},
- {title:"嵌套面板三", html:"嵌套面板三"}
- ]
- });
new Ext.Panel({renderTo: "div2",frame: true,layout: "accordion",layoutConfig: {animate: true},title: "折叠布局(AccordionLayout)",height: 300,defaults: {bodyStyle: "padding:3px; background-color: #FFFFFF"},items: [{title:"嵌套面板一", html:"嵌套面板一"},{title:"嵌套面板二", html:"嵌套面板二"},{title:"嵌套面板三", html:"嵌套面板三"}]});
- 大小: 18.4 KB
- 查看图片附件
2010-05-18缩略显示
- 01:24
- 评论 / 浏览 (0 / 511)
- 分类:Web前端
自适应布局(FitLayout)
博客分类:
EXTHTML- ExtJS_3.0
Ext.layout.FitLayout是布局的基础类,其xtype值为fit。使用fit布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。
Js代码
- new Ext.Panel({
- renderTo: "div1",
- frame: true,
- layout: "fit",
- width: 400,
- height: 200,
- title: "自适应布局(FitLayout)",
- defaults: {
- bodyStyle: "padding:5px; background-color: #FFFFFF"
- },
- items: [
- {title:"嵌套面板一", html:"Ext.layout.FitLayout是布局的基础类,其名称为fit。使用fit布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。"},
- {title:"嵌套面板二", html:"面板二"}
- ]
- });
new Ext.Panel({renderTo: "div1",frame: true,layout: "fit",width: 400,height: 200,title: "自适应布局(FitLayout)",defaults: {bodyStyle: "padding:5px; background-color: #FFFFFF"},items: [{title:"嵌套面板一", html:"Ext.layout.FitLayout是布局的基础类,其名称为fit。使用fit布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。"},{title:"嵌套面板二", html:"面板二"}]});
- 大小: 20.5 KB
- 查看图片附件
2010-05-18缩略显示
- 01:21
- 评论 / 浏览 (0 / 494)
- 分类:Web前端
布局(Layout)
博客分类:
EXT- ExtJS_3.0
Ext.layout.ContainerLayout提供了所有布局类的基本功能。此为默认布局。
布局总图:
- 大小: 60.8 KB
- 查看图片附件
2010-05-18缩略显示
- 01:18
- 评论 / 浏览 (0 / 280)
- 分类:Web前端
工具条(Ext.Toolbar)
博客分类:
EXTExcel- ExtJS_3.0
当在工具条中同时出现Menu和Element时,会导致Menu失灵。
1、Ext.Toolbar的常用方法:
addButton()
addElement()
addField()
addFill()
addSeparator()
addText()
add()
2、普通工具条
Js代码
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
- Ext.QuickTips.init();
- var currnetItem = null;
- //菜单工具条
- var fileMenu = new Ext.menu.Menu({
- shadow: "sides",
- items: [
- {text:"新建", menu:[
- {text:"Word文档", handler:onMenuItem},
- {text:"Excel文档"},
- {text:"文本文件"}
- ]},
- {text:"打开", handler:onMenuItem},
- "-",
- {text:"关闭", handler:onMenuItem}
- ]
- });
- var editMenu = new Ext.menu.Menu({
- items: [
- {text:"剪切", handler:onMenuItem},
- {text:"复制", handler:onMenuItem},
- {text:"粘贴", handler:onMenuItem}
- ]
- });
- var themeMenu = new Ext.menu.Menu({
- items: [
- {id:"default", text:"默认", checked:true, group:"theme", checkHandler:onItemCheck},
- {id:"red", text:"红色", checked:false, group:"theme", checkHandler:onItemCheck},
- {id:"green", text:"绿色", checked:false, group:"theme", checkHandler:onItemCheck},
- {id:"gray", text:"灰色", checked:false, group:"theme", checkHandler:onItemCheck},
- "-",
- {text:"禁用", checked:false, checkHandler:onCheckboxItem}
- ]
- });
- var scrollMenu = new Ext.menu.Menu({
- maxHeight: 200,
- showSeparator: false
- });
- for (var i = 0; i < 50; ++i){
- scrollMenu.add({
- text: 'Item ' + (i + 1)
- });
- }
- var t3 = new Ext.Toolbar({
- items:[
- {text:"文件", menu:fileMenu},
- {text:"编辑", menu:editMenu},
- {text:"主题", menu:themeMenu},
- "-",
- {id:"add", text:"新建", iconCls:"add", enableToggle:true, toggleHandler:onToggleHandler},
- {id:"save", text:"保存", iconCls:"save", handler:onToolbarButton},
- {id:"delete", text:"删除", iconCls:"delete", handler:onToolbarButton},
- {icon:"../images/toolbar/help.gif", tooltip:"帮助文档"},
- {xtype:"splitbutton", text:"滚动菜单", menu:scrollMenu},
- "-",
- {xtype:"textfield", width:100},
- "->",
- {
- text:"enabled",
- handler: function(){
- if(currnetItem!=null && currnetItem.enable){
- currnetItem.setDisabled(false);
- currnetItem = null;
- alert(currnetItem);
- }
- }
- },
- "-",
- "工具条"
- ]
- });
- new Ext.Panel({
- title: "普通工具条",
- renderTo: "div1",
- frame: true,
- width: 700,
- tbar: t3,
- bodyStyle: "background-color:#FFFFFF; height:50; padding:3px;",
- html: "当在工具条中同时出现Menu和Element时,会导致Menu失灵。"
- });
- //单击工具条上的按钮时触发该函数
- function onToolbarButton(btn){
- alert(btn.id);
- }
- //单击菜单项时触发该函数
- function onMenuItem(item){
- alert(item.text);
- //item.setDisabled(true);
- //currnetItem = item;
- }
- //checked的值变化时触发该函数
- function onItemCheck(item, checked){
- if(checked) alert(item.text);
- }
- function onCheckboxItem(item){
- themeMenu.get("default").setDisabled(item.checked);
- themeMenu.get("red").setDisabled(item.checked);
- themeMenu.get("green").setDisabled(item.checked);
- themeMenu.get("gray").setDisabled(item.checked);
- }
- function onToggleHandler(item, pressed){
- alert(pressed);
- }
- });
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";Ext.QuickTips.init();var currnetItem = null;//菜单工具条var fileMenu = new Ext.menu.Menu({shadow: "sides",items: [{text:"新建", menu:[{text:"Word文档", handler:onMenuItem},{text:"Excel文档"},{text:"文本文件"}]},{text:"打开", handler:onMenuItem},"-",{text:"关闭", handler:onMenuItem}]});var editMenu = new Ext.menu.Menu({items: [{text:"剪切", handler:onMenuItem},{text:"复制", handler:onMenuItem},{text:"粘贴", handler:onMenuItem}]});var themeMenu = new Ext.menu.Menu({items: [{id:"default", text:"默认", checked:true, group:"theme", checkHandler:onItemCheck},{id:"red", text:"红色", checked:false, group:"theme", checkHandler:onItemCheck},{id:"green", text:"绿色", checked:false, group:"theme", checkHandler:onItemCheck},{id:"gray", text:"灰色", checked:false, group:"theme", checkHandler:onItemCheck},"-",{text:"禁用", checked:false, checkHandler:onCheckboxItem}]});var scrollMenu = new Ext.menu.Menu({maxHeight: 200,showSeparator: false});for (var i = 0; i < 50; ++i){ scrollMenu.add({ text: 'Item ' + (i + 1) }); } var t3 = new Ext.Toolbar({items:[{text:"文件", menu:fileMenu},{text:"编辑", menu:editMenu},{text:"主题", menu:themeMenu},"-",{id:"add", text:"新建", iconCls:"add", enableToggle:true, toggleHandler:onToggleHandler},{id:"save", text:"保存", iconCls:"save", handler:onToolbarButton},{id:"delete", text:"删除", iconCls:"delete", handler:onToolbarButton},{icon:"../images/toolbar/help.gif", tooltip:"帮助文档"},{xtype:"splitbutton", text:"滚动菜单", menu:scrollMenu},"-",{xtype:"textfield", width:100},"->",{text:"enabled", handler: function(){if(currnetItem!=null && currnetItem.enable){currnetItem.setDisabled(false);currnetItem = null;alert(currnetItem);}}},"-","工具条"]});new Ext.Panel({title: "普通工具条",renderTo: "div1",frame: true,width: 700,tbar: t3,bodyStyle: "background-color:#FFFFFF; height:50; padding:3px;",html: "当在工具条中同时出现Menu和Element时,会导致Menu失灵。"});//单击工具条上的按钮时触发该函数function onToolbarButton(btn){alert(btn.id);}//单击菜单项时触发该函数function onMenuItem(item){alert(item.text);//item.setDisabled(true);//currnetItem = item;}//checked的值变化时触发该函数function onItemCheck(item, checked){if(checked) alert(item.text);}function onCheckboxItem(item){themeMenu.get("default").setDisabled(item.checked);themeMenu.get("red").setDisabled(item.checked);themeMenu.get("green").setDisabled(item.checked);themeMenu.get("gray").setDisabled(item.checked);}function onToggleHandler(item, pressed){alert(pressed);}});
3、分组工具条
Js代码
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
- //菜单工具条
- var fileMenu = new Ext.menu.Menu({
- shadow: "sides",
- items: [{text:"新建"}, {text:"打开"}, "-", {text:"关闭"}]
- });
- var editMenu = new Ext.menu.Menu({
- items: [{text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"}]
- });
- var g1 = {
- xtype: "buttongroup",
- title: "菜单",
- columns: 3,
- defaults: {
- scale: "small", //small, medium, large
- iconAlign: "top"
- },
- items: [
- {xtype:"splitbutton", text:"文件", menu:fileMenu, iconCls:"add", rowspan:1, arrowAlign:"bottom"},
- {xtype:"splitbutton", text:"编辑", menu:editMenu, iconCls:"save", rowspan:1, arrowAlign:"bottom"},
- {text:"查看", iconCls:"search", scale: "large"}
- ]
- };
- var g2 = {
- xtype: "buttongroup",
- title: "返回",
- columns: 1,
- defaults: {
- scale: "large",
- iconAlign: "top"
- },
- items: {text:"返回", iconCls:"back"}
- };
- var g3 = {
- xtype: "buttongroup",
- title: "剪贴板",
- defaults: {
- scale: "large",
- iconAlign: "top"
- },
- items: [
- {text:"剪切", iconCls:"cut"},
- {text:"复制", iconCls:"copy"},
- {text:"粘贴", iconCls:"paste"}
- ]
- };
- var g4 = {
- xtype: "buttongroup",
- title: "帮助",
- defaults: {
- scale: "small"
- },
- height: 80,
- items: [
- {xtype:"splitbutton", text: "帮助", iconCls:"help"}
- ]
- };
- var panel = new Ext.Panel({
- title: "分组工具条",
- renderTo: "div1",
- frame: true,
- width: 600,
- height: 300,
- autoScroll: true,
- tbar: [g1, g3, g2, g4],
- bodyStyle: "background-color:#FFFFFF; padding:3px;",
- autoLoad: "messagebox.action"
- });
- });
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";//菜单工具条var fileMenu = new Ext.menu.Menu({shadow: "sides",items: [{text:"新建"}, {text:"打开"}, "-", {text:"关闭"}]});var editMenu = new Ext.menu.Menu({items: [{text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"}]});var g1 = {xtype: "buttongroup",title: "菜单",columns: 3,defaults: { scale: "small", //small, medium, largeiconAlign: "top" },items: [{xtype:"splitbutton", text:"文件", menu:fileMenu, iconCls:"add", rowspan:1, arrowAlign:"bottom"},{xtype:"splitbutton", text:"编辑", menu:editMenu, iconCls:"save", rowspan:1, arrowAlign:"bottom"},{text:"查看", iconCls:"search", scale: "large"}]};var g2 = {xtype: "buttongroup",title: "返回",columns: 1,defaults: {scale: "large",iconAlign: "top"},items: {text:"返回", iconCls:"back"}};var g3 = {xtype: "buttongroup",title: "剪贴板",defaults: {scale: "large",iconAlign: "top"},items: [{text:"剪切", iconCls:"cut"},{text:"复制", iconCls:"copy"},{text:"粘贴", iconCls:"paste"}]};var g4 = {xtype: "buttongroup",title: "帮助",defaults: {scale: "small"},height: 80,items: [{xtype:"splitbutton", text: "帮助", iconCls:"help"}]};var panel = new Ext.Panel({title: "分组工具条",renderTo: "div1",frame: true,width: 600,height: 300,autoScroll: true,tbar: [g1, g3, g2, g4],bodyStyle: "background-color:#FFFFFF; padding:3px;",autoLoad: "messagebox.action"});});
- 大小: 25.9 KB
- 大小: 34.8 KB
- 查看图片附件
2010-05-18缩略显示
- 01:13
- 评论 / 浏览 (0 / 1869)
- 分类:Web前端
窗口(Ext.Window)
博客分类:
EXT- ExtJS_3.0
Ext.Window扩展自Ext.Panel,其xtype值为window。
1、主要配置项:
closable:是否允许关闭窗口,默认为true。
closeAction:关闭窗口的动作,包括以下两种:
close:从DOM删除窗口,销毁窗口及其所属组件,窗口不再可用,重新显示需要调用show方法。此为默认值。
hide:通过设置可见性隐藏窗口,窗口还可用,调用show方法后重新显示。
constrain:是否约束窗口只能在容器内移动,默认为false。窗口默认渲染到document.body。
constrainHeader:是否约束窗口头部只能在容器内移动,默认为false。
draggable:是否可拖曳,默认为true。
resizable:是否可改变窗口的大小,默认为true。
modal:是否为模式窗口,默认为false。
maximizable:是否可最大化窗口,默认为false。
maximized:是否在初始化时最大化显示窗口,默认为false。
x:窗口的X坐标值。
y:窗口的Y坐标值。
manager:WindowGroup的引用。
expandOnShow:是否在窗口显示时展开它,默认为true。 当取值为false时,collapsed取值为true时,窗口初始显示时收缩。
minimizable:是否可最小化窗口,默认为false。需要自定义最小化行为。
defaultButton:当窗口获得焦点时,默认获得焦点的按钮。
plain:主体背景是否透明,默认为false。
2、主要方法:
show( [String/Element animateTarget], [Function callback], [Object scope] ):显示窗口。
hide( [String/Element animateTarget], [Function callback], [Object scope] ):隐藏窗口。
center():窗口居中显示。
close():关闭窗口,相当于closeAction值为close的情形。
maximize():最大化窗口。
restore():还原窗口大小。
toggleMaximize():在最大化和还原之间切换。
minimize():最小化窗口。
setActive( Boolean active ):激活窗口。
focus():窗口获得焦点。
toBack():后置窗口。
toFront( [Boolean e] ):前置窗口。
resize( Ext.Window this, Number width, Number height ):改变大小。
3、Ext.WindowGroup的主要方法:
hideAll()
sendToBack( String/Object win )
bringToFront( String/Object win )
get( String/Object id )
getActive()
each( Function fn, [Object scope] )
getBy( Function fn, [Object scope] )
4、范例
Js代码
- var win;
- Ext.get("btnShowWindow").on("click", function(){
- if(!win){
- win = new Ext.Window({
- title: "窗口",
- layout: "border",
- width: 500,
- height: 300,
- modal: true,
- closeAction: "hide",
- plain: true,
- maximizable: true,
- items: [
- {
- title: "组织机构",
- region: "west",
- collapsible: true,
- split: true,
- width: 100
- },
- {
- title: "组织人员",
- region: "center"
- }
- ],
- buttons: [
- {text:"关闭", handler:function(){
- win.hide();
- }}
- ]
- });
- }
- win.show(this);
- });
var win;Ext.get("btnShowWindow").on("click", function(){if(!win){win = new Ext.Window({title: "窗口",layout: "border",width: 500,height: 300,modal: true,closeAction: "hide",plain: true,maximizable: true,items: [{title: "组织机构",region: "west",collapsible: true,split: true,width: 100},{title: "组织人员",region: "center"}],buttons: [{text:"关闭", handler:function(){win.hide();}}]});}win.show(this);});
窗口分组:
Js代码
- var i=1, mygroup;
- function newWin() {
- var x = i++;
- var win = new Ext.Window({
- id:"win"+x,
- title:"窗口"+x,
- width:400,
- height:300,
- maximizable:true,
- manager:mygroup
- });
- win.show();
- }
- function toBack(){
- mygroup.sendToBack(mygroup.getActive());
- }
- function toFront(){
- mygroup.bringToFront(mygroup.get("win1"));
- }
- function hideAll(){
- mygroup.hideAll();
- }
- Ext.onReady(function(){
- mygroup = new Ext.WindowGroup();
- Ext.get("btn").on("click", newWin);
- Ext.get("btnToBack").on("click", toBack);
- Ext.get("btnToFront").on("click", toFront);
- Ext.get("btnHide").on("click", hideAll);
- });
var i=1, mygroup; function newWin() { var x = i++;var win = new Ext.Window({id:"win"+x,title:"窗口"+x,width:400,height:300,maximizable:true,manager:mygroup}); win.show();}function toBack(){mygroup.sendToBack(mygroup.getActive());}function toFront(){mygroup.bringToFront(mygroup.get("win1"));}function hideAll(){mygroup.hideAll();}Ext.onReady(function(){mygroup = new Ext.WindowGroup();Ext.get("btn").on("click", newWin);Ext.get("btnToBack").on("click", toBack);Ext.get("btnToFront").on("click", toFront);Ext.get("btnHide").on("click", hideAll); });
- 大小: 17.6 KB
- 查看图片附件
2010-05-18缩略显示
- 01:04
- 评论 / 浏览 (0 / 2962)
- 分类:Web前端
面板(Ext.Panel)
博客分类:
EXTHTML- ExtJS_3.0
1、主要配置项:
applyTo:在目标元素之后追加组件。
renderTo:将目标元素作为新组件的容器。
frame:是否渲染面板,默认为false。
layout:面板的布局类型。
layoutConfig:被选布局的配置项。
title:设置面板头部的标题信息。
header:设置是否创建面板头部,默认为false。
headerAsText:是否在面板头部显示标题信息,默认为true。
tools:工具按钮配置对象的数组。
tools主要配置项:
id:可选值有toggle、close、minimize、maximize、refresh、plus、minus、help、search、save等。
qtip:按钮的提示信息。
handler:单击按钮后触发的函数。
draggable:是否可以拖曳,默认为false。
collapsible:是否允许面板进行展开和收缩,默认为false。
titleCollapse:是否允许通过单击面板头部进行展开和收缩操作,默认为false。
hideCollapseTool:是否隐藏展开和收缩按钮,默认为false。
collapsed:设置面板在第一次渲染时是否处于收缩状态,默认为false。
animCollapse:是否在展开和收缩时显示动画效果,默认为true。
autoWidth:是否使用自动宽度,默认为false。
width:面板宽度,默认为auto。
autoHeight:是否使用自动高度,默认为false。
height:面板高度,默认为auto。
autoScroll:是否自动显示滚动条,默认为false。
disabled:面板是否失效,默认为false。
floating:面板是否浮动。
shadow:面板是否有阴影,此配置项只有在floating=true时有效。
x:浮动时的X坐标。
y:浮动时的Y坐标。draggable:面板是否可拖曳,默认为false。或者自定义DD对象。
Js代码
- draggable: {
- insertProxy: false,
- onDrag: function(e){
- //代理对象
- var p = this.proxy.getEl();
- this.x = p.getLeft();
- this.y = p.getTop();
- //阴影对象
- var s = this.panel.getEl().shadow;
- if(s){
- s.realign(this.x, this.y, p.getWidth(), p.getHeight());
- }
- },
- endDrag: function(e){
- this.panel.setPosition(this.x, this.y);
- }
- }
draggable: {insertProxy: false,onDrag: function(e){//代理对象var p = this.proxy.getEl();this.x = p.getLeft();this.y = p.getTop();//阴影对象var s = this.panel.getEl().shadow;if(s){ s.realign(this.x, this.y, p.getWidth(), p.getHeight()); }},endDrag: function(e){ this.panel.setPosition(this.x, this.y); }}
tbar:设置面板的顶端工具栏。
autoLoad:设置面板自动加载的url地址,作为body元素内容。items、html和contentEl的内容将被替代。autoLoad:'ajax1.htm'
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
items:单独一个子组件或组件的数组。
html:设置面板元素的内容,可以是HTML片段或DomHelper生成的内容。
contentEl:设置面板的内容元素,可以是页面元素的id或已存在的HTML节点。
bodyStyle:面板体的自定义样式。
defaults:应用到面板容器中所有元素的配置对象。
defaultType:面板中元素的默认类型,默认为panel。
bbar:设置面板的底端工具栏。
buttons:加入到面板底部中按钮配置对象的数组。
buttonAlign:按钮的对齐方式。有效值包括left、center、right。默认为right。
2、范例
Js代码
- var panel1 = new Ext.Panel({
- renderTo: "div1",
- width: 500,
- height: 200,
- title: "标题信息",
- collapsible: true,
- titleCollapse: true,
- hideCollapseTool: true,
- tbar: [
- {xtype:"button", id: "btnAdd", text:"添加", iconCls:"add"},
- {xtype:"button", text:"删除", iconCls:"delete"},
- {xtype:"button", text:"保存", iconCls:"save"},
- "-",
- {xtype:"button", text:"查找", iconCls:"search"},
- {xtype:"button", text:"返回", iconCls:"back"}
- ],
- html: "面板范例",
- bodyStyle: "padding:3px;",
- bbar: [
- new Ext.Toolbar.Spacer(),
- "温馨提示:"
- ]
- });
- function clickPanelButton(event, toolEl, panel){
- alert(panel1.getTool("close"));
- }
var panel1 = new Ext.Panel({renderTo: "div1",width: 500,height: 200,title: "标题信息",collapsible: true,titleCollapse: true,hideCollapseTool: true,tbar: [{xtype:"button", id: "btnAdd", text:"添加", iconCls:"add"},{xtype:"button", text:"删除", iconCls:"delete"},{xtype:"button", text:"保存", iconCls:"save"},"-",{xtype:"button", text:"查找", iconCls:"search"},{xtype:"button", text:"返回", iconCls:"back"}],html: "面板范例",bodyStyle: "padding:3px;",bbar: [new Ext.Toolbar.Spacer(),"温馨提示:"]});function clickPanelButton(event, toolEl, panel){alert(panel1.getTool("close"));}
3、Ext.ButtonGroup扩展自Ext.Panel,其xtype值为buttongroup。
主要配置项:
columns:栏数
- 大小: 17.4 KB
2010-05-18缩略显示
- 查看图片附件
菜单(Ext.menu.Menu)
博客分类:
EXT- ExtJS_3.0
1、Ext.menu.Menu的主要配置项:
shadow:是否显示阴影或者阴影显示方式,显示方式有sides、frame、drop,默认为true即sides。
items:菜单项数组。
菜单项主要配置项:
text:菜单项显示的文字
iconCls:菜单项显示的图标
handler:按钮单击后调用的函数,菜单项本身作为参数传入到函数
function onMenuItem(item){
alert(item.text);
}
menu:菜单
checked:是否包含选择框
group:对菜单项分组,组内的菜单项只能选择一个,相当于radio
checkHandler:菜单项的checked值变化时触发的函数,菜单项本身作为参数传入到函数
function onCheckboxItem(item){
alert(item.checked);
}
enableScrolling:是否允许菜单容器在菜单太长时有滚动条,默认为true。
maxHeight:菜单的最大高度。
minWidth:菜单的最小宽度。
2、Ext.menu.Menu的常用方法:
addElement()
addItem()
addMenuItem()
addSeparator()
addText()