ExtJS 配置和表格控件使用

ExtJS—表单与输入控件表单在EXT中非常受欢迎，初看这些输入控件，好像只是修改了CSS样式而已，但是如果用Firebug查看一下DOM，似乎确实只有CSS发生了变化，隐藏在漂亮界面下的依然是原来的input控件，如果你想使用EXT提供的一些绚丽的功能，建议尝试EXT的表单(Form)和对应的输入控件。

本文就是简单介绍表单与输入控件的使用方法。

一、创建一个简单的表单1、具体配置信息参考上篇文章2、创建简单表单的实现代码如下所示：view plaincopy to clipboardprint?1.<mce:script type="text/javascript"><!--2.Ext.onReady(function(){3.var form=new Ext.form.FormPanel({4.defaultType:'textfield',belAlign:'right',6.title:'form',belWidth:50,8.frame:true,9.width:220,10.items:[{11.fieldLabel:' 文本框'12.}],13.buttons:[{14.text:'按钮'15.}]16.});17.form.render("div1");18.});19.20.// --></mce:script>3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。

具体实现效果如图1所示。

图1 简单的表单二、FormPanel和BasicForm详解如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.For mPanel 的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分，同时也可以利用items指定Ext.form.FormPanel内部的子组件。

1：按钮的禁用于否：属性： disabled : true, 初始化时为禁用Ext.getCmp('updateb').disable(); //禁用按钮Ext.getCmp('deleteb').enable(); //恢复可用2:面板Ext.getCmp('rulepanel').setVisible(true); //使面板可见Ext.getCmp('rulepanel').setVisible(false); //使面板不可见Ext.getCmp('rulepanel').collapse(true); //使rulepanel收缩Ext.getCmp('rulepanel').expand(true); //使rulepanel展开3：checkbox属性：inputValue 类似其valueview plaincopy to clipboardprint?var popSelect = Ext.getCmp('panel3').findByType('checkbox'); for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}var popSelect = Ext.getCmp('panel3').findByType('checkbox');for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}body : Ext.Element它是指向panel的body的Element引用。

