首页 > 代码库 > Extjs基本控件（转 出处：http://lg985.iteye.com/blog/1110576）

Extjs基本控件（转 出处：http://lg985.iteye.com/blog/1110576）

2024-07-31 17:27:11   220人阅读

1.Ext xtype类型

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       Ext.grid.EditorGridPanel 可编辑的表格　

grid               Ext.grid.GridPanel 表格

paging           Ext.PagingToolbar 工具栏中的间隔

panel            Ext.Panel　面板

progress         Ext.ProgressBar 进度条

splitbutton      Ext.SplitButton 可分裂的按钮

tabpanel         Ext.TabPanel　选项面板

treepanel        Ext.tree.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="http://www.mamicode.com/[‘湖北‘,‘江西‘,‘安徽‘]";

 

//aspx前台js介绍代码 
Ext.onReady(function(){
       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="http://www.mamicode.com/"/>

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=http://www.mamicode.com/[[‘湖北‘,‘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(){
                            alert(Ext.get("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//宽度
         });
//html代码
<select id="select">
        <option value="http://www.mamicode.com/1">***</option>
        <option value="http://www.mamicode.com/2">博客园</option>
        <option value="http://www.mamicode.com/3">百度</option>
        <option value="http://www.mamicode.com/4">新浪</option>
    </select>
//是不是超级简单？

     从中不是也可以看出extjs的不同之处的，不过不明显！
10.ComboBox的其他重要参数

1.valueField:"valuefield"//value值字段
2.displayField："field" //显示文本字段
3.editable：false//false则不可编辑，默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250
//其他参数，请参考api，或自行尝试

关于combobox的其他花俏功能在此不多做介绍。
最后一点，如何实现在aspx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件，然后在aspx页面引用
这样就有一个问题，我在js里直接获取cs数据就有点不方便。我认为可以这样，在aspx页面里获取数据，并作为js，你就js变量，你就可
以在js里引用了，或者直接通过url地址获取。
之所以这么啰嗦的讲combobox，是因为这个东西有时候真的让人又爱又恨！

4.Ext.grid.GridPanel
stripeRows: true,　　//隔行换色
viewConfig: { forceFit: true },　　//自动均分列宽
selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),　　//设置选中模式
loadMask: { msg: ‘正在加载数据，请稍侯……‘ },　　//加载完成前显示信息，设置为true则显示Loading
autoDestroy //Boolean 销毁store当组件的store已经被绑定并销毁 (?? 没有测试出来，后续文章继续测)
columnLines: true,　　//显示列线条 


5.Ext.grid.ColumnModel
header　　　　　 //表格列头名称
dataIndex　　　　//字段名称
sortable　　　　　//是否允许按列排序，默认为false
resizable:false　　//是否可改变列宽，默认为true
menuDisabled: true　　//是否禁用(不显示)列头菜单项，默认false
hidden:false　　　//是否隐藏本列 
renderer:　　　　//渲染，自定义格式输出

 

 

Extjs基本控件（转 出处：http://lg985.iteye.com/blog/1110576）


联系
我们