- 浏览: 878234 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
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 3730js 代码 var combo = new Ext.for ... -
Ext.form.Checkbox 单击选中事件
2011-12-15 23:25 1788var timeArea = new Ext.form.Che ... -
去掉extjs中CheckboxSelectionModel的全选框
2011-11-14 15:49 2591extjs全选是个鸡肋,没有必要的话可以在包含Checkb ... -
ExtJS中BLANK_IMAGE_URL的由来
2011-08-29 18:54 1242在使用ExtJS时,我们往往需要在使用之前加入这么一句: ... -
EXTJS gridpanel中的checkbox列 根据数据库值 来初始化是否被选中
2011-06-30 17:40 3994extjs gridpanel 中有一列是 checkb ... -
ExtJs + Struts2 + JSON 程序总结
2011-05-18 15:35 772最近一直都在看EXTJS的东西,然后自己实践了下,界面倒是蛮漂 ... -
ext panel 如何修改body部分的背景颜色
2011-01-13 17:24 2771var statusPanel = new Ext.Panel ... -
简析 createDelegate
2010-10-16 17:06 974关于回调函数指定参数问题,由来已久,extjs简洁优雅完美 ... -
Extjs Ext.MessageBox.confirm 确认对话框详解
2010-09-26 13:39 3839Ext.MessageBox.confirm()详解 显示 ... -
EXT3.2 版本Ext DateField显示日期时间方法
2010-09-08 13:09 3980multi-lang.js: MultiLangDem ... -
autoHeight为true的时候,autoScroll为true就不起作用了
2010-09-04 11:29 2141在面板panal属性设置里面:autoHeight为true的 ... -
Ext.extend用法以及代码解读
2010-05-22 23:44 1708Ext.extend用法以及代码解读 概述 Ext.e ...
相关推荐
在Windows编程中,尤其是使用MFC(Microsoft Foundation Classes)库时,我们经常需要自定义控件的外观,比如创建透明的Radio按钮和CheckBox。透明效果可以让界面看起来更加现代和美观,提升用户体验。以下是对"透明...
在网页设计中,radio(单选按钮)和...通过以上方法,我们可以使用纯CSS实现对radio和checkbox的美化,让网页的交互元素更加吸引人。在实际项目中,你可以根据提供的参考实例进行修改,以适应不同的主题和应用场景。
最后,本教程的源代码示例,codefans.net,提供了实际的运行例子,可以帮助初学者更好地理解和实践Radio和Check控件的用法。通过阅读和运行这些代码,可以深入学习到如何在C#应用程序中集成和操作这些控件。 总结来...
CSS被用来定义checkbox和radio的外观,通过设置`position`属性为`relative`,我们可以创建一个相对定位的容器来包裹实际的input元素。然后,将input元素的`position`设置为`absolute`,并调整`top`和`left`属性,使...
总之,通过CSS的高级用法,可以实现HTML`checkbox`和`radio`按钮的样式美化,使它们更加符合网页设计的需求,同时提升用户体验。需要注意的是,在实际应用中,可能还需要考虑不同浏览器的兼容性问题,并可能需要引入...
jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术,它可以帮助开发者摆脱浏览器默认样式,创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。 首先,我们要理解...
在本文中,我们将深入探讨如何在Visual Studio 2019 (VS2019) 中使用MFC(Microsoft Foundation Classes)实现Check Box和Radio Button的功能。MFC是微软为Windows应用程序开发提供的一种C++库,它封装了Windows API...
对于JavaScript和React.js,你可以利用CSS来改变`input[type="checkbox"]`和`input[type="radio"]`的伪元素,例如`::before`和`::after`,或者使用第三方库提供的API来定制样式。 总的来说,改变`Checkbox`和`...
iCheck.js提供了一些实用的方法,如`.iCheck('check')`、`.iCheck('uncheck')`、`.iCheck('disable')`和`.iCheck('enable')`,这些方法可以用于动态改变复选框或单选框的状态。 **五、兼容性与性能优化** iCheck....
### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`<select>` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...
综上所述,“权威实用jsp自定义标签demo,checkbox,radio>”教程旨在帮助开发者掌握如何创建和使用与选择器相关的自定义标签,从而提升JSP开发的效率和质量。通过学习这个教程,你可以了解到自定义标签的核心概念、...
本文主要介绍的是如何使用单选按钮(radio)和多选按钮(checkbox)这两种常见的表单元素。以下是对标题和描述中提及的知识点的详细说明: 1. **单选按钮(radio)**: 单选按钮在微信小程序中通常用于提供一系列...
总的来说,自定义Checkbox和Radio样式是提高网页用户体验的一种方法。通过CSS3,我们可以创建一致且美观的表单元素,增强网站的整体设计感。在实践中,应结合实际情况考虑兼容性问题,以确保所有用户都能顺利使用。
Bootstrap的iCheck插件是用于增强HTML中的复选框(checkbox)和单选按钮(radio)功能的一个强大工具。这个插件提供了丰富的自定义选项,兼容多种浏览器和设备,包括桌面和移动平台,如iOS、Android、BlackBerry和...
在前端开发中,元素的样式控制是至关重要的,特别是对于用户交互频繁的checkbox和radio按钮。"checkbox美化示例(icheck-css).rar"这个压缩包提供了多种方法来美化这些元素,帮助开发者提升用户体验。这里我们将...
在设置多选框(checkbox)的选中值时,需要注意的是,使用.val()方法只会选中指定的值,而使用.prop("selected",true)方法会保留之前已经选中的复选框,并且选中新的值。例如: ```javascript $("#btn3").click...
为了实现更加灵活的功能,有时我们需要利用 JavaScript 来控制表单元素的状态,例如通过单选按钮(`<input type="radio">`)来控制复选框(`<input type="checkbox">`)的状态。下面将详细解析如何使用 JavaScript ...
- 使用`attr()`方法可以轻松地设置或获取`checkbox`的选中状态。例如,`$("#checkAll").attr("checked", true)`会选中`id`为`checkAll`的`checkbox`,而`$("#checkAll").attr("checked", false)`则会取消选中。 - ...