ExtJS给表格gridpanel的表头加控件⽰例代码：Ext.onReady(function () {Ext.tip.QuickTipManager.init();Ext.create('Ext.container.Viewport', {layout: 'fit',items: [{xtype: 'grid', border: 0, title: '表头加控件的实现',store: {fields: [], data: []},columns: [{text: '姓名', dataIndex: 'name',width:250},{text: '性别', dataIndex: 'sex'},{text: '职业', dataIndex: 'zy'}],listeners: {afterrender: function (view) {var column = ponentQuery.query('gridcolumn[dataIndex=name]')[0];Ext.create('boBox', {queryMode: 'local',displayField: 'name',valueField: 'abbr',store: {fields: ['abbr', 'name'],data: [{"abbr": "AL", "name": "刘备"},{"abbr": "AK", "name": "关⽻"},{"abbr": "AZ", "name": "张飞"}]},renderTo: column.el,//关键样式代码style: 'position:absolute;top:2px;;right:20px;!important;',listeners: {el: {click: function (e) {//关键代码，阻⽌事件冒泡，引发列头点击事件e.stopEvent();}}}});}}}]});});备注：在Extjs5.1下测试通过，有其他个性化需求可参考此插件进⾏实现，谢谢。

ExtJS中表格控件的使用，属性设置和数据的获取ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：JsonStore，SimpleStore，GroupingStore…一个表格的基本编写过程：1、创建表格列模型var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role'},{header: '等级', dataIndex: 'grade'},{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //创建日期类型的数据});2、创建数据数组var data = [['士兵','7','2011-07-2412:34:56'],['将军','10','2011-07-2412:34:56'],];3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式ArrayReader的mapping用来设置列的排列顺序var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}{name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'} //创建日期列和显示格式])});store.load();4、创建GridPanel，装配ColumnModel和storevar grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cm});另外获取远程数据可以使用ScriptTagProxy,如下所示var store = new Ext.data.Store({proxy: new Ext.data.ScriptTagProxy({url:'http://...'}),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}]),sortInfo: {field: "role", direction: "ASC"} //设置默认排序列，ASC/DESC });表格的常用属性功能var grid = new Ext.grid.GridPanel({enableColumnMove: false, //禁止拖放列enableColumnResize: false, //禁止改变列的宽度stripeRows: true, //斑马线效果loadMask: true, //读取数据时的遮罩和提示功能renderTo: 'grid',store: storecm: cm});var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role', width:90, sortable: true}, //width 设置列宽度，默认为100px，sortable设置排序功能{id:'grade', header: '等级', dataIndex: 'grade', width:40}});var grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cmviewConfig:{ //让每列自动填充满表格forceFit: trueautoExpandColumn: 'grade' //自动延伸列，列的id在ColumnModel中定义});渲染表格，为表格设置特殊样式只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。

ExtJs控件的定义及使用方法（二）第三种控件：单击按钮，弹出窗口，选择数据，将数据传回按钮控件，然后执行操作，例如将传回的数据添加到gridPanel中-------------------------------------------1.调用控件界面Ext.ns("ff.cd.cd");/*** 综合组设置信息明细设置* @param {} config*/ff.cd.cd.showgoods = function(config) {config = Ext.apply({prefix : "showgoods"}, config);this.init = function() {// 判断是否存在此对象，如果不存在则新建，否则直接返回var _showpanel = Ext.getCmp(this.genId("main"));if (_showpanel) {return _showpanel;}var _this = this;this.setRecord = function(record){_this.record = record;if(record){mainform.form.loadRecord(this.record);Ext.getCmp(_this.genId('rate')).setValue(record.get("rate")*10 0);Ext.getCmp(_this.genId('merchrate')).setValue(record.get("m erchrate")*100);}}/*** 这是一个回调函数,将cdgoods中的数据回调过来,方便以后做处理* @param {Object} ss*/this.fn_query=function(ss){var mm="check";alert(ss+'将数据添加到grid中');}/***调用控件,调用的方法1*/var _merchcp=showgoodsButton({id:'',fn:this.fn_query});/*** 对弹出窗体做弹出前的判断*/this.fn_msg=function(){Ext.Msg.confirm('提示', "是否打开弹出窗口",function(btn){ if(btn=='yes'){_merchcp.pop();}});}/*/*** 单击按钮执行的操作*/_merchcp.onClick = function(){_this.fn_msg();};*/this.btn_save=function(){//var _merchcp=showgoodsButton();var m=_merchcp.getValues();}panel=new ff.cd.cd.cdgoods();//商户清算合同设置var mainform = new Ext.form.FormPanel({title: "商品控件",id: this.genId("main"),closable: true,// bodyStyle: 'padding:5px',autoHeight: false,autoWidth: false,autoScroll: true,loadMask : true,frame: true,// layout:'fit',width:480,height:180,labelAlign : 'right',buttonAlign :'center',items: [{xtype:'panel',layout:'table',buttonAlign:'center',layoutConfig: {// The total column count must be specified here columns: 4},items:[{xtype:'label',text:"商品:"},{colspan:3,items:[_merchcp],},{colspan:4,items:[{xtype : 'textfield',id : this.genId("pid"), name : 'pid',hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("id"), name : 'id',hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("corpcode"), name : 'corpcode', hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("corpid"), name : 'corpid', hidden:true}]}],buttons:[{//调用控件的方法2：调用封装控件searchgoodsbutton xtype:'searchgoodsbutton',id:this.genId('btn_exit'),icon:"image/exit.png",width:100,text:"商品控件1",windFn :this.fn_query,handler:this.btn_exit},{////调用控件的方法3：直接调用控件searchbuttonxtype:'searchbutton',id:this.genId('btn_exit'),//icon:"image/exit.png",windWidth : 600,windHeight : 400,text:"商品控件2",windItem : panel,windArray:panel.getArray,windFn :this.fn_query,handler:this.btn_exit}]}]});return mainform;}ff.cd.cd.showgoods.superclass.constructor.call(this, config); }Ext.extend(ff.cd.cd.showgoods, Ext.sydev.Sheet);---------------------------------------------------------------------------------------------------------------具体代码如下：代码里都有注释----------------------------------------------------showgoodsButton函数/*** 单位信息模式窗体查询** @return {}*/showgoodsButton=function(config) {/*** 这里传递的参数是用来接收调用该控件页面的配置信息的,* 所以名字不可以更改,并且页面调用的配置参数名称必须与这里保持一致* @param {Object} id* @return {TypeName}*/this.id=config.id;/*** 指定回调函数* @param {Object} id* @return {TypeName}*/this.fn=config.fn;/*** 调用指定回调函数,因为参数名与参数值不能相同(windFn : windFn 不可以),所以这样定义* @param {Object} id* @return {TypeName}*/this.windFn=config.windFn;if(this.windFn){fn=this.windFn;}if(id == undefined || id == null){id = Ext.id();}//var panel = doWindow;panel=new ff.cd.cd.cdgoods();return new Ext.custom.SearchButton({columnWidth: .7,xtype : "searchbutton",id : id,name:"corpname",width : 70,text:'商品控件',windItem : panel,windArray:panel.getArray,windWidth : 600,windHeight : 400,anchor : '90%',windFn : fn});}Ext.extend(showgoodsButton,Ext.custom.SearchButton);Ext.reg("searchgoodsbutton",showgoodsButton);------------------------------------------------------searchText.js//*** 需求:点击按钮,弹出一个窗口,选择记录,返回给前台这些数据,在弹出窗口中this.WindArray方法是必须的.* this.getGridValues是一个回调函数,用来与调用此窗口的页面进行交互* config:配置参数,接受调用此控件的对象传递过来的参数**function showgoodsButton(id,fn) {* if(id == undefined || id == null){* id = Ext.id();* }* var panel = new ff.cd.cd.cdgoods({typeAll : 'all'});* return new Ext.custom.SearchButton({* columnWidth: .7,* xtype : "searchbutton",* id : id,* name:"corpname",* width : 200,* windItem : panel,* windArray:panel.getArray,* windWidth : 600,* windHeight : 400,* anchor : '90%',* windFn : fn** });** }* 其他页面调用上面的过程,并传递一个fn方法进来,接受返回的数据*/Ext.ns("Ext.custom");Ext.custom.SearchButton = function(config){//定义按钮的显示样式this.triggerClass = 'x-form-search-trigger',this.defaultAutoCreate = {tag: "input", type: "button", size: "10", autocomplete: "off"},/***********************定义窗体的属性**************************//*** 窗体的宽* @type String*/this.windWidth = 200;/*** 窗体的高* @type String*/this.windHeight = 300;/*** 窗体的标题* @type String*/this.windTitle = null;/*** 是否把高设为自动* @type Boolean*/this.windAutoHeight = false;/*** 是否将宽设为自动* @type Boolean*/this.windAutoWidth = false;/*** 是否显示滚动条* @type Boolean*/this.windAutoScroll = true;/*** 传到window中的内容* @type Object*/this.windItem = null;/*** 从窗体上传过来的值* @type Object*/this.windArray = null;/*** 从窗体返回到文本框中的值，是否自定义格式,false:表示默认以逗号隔开,否则自定义格式并返回* @type Boolean*/this.isDefindValue = false;/**** @memberOf {TypeName}* @return {TypeName}*/this.windFn=null;/*******************定义属性**************************************//*** 只读属性*/this.readOnly = true;/*** 实际字段，也就说我们常说的隐藏值,一般由系统内部使用，或者用户输入的字段名称* @type:String*/this.valueField = null;/*** 显示字段，一般该字段值从系统里查出来并显示在控件里,用户易懂* @type String*/this.displayField = null;/*** 实际值* @type String*/this.values = null;/*** 显示值* @type String*/this.dispalyValue = null;/*** 根据valueField查出来的json数据保存在该字段里面* @type json*/this.jsonData = null;/**** @type 正则表达式*/this.regex = null;/*** 该类型为输入数据的类型，具体的参数如下：* 0-任意字符；1-数字；2-正数；3-负数；4-非0；5-字母；6-小写字母；7-大写字母；8：中文字；9：非中文字；其他。

Ext JS 是一个用于构建丰富交互式Web 应用程序的JavaScript 框架。

它提供了许多用于创建用户界面的工具和组件，例如表格、表单、按钮、滑块等。

以下是使用Ext JS 的一些基本步骤：1.引入Ext JS 库：首先，您需要在HTML 文件中引入Ext JS 库。

您可以从Ext JS官方网站下载库文件，并将其放置在您的Web 服务器上。

然后，在HTML 文件中使用<script>标签引入库文件。

html复制代码<script src="path/to/ext.js"></script>2.创建Ext JS 应用程序：使用Ext JS，您可以创建一个应用程序对象来管理整个应用程序的生命周期。

您可以使用Ext.create()方法创建一个应用程序对象。

javascript复制代码Ext.create('Ext.app.Application', {name: 'MyApp',launch: function() {// 在这里编写应用程序的启动代码}});3.创建组件：在Ext JS 中，您可以创建各种类型的组件，例如表格、表单、按钮等。

您可以使用Ext.create()方法创建一个组件对象，并指定组件类型和配置选项。

javascript复制代码Ext.create('Ext.button.Button', {text: 'Click me',renderTo: Ext.getBody(), // 将按钮渲染到页面中handler: function() {// 在这里编写按钮点击事件的代码}});4.配置组件：您可以设置组件的各种属性，例如大小、位置、样式等。

您可以在创建组件时使用配置选项来设置这些属性。

5.处理事件：在Ext JS 中，您可以处理各种事件，例如点击事件、键盘事件等。

第四章按钮、菜单和工具栏（2）Shortcuts（快捷方式）：Ext有很多shortcuts，使得编码变的更快了。

shortcuts就是一个或者连个字符组成的用来做显示控制的配置对象。

如下，十一哥标准的工具栏filler(就是之前的fill)配置：{xtype: ‘tbfill’}它的shortcuts就是“->”。

不是所有的快捷方式都能在文档中查到，你可以参看源码，找到你需要的。

这里列出几种常用的shortcuts：图标按钮：标准的图标按钮就是你在文本编辑器里看到的使字体加粗或者倾斜的那些按钮。

建立图标按钮需要两步——定义被用作图标的图片和适当的CSS类。

{xtype: 'tbbutton',cls: 'x-btn-icon',icon: 'images/bomb.png'}可以让图标和文字共存，只要调整CSS类并且让添加text配置项：{xtype: 'tbbutton',cls: 'x-btn-text-icon',icon: 'images/bomb.png',text: 'Tha Bomb'}按钮操作函数(handler)——点击我！按钮不仅需要好看而且还要能完成和用户的交互。

这就是操作函数(handler)为什么会被引入进来。

一个handler是一个在按钮被单击后调用的函数。

handler配置项就是我们加入自己函数的地方：{xtype: 'tbbutton',text: 'Button',handler: function(){Ext.Msg.alert('Boo', 'Here I am');}}这段代码会在按钮单击后弹出警告窗口。

有些时候，我们需要在单击后改变按钮的状态，所以每个按钮的handler都会传递按钮本身作为函数的参数。

Editor Grids（可编辑表格）在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。

但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。

幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。

它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。

在这章里，我们将会学到：∙为用户提供连接到data store的可编辑表格；∙把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据；∙通过编码操控grid并对事件做出相应；∙教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。

但是，首先，我们要看看可以用可编辑表格能够做什么事情。

我们能用可编辑表格做什么？EditorGridPanel和我们之前使用到的表单（form）很相似。

实际上，editor gird使用了和form中完全一样的表单字段。

通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。

包括输入约束以及数值验证等。

把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。

这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。

使用可编辑的表格：可编辑和不可编辑表格的区别十一个相当简单的开始的过程。

复杂的使我们需要处理编辑状态然后传回服务器。

但是一旦你学会了如何去做，这部分也就同样变得相当的简单。

让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。

修改后的代码如下所示：var title_edit = new Ext.form.TextField();var director_edit = new Ext.form.TextField({vtype: 'name'});var tagline_edit = new Ext.form.TextField({maxLength: 45});var grid = new Ext.grid.EditorGridPanel({renderTo: document.body,frame:true,title: 'Movie Database',height:200,width:520,clickstoEdit: 1,store: store,columns: [{header: "Title", dataIndex: 'title',editor: title_edit},{header: "Director", dataIndex: 'director',editor: director_edit},{header: "Released", dataIndex: 'released',renderer:Ext.util.Format.dateRenderer('m/d/Y')},{header: "Genre", dataIndex: 'genre',renderer: genre_name},{header: "Tagline", dataIndex: 'tagline',editor: tagline_edit}]});为了让grid可编辑，我们需要做四件事情。

如有你有帮助，请购买下载，谢谢！《ExtJS2.0 实用简明教程》之可编辑表格 EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由类，xtype 为 editorgrid。

使用 EditorGridPanel 与使用普通的 GridPanel 方式一样，区别只是在定义列信息的时候，可 以指定某一列使用的编辑即可，下面来看一个简单的示例。

Ext.onReady(function(){ var data=[{id:1, name:'小王', email:'', sex:'男', bornDate:'1991-4-4'}, {id:1, name:'小李', email:'', sex:'男', bornDate:'1992-5-6'}, {id:1, name:'小兰', email:'', sex:'女', bornDate:'1993-3-7'} ]; var store=new data:data, fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] }); var colM=new header:"姓名", dataIndex:"name", sortable:true, editor:new , {header:"性别", dataIndex:"sex" }, {header:"出生日期", dataIndex:"bornDate", width:120, renderer:, {header:"电子邮件", dataIndex:"email", sortable:true, editor:new ]);1页如有你有帮助，请购买下载，谢谢！var grid = new renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpandColumn:3 }); });上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个 JsonStore，在创建这个 store 的时候，指定 bornDate 列的类型为日期 date 类型，并使用 dateFormat 来指定日期信息的格式为"Y-n-j"， Y 代表年，n 代表月,j 代表日期。