Ext xtype 类型
xtype Class
------------- ------------------
box Ext.BoxComponent 具有边框属性的组件
button Ext.Button 按钮
colorpalette Ext.ColorPalette 调板
component Ext.Component 组件
container Ext.Container 容器
cycle Ext.CycleButton
dataview Ext.DataView 数据显示视图
datepicker Ext.DatePicker 日期选择面板
editor Ext.Editor 编辑器
editorgrid id.EditorGridPanel 可编辑的表格
grid id.GridPanel 表格
paging Ext.PagingToolbar 工具栏中的间隔
panel Ext.Panel 面板
progress Ext.ProgressBar 进度条
splitbutton Ext.SplitButton 可分裂的按钮
tabpanel Ext.TabPanel 选项面板
treepanel TreePanel 树
viewport Ext.ViewPort 视图
window Ext.Window 窗口
工具栏组件有
---------------------------------------
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 按钮
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项
表单及字段组件包含：
---------------------------------------
form Ext.FormPanel Form面板
checkbox Ext.form.Checkbox checkbox录入框
combo Ext.form.ComboBox combo选择项
datefield Ext.form.DateField 日期选择项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor html编辑器
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 区域文本框
textfield Ext.form.TextField 表单文本框
timefield Ext.form.TimeField 时间录入项
trigger Ext.form.TriggerField 触发录入项
如果要使输入域为密码类型可以使用
inputType: 'password'
如果：
{xtype:'textfield',inputType: 'password',fieldLabel: '密码',name: 'PASSWORD',allowBlank:false,anchor:'95%'}
2.Ext.form.TextField组件
/
/这里是把TextField很重要的属性列出来 实际在应用的时候不需要将每个属性都列出 也许只需要一个属性就够了。
function ready()
{
Ext.QuickTips.init();
var textfieldName = new Ext.form.TextField
({
id:"textfieldName",
allowBlank:false,//默认是true，如果是false，就是不允许空
//假如不为空时，定义提示信息 默
认的提示信息是：This field is required
//要使提示内容出现，需要添加 Ext.QuickTips.init();
blankText:"请输入数据",
disabled:false,//默认是false
emptyText:"请正确输入数据",//默认是null
fieldLabel:"用户名称",//默认是""
height:"auto",//默认是auto
hidden:false,//默认是false
hideLabel:false,//默认是false
hideMode:"offsets",//默认display，可以取值：display，offsets，visibility
inputType:"text",//输入类型 这个很重要，可以是radio, text, password, file 默认是text
invalidText:"invalidText：只能够输入数字",//默认是：The value in this field is invalid
maxLength:100,//能够输入的内容的最大长度
maxLengthText:"输入内容太长了",//超出最大长度的设置信息
minLength:2,//能够输入的内容的最小长度
minLengthText:"输入内容太短了",//没有达到最小长度的设置信息
readOnly:false,//内容是否只读，默认false
regex:/^\d$/, //正则表达式 这里假设只允许输入数字 如果输入的不是数字 就会出现下面定义的提示信息
regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息
validateOnBlur:true,//默认是true，失去焦点时验证
validationDelay:300,//默认是250，验证延迟时间，毫秒数
validationEvent:"click", //验证事件 默认是keyup 可以是String/Boolean
//自定义的验证函数 当输入的数据不符合正则表达式的要求时，就会执行这个函数
validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},
value:"",//自定义的信息 默认是：undefined
//x:number,y:number，在容器中的x,y坐标
width:"auto",//默认是auto
renderTo:"Bind_TextField"
});
3.ComboBox组件的使用
1.服务器数据作为ComboBox的数据源实例
首先从服务器获取json数据：
//cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public string ServerData="['湖北','江西','安徽']";
//aspx前台js介绍代码
var combo=new Ext.form.ComboBox({
store:<%=ServerData%>,//获取ServerData的string值，不要用""引起来，否则就不是object数据，而是字符串，这是一个很巧妙的关键点：把服务器的字符串转化为js的object数据，是不是超级方便。
emptyText:'请选择一个省份....',
applyTo: 'combo'
});
});
//aspx前台html代码
<input type="text" id="combo" size="20"/>
我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。问题来了，js和html怎么调用c#后台
的变量和方法？（变量的调用上面刚刚介绍）
6.js和html怎么调用c#后台的变量和方法
关于这个话题，我不多说，网上很多讲解，在此仅简单说明
1.js调用c#后台变量，参
考上面，注意，如果想获取string类型，请在js里用引号 var str="<%=ServerData%>"(返回"['湖北','江西','安徽']")
2.js调用c#后台方法：
<!--后台有一个方法：
public string ServerData()
{
return "fdfdfdfdsf";
}
前台代码：-->
<input id="Text2" type="text" value="<%=ServerData()%>"/>
3.js调用c#后台带参数的方法
<!--public string ServerData(string pram)
{
return pram+"，我是参数传进来的";
}
主要是处理好js的引号问题，多尝试就会正确-->
<script>alert('<%=ServerData("谦虚的天下") %>');</script>
好了，现在我们有了js获取后台数据的方法手段，不怕不怕啦，不过，这只是一小步。
7.ComboBox的数据源store格式详解
在前面的例子里面，我们一直给ComboBox的数据源store赋值一维数组，其实store支持多维和Store.data.Store类型。
//下面就几种数据以代码举例说明
1.一维数组：["江西","湖北"]，值同时赋给ComboBox的value和text
2.二维和多维数组：[["one","bbar","111"],["two","tbar","222"]]，第一维和第二维分别赋值给value和text，其他维忽略
3.store类型：包括GroupingStore, JsonStore, SimpleStore.
//我们分三步走：
//第一步：提供数据：
var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
//第二步：导入到store中：
var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'],
data : data
});
//第三步 ：把store托付给comboBox的store
var combo = new Ext.form.ComboBox({
store: store,
displayField:'english',//store字段中你要显示的字段，多字段必选参数，默认当mode为remote时displayField为undefine，当select列表时displayField为"text"
mode: 'local',//因为data已经取数据到本地了，所以'local'，默认为"remote"，枚举完
emptyText:'请选择一个省份...',
applyTo: 'combo'
});
这里我们介绍了两个新的参数displayField和mode，请记住，后面不再专门说明。
8.ComboBox的value获取
添加listeners事件：
//ComboBox的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，select事件就是其中典型的一个
listeners:{
"select":function(){
("combo").dom.value); //获取id为combo的值
}
}
//这里我们提供了一种不是很好的方法，在此不做过多停留
9.把Extjs的ComboBox样式应用到select的下拉框中去
核心参数介绍
transform:id//用于转换样式的，TimeField作为ComboBox的子类也有此属性
核心代码：
//js代码
var ExtSelect=new Ext.form.ComboBox({
transform:"select",//html中的id
width:80//宽度
});
editor bar//html代码
<select id="select">
<option value="1">***</option>
<option value="2">博客园</option>
<option value="3">百度</option>
<option value="4">新浪</option>
</select>
//是不是超级简单？
从中不是也可以看出extjs的不同之处的，不过不明显！
10.ComboBox的其他重要参数
1.valueField:"valuefield"//value值字段
2.displayField："field" //显示文本字段
3.editable：false//false则不可编辑，默认为true
5.hiddenName:string //真正提交时此combo的name，请一定要注意
//其他参数，请参考api，或自行尝试
关于combobox的其他花俏功能在此不多做介绍。
最后一点，如何实现在aspx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件，然后在aspx页面引用
这样就有一个问题，我在js里直接获取cs数据就有点不方便。我认为可以这样，在aspx页面里获取数据，并作为js，你就js变量，你就可
以在js里引用了，或者直接通过url地址获取。
之所以这么啰嗦的讲combobox，是因为这个东西有时候真的让人又爱又恨！
id.GridPanel
stripeRows: true, //隔行换
viewConfig: { forceFit: true }, //自动均分列宽
selModel: id.RowSelectionModel({ singleSelect: true }), //设置选中模式
loadMask: { msg: '正在加载数据，请稍侯……' }, //加载完成前显示信息，设置为true则显示Loading
autoDestroy //Boolean 销毁store当组件的store已经被绑定并销毁 (?? 没有测试出来，后续文章继续测)
columnLines: true, //显示列线条
id.ColumnModel
header //表格列头名称
dataIndex //字段名称
sortable //是否允许按列排序，默认为false
resizable:false //是否可改变列宽，默认为true
menuDisabled: true //是否禁用(不显示)列头菜单项，默认false
hidden:false //是否隐藏本列
renderer: //渲染，自定义格式输出
分享到搜狐微博
发表评论