extjs

1.导入ExtJs
  <link rel="stylesheet" href="../extjs/resources/css/ext-all.css" type="text/css"></link>
  <script type="text/javascript" src="../extjs/ext-base.js"></script>
  <script type="text/javascript" src="../extjs/ext-all.js"></script>
  <script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
2.javascript的prototype的功能为扩展类的功能
3.config的功能，例子：
  Student = function(config) {
      this.name = config.name;
      this.sex = config.sex;
  }
  var student = new Student({name:"",sex:""});
  等同于：
  Student = function(config) {
      Ext.apply(this.config);
  }
  这样一来config的参数既可以是json也可以是xml
  applyIf不会覆盖默认成员变量而apply则会覆盖默认成员变量
3.消息框
  a).提示框
    Ext.MessageBox.alert(title,msg,fn,scope);
    title:标题;msg:提示信息;fn:提示框关闭后自动调用的回调函数;scope:作用域，一般不会用到特殊情况下会用到
  b).输入框
    Ext.MessageBox.prompt(title,msg,fn,scope,Boolean/Number multiline)
    前面的参数通消息框，最后一个参数如果为true或数字则可一输入多行文本
  c).确认框
    Ext.MessageBox.confirm(title,msg,fn,scope)
  d).自定义消息框
    自定义消息框可以使用show()方法定义，语法：Ext.MessageBox.show(Object config) 其中config中的对象可以使用json格式进行参数传输，config中常用的属性有：title:消息框标题;msg:消息内容;width:消息框宽度;multiline:是否显示多行文本;closable:是否显示关闭按钮;buttons:按钮;icon:图标;fn:回调函数;其中buttons的取值有:OK:只有“确定”按钮;CANCEL:只有“取消”按钮;OKCANCEL:有“确定”和“取消”按钮;YESNOCANCEL:有“是”、“否”和“取消”按钮 icons取值有:INFO:信息图标;WARNING:警告图标;QUESTION:询问图标;ERROR:错误图标
  e).让消息框飞出
    实现此方法即在自定义消息对话框的时候配置animEl:"fly"即可，同时页面按钮的id为fly
4.给页面元素附方法 Ext.get("元素id").on("元素动作",fn)
5.获取也面元素的传统访问 Element.dom 例如获取文本框的值:Ext.get("文本框id").dom.value
6.applyStyles:定义元素的样式
  a).slideIn:飞入
  b).slideOut:飞出
  c).highlight:颜色渐变
  d).frame(color,count,options)
    展示一个展开的波纹，color:波纹的颜色 count:波纹的个数 options:选项配置一般配置时间
7.Ext.Element中的动画函数，即在获取页面元素之后进行动画操作，方法有：
  a).setWidth(width,Boolean/Object animate):设置元素宽度，并且是否以动画显示出来
  b).setHight(hight,Boolean/Object animate):设置元素高度，并且是否以动画显示出来
  c).setSize(width,hight,Boolean/Object animate):同时设置元素宽带和高度，并且是否以动画显示
  d).setBounds(x,y,width,hight,animate):设置元素的位置和大小（皆为新值），并且是否以动画显示
  e).show(animate):显示元素
  f).hide(animate):隐藏元素
8.Ext.DomHelper类，此类帮助我们使用javascript清晰的生成HTML代码，使用非常灵活。
  a).insertHtml(where,el,html):在指定的元素上插入HTML片段。where:查到哪里？可选值有：beforeBegin,afterBengin,beforeEnd,afterEnd等 el:参照元素 html:插件的内容
9.格式化类:Ext.util.Format
  a).ellipsis(value,length):返回String，表示对大于指定长度部分的字符串进行裁剪并且将超出部分以省略号显示
  b).undef(Mixed value)转换Mixed值，如果Mixed的值为underfined则会将值转换为空值之后返回，否则则返回原值
  c).defaultValue(Mixed value,String defaultValue)检查value的引用值是否为空如果为空引用的话则转换成默认值，此处的默认值默认为空值
  d).htmlEncode(value):转义符(&,<,>,')为能在HTML中显示的字符
  e).htmlDecode(value):将上方转换后的字符串还原
  f).substr(value,start,length):将字符串从指定位置截取指定长度并且返回
  g).lowercase(value):将字符串中的字母全部变为小写字母
  h).uppercase(value):将字符串中的字母全部变为大写字母
  i).data(Mixed value,[String format])返回日期Function
    例：var str = new Date();Ext.Msg.alert("date",Ext.util.Fromat.date(v7,"Y-m-d H:i:s"));
  j).stripTags(Mixed value):返回String，目的为剥去所有的HTML标签
  k).stripScripts(Mixed value):剥去所有脚本（Script）标签
