- 浏览: 865361 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
hzw2312:
C = sin(MLatA)*sin(MLatB)*cos(M ...
根据地球上任意两点的经纬度计算两点间的距离 -
zhang_sun:
rewind方法的limit又是多少呢?等于capacity? ...
ByteBuffer的flip,clear及rewind区别 -
kalogen:
一种每次都获取到不同的随机数的办法int ranseed=12 ...
J2ME中Random类的使用 -
kalogen:
估计部署在某个端口下吧,仔细检查一下发布的配置文件
Tomcat负载均衡和集群环境的搭建 -
zhuchao_ko:
文件大点就嗝屁了~~~
Axis 1.4 上传二进制文件(base64Binary)
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
/*====================================================================
* Individual checkbox/radio examples
*====================================================================*/
// Using checkbox/radio groups will generally be easier and more flexible than
// using individual checkbox and radio controls, but this shows that you can
// certainly do so if you only need a single control, or if you want to control
// exactly where each check/radio goes within your layout.
var individual = [{
bodyStyle: 'padding-right:5px;',
items: {
xtype: 'fieldset',
title: 'Individual Checkboxes',
autoHeight: true,
defaultType: 'checkbox', // each item will be a checkbox
items: [{
xtype: 'textfield',
name: 'txt-test1',
fieldLabel: 'Alignment Test'
}, {
fieldLabel: 'Favorite Animals',
boxLabel: 'Dog',
name: 'fav-animal-dog'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Cat',
name: 'fav-animal-cat'
}, {
checked: true,
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Monkey',
name: 'fav-animal-monkey'
}]
}
}, {
bodyStyle: 'padding-left:5px;',
items: {
xtype: 'fieldset',
title: 'Individual Radios',
autoHeight: true,
defaultType: 'radio', // each item will be a radio button
items: [{
xtype: 'textfield',
name: 'txt-test2',
fieldLabel: 'Alignment Test'
}, {
checked: true,
fieldLabel: 'Favorite Color',
boxLabel: 'Red',
name: 'fav-color',
inputValue: 'red'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Blue',
name: 'fav-color',
inputValue: 'blue'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Green',
name: 'fav-color',
inputValue: 'green'
}]
}
}];
/*====================================================================
* CheckGroup example
*====================================================================*/
var checkGroup = {
xtype: 'fieldset',
title: 'Checkbox Groups (initially collapsed)',
autoHeight: true,
layout: 'form',
collapsed: true, // initially collapse the group
collapsible: true,
items: [{
xtype: 'textfield',
name: 'txt-test3',
fieldLabel: 'Alignment Test',
anchor: '95%'
},{
// Use the default, automatic layout to distribute the controls evenly
// across a single row
xtype: 'checkboxgroup',
fieldLabel: 'Auto Layout',
items: [
{boxLabel: 'Item 1', name: 'cb-auto-1'},
{boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-auto-3'},
{boxLabel: 'Item 4', name: 'cb-auto-4'},
{boxLabel: 'Item 5', name: 'cb-auto-5'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
// Put all controls in a single column with width 100%
columns: 1,
items: [
{boxLabel: 'Item 1', name: 'cb-col-1'},
{boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Multi-Column (horizontal)',
// Distribute controls across 3 even columns, filling each row
// from left to right before starting the next row
columns: 3,
items: [
{boxLabel: 'Item 1', name: 'cb-horiz-1'},
{boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-horiz-3'},
{boxLabel: 'Item 4', name: 'cb-horiz-4'},
{boxLabel: 'Item 5', name: 'cb-horiz-5'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Multi-Column (vertical)',
itemCls: 'x-check-group-alt',
// Distribute controls across 3 even columns, filling each column
// from top to bottom before starting the next column
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'cb-vert-1'},
{boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-vert-3'},
{boxLabel: 'Item 4', name: 'cb-vert-4'},
{boxLabel: 'Item 5', name: 'cb-vert-5'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Multi-Column<br />(custom widths)',
// Specify exact column widths (could also include float values for %)
columns: [100, 100],
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
{boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
{boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
{boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
]
},{
xtype: 'checkboxgroup',
itemCls: 'x-check-group-alt',
fieldLabel: 'Custom Layout<br />(w/ validation)',
allowBlank: false,
anchor: '95%',
items: [{
// You can pass sub-item arrays along with width/columnWidth configs
// ColumnLayout-style for complete layout control. In this example we
// only want one item in the middle column, which would not be possible
// using the columns config. We also want to make sure that our headings
// end up at the top of each column as expected.
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 1', name: 'cb-cust-1'},
{boxLabel: 'Item 2', name: 'cb-cust-2'}
]
},{
columnWidth: '.5',
items: [
{xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
]
},{
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 4', name: 'cb-cust-4'},
{boxLabel: 'Item 5', name: 'cb-cust-5'}
]
}]
}]
};
/*====================================================================
* RadioGroup examples
*====================================================================*/
// NOTE: These radio examples use the exact same options as the checkbox ones
// above, so the comments will not be repeated. Please see comments above for
// additional explanation on some config options.
var radioGroup = {
xtype: 'fieldset',
title: 'Radio Groups',
autoHeight: true,
items: [{
xtype: 'textfield',
name: 'txt-test4',
fieldLabel: 'Alignment Test',
anchor: '95%'
},{
xtype: 'radiogroup',
fieldLabel: 'Auto Layout',
items: [
{boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
columns: 1,
items: [
{boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
columns: 3,
items: [
{boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column<br />(vert. auto-width)',
itemCls: 'x-check-group-alt',
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column<br />(custom widths)',
columns: [100, 100],
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
]
},{
xtype: 'radiogroup',
itemCls: 'x-check-group-alt',
fieldLabel: 'Custom Layout<br />(w/ validation)',
allowBlank: false,
anchor: '95%',
items: [{
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
]
},{
columnWidth: '.5',
items: [
{xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
]
},{
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
]
}]
}]
};
// combine all that into one huge form
var fp = new Ext.FormPanel({
title: 'Check/Radio Groups Example',
frame: true,
labelWidth: 110,
width: 600,
renderTo:'form-ct',
bodyStyle: 'padding:0 10px 0;',
items: [
{
layout: 'column',
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: '.5',
border: false
},
items: individual
},
checkGroup,
radioGroup
],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
fp.getForm().getValues(true).replace(/&/g,', '));
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
});
发表评论
-
Ext.form.ComboBox常用属性详解
2011-12-15 23:32 3696js 代码 var combo = new Ext.for ... -
Ext.form.Checkbox 单击选中事件
2011-12-15 23:25 1744var timeArea = new Ext.form.Che ... -
去掉extjs中CheckboxSelectionModel的全选框
2011-11-14 15:49 2559extjs全选是个鸡肋,没有必要的话可以在包含Checkb ... -
ExtJS中BLANK_IMAGE_URL的由来
2011-08-29 18:54 1214在使用ExtJS时,我们往往需要在使用之前加入这么一句: ... -
EXTJS gridpanel中的checkbox列 根据数据库值 来初始化是否被选中
2011-06-30 17:40 3967extjs gridpanel 中有一列是 checkb ... -
ExtJs + Struts2 + JSON 程序总结
2011-05-18 15:35 741最近一直都在看EXTJS的东西,然后自己实践了下,界面倒是蛮漂 ... -
ext panel 如何修改body部分的背景颜色
2011-01-13 17:24 2744var statusPanel = new Ext.Panel ... -
简析 createDelegate
2010-10-16 17:06 950关于回调函数指定参数问题,由来已久,extjs简洁优雅完美 ... -
Extjs Ext.MessageBox.confirm 确认对话框详解
2010-09-26 13:39 3805Ext.MessageBox.confirm()详解 显示 ... -
EXT3.2 版本Ext DateField显示日期时间方法
2010-09-08 13:09 3953multi-lang.js: MultiLangDem ... -
autoHeight为true的时候,autoScroll为true就不起作用了
2010-09-04 11:29 2111在面板panal属性设置里面:autoHeight为true的 ... -
Ext.extend用法以及代码解读
2010-05-22 23:44 1674Ext.extend用法以及代码解读 概述 Ext.e ...
相关推荐
大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景...
C#完美演示Radio和Check控件的使用方法,演示单选框和复选框的使用,面向Visual C#初学者,高手请绕行哦。源代码也是挺简单的。
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, ...
6、25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 7、8 个回调事件 用来监听输入框的状态 8、7个方法 用来通过编程方式控制输入框的状态 9、能够将输入框的状态变化同步回原始输入框中, 支持...
环境:VS2019 功能: 1、MFC中check box的使用方法 2、MFC中Radio Button的使用方法
在IE中,在使用checkbox或radio时,你会发现有时不能通过CheckBoxObject.checked = true或CheckBoxObject.setAttribute(‘checked’, true)的方法使checkbox或radio被预选中。 解决这个问题的方法就是利用checkbox或...
原理:首先把input元素隐藏掉,然后用CSS设置label元素(其他元素也可以)的样式,选中时的样式使用input:check+label选中label,无须使用图片和JS 效果预览 html代码 <div class=radio> <input type=...
jQuery的检查视图 这个jQuery插件启用复选框和单选按钮的自定义CSS样式。... $ ( "input[type='checkbox'], input[type='radio']" ) . checkview ( ) ; 设置您CSS。 看一下示例样式: . checkview { backgro
|------ 4.F 关于WM_NOTIFY的使用方法 +-- 第五章 对话框 |------ 5.1 使用资源编辑器编辑对话框 |------ 5.2 创建有模式对话框 |------ 5.3 创建无模式对话框 |------ 5.4 在对话框中进行消息映射 |------ 5.5 在...
这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 ...
14.1.3. 使用静态 get() 方法 14.2. 标准过滤器类 14.2.1. Alnum 14.2.2. Alpha 14.2.3. BaseName 14.2.4. Digits 14.2.5. Dir 14.2.6. HtmlEntities 14.2.7. Int 14.2.8. RealPath 14.2.9. StringToLower...
5.12.2 选项卡控件的使用方法 235 5.12.3 创建选项卡控件的方法 235 5.12.4 处理选项卡控件通知消息 236 5.12.5 ctabctrl类简介 236 5.13 Visual C++ 2010 IP控件简介与开发 241 5.14 Visual C++ 2010 Picture控件...
二、默认校验规则(1)required:true 必输字段 (2)remote:”check.php” 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须...