extjs基本控件
1.Ext xtype类型
Ext xtype类型
xtypeClass
------------- ------------------
box Ext.BoxCom ponen t 具有边框属性的组件button Ext.Button按钮
colorp alett e Ext.ColorP alett e 调板
compon ent Ext.Compon ent组件
contai ner Ext.Contai ner容器
cycle Ext.CycleB utton
datavi ew Ext.DataVi ew 数据显示视图
datepi cker Ext.DatePi cker日期选择面板
editor Ext.Editor编辑器
editor grid id.Editor GridP anel可编辑的表格grid id.GridPa nel 表格
paging Ext.Paging Toolb ar 工具栏中的间隔panelExt.Panel面板
progre ss Ext.Progre ssBar进度条
splitb utton Ext.SplitB utton可分裂的按钮
tabpan el Ext.TabPan el选项面板
treepa nel TreePa nel 树
viewpo rt Ext.ViewPo rt 视图
window Ext.Window窗口
工具栏组件有
-
--------------------------------------
toolba r Ext.Toolba r工具栏
tbbutt on Ext.Toolba r.Button按钮
tbfill Ext.Toolba r.Fill文件
tbitem Ext.Toolba r.Item工具条项目
tbsepa rator Ext.Toolba r.Separa tor工具栏分隔符tbspac er Ext.Toolba r.Spacer工具栏空白
tbspli t Ext.Toolba r.SplitB utton工具栏分隔按钮tbtext Ext.Toolba r.TextIt em工具栏文本项
表单及字段组件包含：
---------------------------------------
form Ext.FormPa nel Form面板
checkb ox Ext.form.Checkb ox checkb ox录入框comboExt.form.ComboB ox combo选择项datefi eld Ext.form.DateFi eld日期选择项
fieldExt.form.Field表单字段
fields et Ext.form.FieldS et表单字段组
hidden Ext.form.Hidden表单隐藏域
htmled itor Ext.form.HtmlEd itorhtml编辑器
number field Ext.form.Number Field数字编辑器
radio Ext.form.Radio单选按钮
textar ea Ext.form.TextAr ea区域文本框
textfi eld Ext.form.TextFi eld表单文本框
timefi eld Ext.form.TimeFi eld时间录入项
trigge r Ext.form.Trigge rFiel d触发录入项
如果要使输入域为密码类型可以使用
inputT ype: 'passwo rd'
如果：
{xtype:'textfi eld',inputT ype: 'passwo rd',fieldL abel:'密码',name: 'PASSWO RD',allowB lank:false,anchor:'95%'}
2.Ext.form.TextFi eld组件
//这里是把Te xtFie ld很重要的属性列出来实际在应用的时候不需要将每个属性都列出也许只需要一个属性就够了。
functi on ready()
{
Ext.QuickT ips.init();
var textfi eldNa me = new Ext.form.TextFi eld
({
id:"textfi eldNa me",
allowB lank:false,//默认是tru e，如果是fal se，就是不允许空
//假如不为空时，定义提示信息默认的提示信息是：This fieldis requir ed
//要使提示内容出现，需要添加 Ext.QuickT ips.init();
blankT ext:"请输入数据",
disabl ed:false,//默认是fal se
emptyT ext:"请正确输入数据",//默认是nul l
fieldL abel:"用户名称",//默认是""
height:"auto",//默认是aut o
hidden:false,//默认是fal se
hideLa bel:false,//默认是fal se
hideMo de:"offset s",//默认disp lay，可以取值：displa y，offset s，visibi lity
inputT ype:"text",//输入类型这个很重要，可以是rad io, text, passwo rd, file 默认是tex t invali dText:"invali dText：只能够输入数字",//默认是：The valuein this fieldis invali d
maxLen gth:100,//能够输入的内容的最大长度
maxLen gthTe xt:"输入内容太长了",//超出最大长度的设置信息
minLen gth:2,//能够输入的内容的最小长度
minLen gthTe xt:"输入内容太短了",//没有达到最小长度的设置信息
readOn ly:false,//内容是否只读，默认fals e
regex:/^\d$/, //正则表达式这里假设只允许输入数字如果输入的不是数字就会出现下面定义的提示信息
regexT ext:"regexT ext：只能够输入数字", //定义不符合正则表达式的提示信息
valida teOnB lur:true,//默认是tru e，失去焦点时验证
valida tionD elay:300,//默认是250，验证延迟时间，毫秒数
valida tionE vent:"click", //验证事件默认是key up可以是Str ing/Boolea n
//自定义的验证函数当输入的数据不符合正则表达式的要求时，就会执行这个函数
valida tor:functi on(){Ext.Msg.alert("提示信息","只能够输入数字");},
value:"",//自定义的信息默认是：undefi ned
//x:number,y:number，在容器中的x,y坐标
width:"auto",//默认是aut o
render To:"Bind_T extFi eld"
});
3.ComboB ox组件的使用
1.服务器数据作为Comb oBox的数据源实例
首先从服务器获取jso n数据：
/
/cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public string Server Data="['湖北','江西','安徽']";
//aspx前台js介绍代码
var combo=new Ext.form.ComboB ox({
store:<%=Server Data%>,//获取Serv erDat a的str ing值，不要用""引起来，否则就不是o bject数据，而是字符串，这是一个很巧妙的关键点：把服务器的字符串转化为js的ob ject数据，是不是超级方便。
emptyT ext:'请选择一个省份....',
applyT o: 'combo'
});
});
//aspx前台html代码
<inputtype="text" id="combo" size="20"/>
我们就通过<%=Server Data%>这样的方式获取到了服务器最简单的属性数据。问题来了，js 和htm l怎么调用c#后台
的变量和方法？（变量的调用上面刚刚介绍）
6.js和htm l怎么调用c#后台的变量和方法
关于这个话题，我不多说，网上很多讲解，在此仅简单说明
1.js调用c#后台变量，参考上面，注意，如果想获取s tring类型，请在js里用引号var str="<%=Server Data%>"(返回"['湖北','江西','安徽']")
2.js调用c#后台方法：
<!--后台有一个方法：
public string Server Data()
{
return "fdfdfd fdsf";
}
前台代码：-->
<inputid="Text2" type="text" value="<%=Server Data()%>"/>
3.js调用c#后台带参数的方法
<!--public string Server Data(string pram)
{
return pram+"，我是参数传进来的";
}
主要是处理好js的引号问题，多尝试就会正确-->
<script>alert('<%=Server Data("谦虚的天下") %>');</script>
好了，现在我们有了js获取后台数据的方法手段，不怕不怕啦，不过，这只是一小步。7.ComboB ox的数据源stor e格式详解
在前面的例子里面，我们一直给C omboB ox的数据源stor e赋值一维数组，其实stor e支持多维和Stor e.data.Store类型。
//下面就几种数据以代码举例说明
1.一维数组：["江西","湖北"]，值同时赋给C omboB ox的va lue和t ext
2.二维和多维数组：[["one","bbar","111"],["two","tbar","222"]]，第一维和第二维分别赋值给valu e和tex t，其他维忽略
3.store类型：包括Grou pingS tore, JsonSt ore, Simple Store.
//我们分三步走：
//第一步：提供数据：
var data=[['湖北','hubei'],['江西','jiangx i'],['安徽','anhui']];
//第二步：导入到sto re中：
var store= new Ext.data.Simple Store({
fields: ['chines e', 'englis h'],
data : data
});
//第三步：把store托付给co mboBo x的sto re
var combo= new Ext.form.ComboB ox({
store: store,
displa yFiel d:'englis h',//store字段中你要显示的字段，多字段必选参数，默认当mod e为rem ote时d ispla yFiel d为und efine，当selec t列表时d ispla yFiel d为"text"
mode: 'local',//因为data已经取数据到本地了，所以'local'，默认为"remote"，枚举完
emptyT ext:'请选择一个省份...',
applyT o: 'combo'
});
这里我们介绍了两个新的参数dis playF ield和mode，请记住，后面不再专门说明。
8.ComboB ox的va lue获取
添加list eners事件：
//ComboB ox的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，select事件就是其中典型的一个
listen ers:{
"select":functi on(){
alert(("combo").dom.value); //获取id为c ombo的值
}
}
//这里我们提供了一种不是很好的方法，在此不做过多停留
9.把Extjs的Comb oBox样式应用到s elect的下拉框中去
核心参数介绍
transf orm:id//用于转换样式的，TimeFi eld作为Combo Box的子类也有此属性
html获取input输入的数据核心代码：
//js代码
var ExtSel ect=new Ext.form.ComboB ox({
transf orm:"select",//html中的id
width:80//宽度
});
/
/html代码
<select id="select">
<option value="1">***</option>
<option value="2">博客园</option>
<option value="3">百度</option>
<option value="4">新浪</option>
</select>
//是不是超级简单？
从中不是也可以看出ex tjs的不同之处的，不过不明显！
10.ComboB ox的其他重要参数
1.valueF ield:"valuef ield"//value值字段
2.displa yFiel d："field" //显示文本字段
3.editab le：false//false则不可编辑，默认为tru e
5.hidden Name:string //真正提交时此combo的name，请一定要注意
//其他参数，请参考api，或自行尝试
关于comb obox的其他花俏功能在此不多做介绍。
最后一点，如何实现在a spx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件，然后在asp x页面引用
这样就有一个问题，我在js里直接获取cs数据就有点不方便。我认为可以这样，在aspx页面里获取数据，
并作为js，你就js变量，你就可
以在js里引用了，或者直接通过url地址获取。
之所以这么啰嗦的讲co mbobo x，是因为这个东西有时候真的让人又爱又恨！
id.GridPa nel
stripe Rows: true,//隔行换
viewCo nfig: { forceF it: true },//自动均分列宽
selMod el: id.RowSel ectio nMode l({ single Selec t: true }),//设置选中模式
loadMa sk: { msg: '正在加载数据，请稍侯……' },//加载完成前显示信息，设置为tru e则显示L oadin g
autoDe stroy//Boolea n 销毁stor e当组件的store已经被绑定并销毁(?? 没有测试出来，后续文章继续测)
column Lines: true,//显示列线条
id.Column Model
header//表格列头名称
dataIn dex//字段名称
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论