10.赋值，典型用法
  实例：var x = new Ext.XTemplate("aaa:{sex:this.sexRender}"); x.setRender = function(value){return String;} x.append("xt2",{sex:""}); xt2.compile();
11.创建组建
  a).创建按钮
    语法：var btn = new Ext.Button({renderTo:放置的位置,text:名字,handler:按钮事件,xtype:其他配置});xtype的属性有，pressed:true:使按钮处于按下状态 disabled:true 使按钮处理禁用状态 minWidth:100 设置按钮的最小宽度 icon:"../***.gif" 设置按钮的背景图片，属性值是图片的名称 iconCls:"bk" 属性值是类选择器名称
  b).时间选择器
    定义：Ext.DatePicker,获得用户选择的日期为getValue(),其中属性：minDate:最小日期 maxDate:最大日期 value:日期控件显示后的初始值
12.Ext.data类
  说明：这个类的作用是 获取和组织数据结构，并和特定控件联系起来
  data类中有三个函数分别是：DataProxy、DataReader、Store
    DataProxy:主要用来获取数据，数据可以来自服务器、数组等并且将这些数据组织成不同的格式
    DataReader:定义数据项逻辑结构，比如一个数据项有很多列，分别是什么数据类型，都是该类来做，并且负责对数据进行读取和解析。
    Store:存储器，用于整合Proxy和Reader，空间索取数据是需要使用到它
    a).DataProxy类 包含：
      MemoryProxy:获取来自内存的数据，可以是数组、json或者xml
      HttpProxy:使用HTTP协议通过ajax从远程服务器获取数据，需要指定url
      ScriptTagProxy:功能和HttpProxy一样，不过它支持跨域获取数据，实现时不是很正规
    b).DataReader类，此类从不单独出现，总体来说DataReader用来定义数据项（行）的逻辑结构，其中有 列的逻辑名称(name)、列的数据类型(type)、列与数据的索引映射(mapping)等，它还包括分页信息 与它配合出现的有Ext.data.Record类的create方法来进行固定结构，语法为：var v = Ext.data.Record.create(Json对象);
      DataReader类 包含：
      Ext.data.ArrayReader:对数组进行读取
      Ext.data.JsonReader:对json进行读取
      Ext.data.XmlReader:对XML进行读取
    C).Store类 它只是把DataProxy和DataReader整合在一起 如果需要即时加载的话配置选项 autoLoad:true 否则则需要执行load()方法
13.下拉列表框
  语法 var combobox = new Ext.form.ComboBox({renderTo:***,triggerAction:"all",store:store,displayField:"cid",mode:"local",emptyText:"提示信息"});
其中 triggerAction：是否开启自动查询功能，为all表示不开启，为query表示开启，默认为query store：和data.store进行关联 displayField：关联Record的某一个逻辑列名作为显示值 valueField：关联Record的某一个逻辑列名作为实际值 mode：表示数据来自于哪里，local表示来自本地，如果数据来自远程服务器必须用remote，默认为remote emptyText：没有选择任何选项的情况下文本框中的默认文字。
  a).获取下拉列表的值
    getValue()用于获得实际值，getRawValue()用于获得显示值
14.Ajax应用
  用法 Ext.Ajax.request({
    url:"",//ajax请求的地址，可以是一个servlet，也可以是一个action
    success:function(response,config){
      var json = Ext.util.JSON.decode(response.responseText);//将返回的值转换为json
    },
    failure:function(){ Ext.MessageBox.alert("result","请求失败")},//当请求失败后运行的方法
    method:"post",//请求的方式
    params"{name:"李赞红"}//请求的参数，可以是一个json对线
  });
15.上传文件
  一般分为三个步骤：1、创建文件上传表单；2、调用Ext.Ajax.request()方法实现文件上传；3、定义文件上传处理器，并结合开源的文件上传组件（如cos），将数据流转换成文件和参数
16.面板Ext.Panel类
  一个完整的Panel包括标题栏、顶部工具栏、底部工具栏、footer和主面板区域组成。其中 footer一般放置诸如“确定”或“取消”之类的按钮
17.Window窗口
  Window是Panel的子类，Ext.Window = Ext.extend(Ext.Panel,{}),即Window继承了Panel
  拥有两种类型：模式窗口、非模式窗口（默认）
  为Window窗口添加最大化和最小化按钮，即通过maximizable和minimizable来指定（其中最大化已经被设置，最小化需要自己进行定义），如果点击关闭按钮关闭后只是隐藏的话需要将closeAction设置为hide，如果需要彻底释放掉内存的话，closeAction必须为close，close同时也是默认的设置
18.FormPanel类：表单类=>Ext.form.FormPanel，此类提供了同意的界面，但是对表单的操作需要用到Ext.form.BasicForm类
  Ext.form.BasicForm = Ext.form.FormPanel.getForm()
    a).提交表单 代码如下：f.fetForm().submit({ success:function(f,action){//成功会到这里},failure:function(){//失败会到这里} });
    b).悬停提示与验证，Ext支持五种悬停提示，分别为qtip、side、under、title、around:qtip是默认支持方式，定义方式：Ext.form.MessageTarg由此类定义 启动悬停提示：Ext.QuickTips.init();
    c).表单验证 表单验证的属性 validationEvent：什么时间发生时触发验证，默认为keyup，如果将该属性设置为false，则无论如何都不会触发验证事件 validateOnBlur：在组件失去焦点后是否进行验证，默认为true
      i.非控制验证 配置allowBlank为false即可
        正则表达式-至少要6个字符:/^\w{6,}$/ var alpha = /^[a-zA-Z_]+$/;字母和下划线 var alphanum = /^[a-zA-Z0-9_]+$/;字母、数字和下划线 var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;邮箱验证 var url = /(((https?)|(ftp)):W([\-\w]+\.)+\w{2,3}(V[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*V?)/i;网址验证
19.布局与初始化 FormPanel拥有两种布局：form和column，form是纵向布局，column是横向布局默认为横向布局，如不适用默认布局，就必须为每一个元素指定一种布局方式，注意的是：落实到任何一个表单组件后，最后总是form布局 defaultType属性不一定起作用，必须显示为每一个表单组件指定xtype后new出新的对象 在column布局中，通过columnWidth可以指定列所占宽度的百分比，比如50%宽度为.5
  a).分割 结构定义:{layout:"column",items:[{},{}]} layout表示布局方式 column-横向，form-纵向
  b).FormPanel通常支持两种初始化表单组件的方法：笨的初始化：创建二维数据或json对象，使用Ext.form.FormBasicForm的setValues()方法填充 远程初始化：从远程服务器获取json对象数组，通过Ext.form.FormPanel的load()方法填充
  c).表格Ext.grid.GridPanel 表格分为：表头、数据行和分页栏 其中，表头我表格列提供一系列信息，包含列的说明、列的宽度、是否可以改变列的大小、是否排序、是否出现菜单等数据它由Ext.grid.ColumnModel定义，列模型也会触发相应的事件
    i.第一步创造列模型：var cm = new Ext.grid.ColumnModel();//封装json格式的数据表示为列
      第二步构造proxy，然后reader最后store
    ii.表格增强 回调函数renderer 定义:renderer:function(value,metadata,record,rowIndex,colIndex,store){} 其中:value 原始值 metadata 可能的值为css或attr record Ext.data.Record GridPanal的记录结构定义 rowIndex 行引索 colIndex 列引索 store 数据源
    iii.日期格式化 直接用henderer进行格式化日期 用法:renderer:Ext.util.Format.dateRenderer("Y-m-d")
    iiii.为表格显示行号 new Ext.grid.RowNumberer()
    iiiii.js中在表格中添加超链接 "<span style='margin-right:10px'><a href='#'>修改</a></span><span><a href='#'>删除</a></span>"
  d).对表格的一些操作 为表格添加复选框:var sm = new Ext.grid.CheckboxSelectionModel();
    i.Ext.grid.GridView 中常用的方法 getRows():返回所有的行，回去的行只能通过dom进行访问它的属性 getRow(row):返回指定的行，同样只能通过dom进行访问 getCell(row,col):返回第row行第col列的单元格，同样只能使用dom进行访问 refresh(headersToo):刷新，如果为true，则表头也一起刷新
    ii.获取数据 var view = grid.getView();var rsm = grid.getSelectionModel(); for(var i=0;i<view.getRows().length;i++){if(rsm.isSelected(i)){r += grid.getStore().getAt(i).get("name");}}
    iii.增加新行 需用到Ext.data.Store中的add(records)和insert(index,records) 其中 add(records):将记录添加到行尾，可以一次添加多行，records为Ext.data.Record[]类型的参数 insert(index,records):将记录添加到指定引索出，可以添加多行，records为Ext.data.Record[]类型的参数
    iiii.删除行 思路为：循环遍历所有行 判断当前行是否被选中 删除选中的行 使用的方法为Ext.data.Store中的remove(record):删除指定的记录，record参数为Ext.data.Record类型对象 删除所有行用removeAll()方法
    iiiii.分页 使用Ext.PagingToolbar 来创建分页底部工具栏