Ext.js高级组件

Ext.define(&#ller.Users', {extend: 'Ext.app.Controller',init:function(){l({  //控制事件等'userlist button[id=delete]':{click:function(o){var gird = o.ownerCt.ownerCt;var data = SelectionModel().getSelection();if(data.length == 0){Ext.Msg.alert("提示","请选择数据");}else{根据name得到数据var st = Store();   //获取数据集var ids = []; //存储被选中数据的name集合Ext.Array.each(data,function(record){ids.('name'));})后台操作(delete)、前端操作DOM进行删除(ExtJs)quest({url:'/extjs/extjs!deleteData.action',params:{ids:ids.join(",")}, //指定要删除数据的name集合method:'POST',timeout:2000,   //设定响应等待时间success:function(response,opts){Ext.Array.each(data,function(record){st.remove(record);  //从store中删除该条记录})}})}}},"userlist actioncolumn[id=delete]":{click : function(o,item,rowIndex,colIndex ,e){alert(rowIndex+" "+colIndex);}}});},views:['List'],stores :["Users"],models :["User"] 
});

Ext.define("AM.view.List",{extend:&#id.Panel',title : 'Grid Demo',alias: 'widget.userlist',frame : true,   //面板渲染width : 600,height: 280,columns : [ //列模式ate(&#id.RowNumberer",{}),{text:"Name",dataIndex:'name',width:100},{text:"age",dataIndex:'age',width:100},{text:"email",dataIndex:'email',width:200,field:{xtype:'textfield',allowBlank:false}},{text:'sex',dataIndex:'sex',width:50,DDName:'sy_sex',renderer:function(value){if(value){if(value == "女"){return "<font color='green'>"+value+"</font>"}else if(value == "男"){return "<font color='red'>"+value+"</font>"}}}},{text:'isIt',dataIndex:'isIt',xtype : "booleancolumn",width:50,trueText:'是',falseText:'不是'},{text:'birthday',dataIndex:'birthday',xtype : "datecolumn",width:150,format:'Y年m月d日'},{text:'deposit',dataIndex:'deposit',xtype:'numbercolumn',width:150,format:'0,000'},{text:'描述',xtype:'templatecolumn',tpl:'姓名是{name} 年龄是{age}',width:150},{text:'Action',xtype:'actioncolumn',id:'delete',icon:'app/view/image/table_delete.png',width:50}],tbar :[{xtype:'button',text:'添加',iconCls:'table_add'},{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},{xtype:'button',text:'修改',iconCls:'table_edit'},{xtype:'button',text:'查看',iconCls:'table_comm'}],  dockedItems :[{xtype:'pagingtoolbar',store:'Users',dock:'bottom',displayInfo:true}],plugins:[ate(&#id.plugin.CellEditing",{clicksToEdit : 2    //单击时会报错（ext.js的bug）})],selType:'checkboxmodel',    //设定选择模式multiSelect:true,           store : 'Users',initComponent:function(){   //初始化组件，进行渲染this.callParent(arguments);}
});

Ext.define(&#del.User', {extend: 'Ext.data.Model',fields: [{name: 'name',  type: 'string',sortable : true},{name: 'age',   type: 'int',sortable : true},{name: 'email',   type: 'string',sortable : true},{name: 'birthday',   type: 'string',sortable : true},{name: 'deposit',   type: 'int',sortable : true},{name: 'isIt',   type: 'string',sortable : true},{name: 'sex',   type: 'string',sortable : true}]
});

grid选择模式

• 根类
  • Ext.selection.Model
• 重要方法
  • 撤销选择 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
  • 得到选择的数据getSelection( ) : Array
  • 得到最后被选择的数据getLastSelected( ) : void
  • 判断指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
  • 选择指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
  • keepExisting true保持已选则的,false重新选择
• 隐藏了一个单元格的选择模式
  • selType: ‘cellmodel’
    • 从这发现的id.plugin.CellEditing
  • 重要方法
    • 得到被选择的单元格getCurrentPosition() Object
    • de()
    • itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
    • selectByPosition({“row”:5,”column”:6})
      • 很实用，选择要特殊处理的数据
• 多选框选择器Ext.selection.CheckboxModel
  • 重要方法
    • Ext.selection.RowModel
      • rowmodel 行选择器
  • 重要属性
    • multiSelect 允许多选
    • simpleSelect 单选选择功能
    • enableKeyNav 允许使用键盘

Grid特性

• 表格的行体id.feature.RowBody

  • 重要方法
    • getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
      • 如果要展示这个面板那么必须复写这个方法
        

        features: [ate(&#id.feature.RowBody",{getAdditionalData:function(data,idx,record,orig){ ...... }})
        ],  
        

      • 必须返回行体的对象
        

        var headerCt = this.view.headerCt,colspan  = ColumnCount();
        return {rowBody: "",rowBodyCls: wBodyCls,rowBodyColspan: colspan
        };
        

• • 第一步 
    

    features: [{ftype: 'summary'
    }],
    

  • 第二步
    • columns中配置summaryType: ‘count’, (count,sum,min,max,average)
      

      summaryRenderer: function(value, summaryData, dataIndex) {return Ext.String.format(' : '+value); 
      }    
      

• • 在store中设置可以分组的属性
    • groupField : ‘’
  • 在view中增加代码
    

  • 重要事件
    • groupclick
    • groupdblclick
    • groupcontextmenu
    • groupexpand
    • groupcollapse

• 扩展

• 代码

  • app.js
    

  • controller/Users.js
    

    Ext.define(&#ller.Users', {extend: 'Ext.app.Controller',init:function(){l({'userlist':{itemclick:function(View,  record,  item,  index,  e,  options ){var sm = SelectionModel();//.getSelection();                    //alert(CurrentPosition()));sm.selectByPosition({"row":1,"column":2});}},'userlist button[id=selection]':{click:function(o){var gird = o.ownerCt.ownerCt;var sm = SelectionModel();//sm.deselect(0);//LastSelected().get('name'))//alert(sm.isSelected(0));//sm.selectRange(1,2,true);sm.selectByPosition({"row":2,"column":3});}},'userlist button[id=del]':{click:function(o){var gird = o.ownerCt.ownerCt;var data = SelectionModel().getSelection();if(data.length == 0){Ext.Msg.alert("提示","您最少要选择一条数据");}else{//1.先得到ID的数据(name)var st = Store();var ids = [];Ext.Array.each(data,function(record){ids.('name'));})//2.后台操作(delet)quest({url:'/extjs/extjs!deleteData.action',params:{ids:ids.join(",")},method:'POST',timeout:2000,success:function(response,opts){Ext.Array.each(data,function(record){st.remove(record);})}})//3.前端操作DOM进行删除(ExtJs)}}},"userlist actioncolumn[id=delete]":{click : function(o,item,rowIndex,colIndex ,e){alert(rowIndex+" "+colIndex);}}});},views:['List'],stores :["Users"],models :["User"] 
    });
    

  • model/User.js
    

    Ext.define(&#del.User', {extend: 'Ext.data.Model',fields: [{name: 'name',  type: 'string',sortable : true},{name: 'age',   type: 'int',sortable : true},{name: 'email',   type: 'string',sortable : true},{name: 'birthday',   type: 'string',sortable : true},{name: 'deposit',   type: 'int',sortable : true},{name: 'isIt',   type: 'string',sortable : true},{name: 'sex',   type: 'string',sortable : true}]
    });
    

  • store/Users.js
    

    Ext.define('AM.store.Users', {extend: 'Ext.data.Store',model: &#del.User',storeId: 's_user',groupField : 'sex',proxy:{type:'ajax',url:'/extjs/extjs!getUserList.action',reader: {type: 'json',root: 'topics'},writer:{type:'json'}},autoLoad: true //
    });
    

  • view/List.js
    

    Ext.define("AM.view.List",{extend:&#id.Panel',title : 'Grid Demo',//标题alias: 'widget.userlist',frame : true,//面板渲染width : 1100,height: 450,features: [ate(&#id.feature.RowBody",{getAdditionalData: function(data, idx, record, orig) {var headerCt = this.view.headerCt,colspan  = ColumnCount();return {rowBody: ('email'),rowBodyCls: wBodyCls,rowBodyColspan: colspan};}}),{ftype: 'summary'},ate(&#id.feature.Grouping",{groupByText : "性别分组",groupHeaderTpl : "性别{name}  一共{rows.length}人",showGroupsText : "展示分组"})],  columns : [ //列模式ate(&#id.RowNumberer",{}),{text:"Name",dataIndex:'name',width:100},{text:"age",dataIndex:'age',width:100,summaryType:'average',summaryRenderer: function(value, summaryData, dataIndex) {return Ext.util.Format.number(value,"00.0")}   },{text:"email",dataIndex:'email',width:200,field:{xtype:'textfield',allowBlank:false}},{text:'sex',dataIndex:'sex',width:50,DDName:'sy_sex',renderer:function(value){if(value){if(value == "女"){return "<font color='green'>"+value+"</font>"}else if(value == "男"){return "<font color='red'>"+value+"</font>"}}}},{text:'isIt',dataIndex:'isIt',xtype : "booleancolumn",width:50,trueText:'是',falseText:'不是'},{text:'birthday',dataIndex:'birthday',xtype : "datecolumn",width:150,format:'Y年m月d日'},{text:'deposit',dataIndex:'deposit',xtype:'numbercolumn',width:150,format:'0,000'},{text:'描述',xtype:'templatecolumn',tpl:'姓名是{name} 年龄是{age}',width:150},{text:'Action',xtype:'actioncolumn',id:'delete',icon:'app/view/image/table_delete.png',width:50//,
    //               items :[
    //                  {},{}
    //               ]
    //               handler:function(grid,row,col){
    //                  alert(row+" "+col);
    //               }}],tbar :[{xtype:'button',text:'添加',iconCls:'table_add'},{xtype:'button',id:'del',text:'删除',iconCls:'table_remove'},{xtype:'button',text:'修改',iconCls:'table_edit'},{xtype:'button',text:'查看',iconCls:'table_comm'},{xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}],  dockedItems :[{xtype:'pagingtoolbar',store:'Users',dock:'bottom',displayInfo:true}],plugins:[ate(&#id.plugin.CellEditing",{clicksToEdit : 2})],//selType:'rowmodel',//设定选择模式selType:'cellmodel',//multiSelect:true,//运行多选//enableKeyNav :true,store : 'Users',initComponent:function(){this.callParent(arguments);}
    });
    

grid插件

• 可编辑插件
  • 根类id.plugin.Editing
  • 保存修改的两种办法
    • 设立保存按钮,用户单击的时候保存数据
      

      st.sync();
      var records = st.getUpdatedRecords();
      Ext.Array.each(records,function(model){modelmit();
      }); 
      

    • 注册edit事件
• 4.0.1a版本不推荐这个功能
  

dockedItems: [{xtype: 'pagingtoolbar',store: store,dock: 'bottom',displayInfo: true
}],

tree组件

• 类结构
  • Ext.panel.Panel
    • Ext.panel.Table
      • 和grid完全一样

listeners: {drop: function(node, data, dropRec, dropPosition) {},beforedrop:function(node,data,overModel,dropPosition,dropFunction,options ){ }
}  

tree+grid 部门管理案例

• 简单布局应用
  • border布局、tab布局、fit布局
• 表格的操作
  • 列表的CRUD
  • 控制树形节点的CRUD
• 树形的操作
  • 自身的一些功能
  • 过滤grid的数据
• 制作流程
  • 整体框架搭建
  • 表格视图搭建
  • 表格CRUD
  • 树形视图搭建
  • 树形功能实现
  • tree和grid整合
• 完善
  • 公共函数的抽取
  • 完成保存操作
  • 完成批量删除操作
  • 进一步完善添加操作
  • 解决网友提出后台一个pojo前台就要写一个model的问题(缓存,工厂,Ajax)
  • 树形过滤表格(伪代码和思路)
• 代码
  • app.js
    

  • controller/DeptController.js
    

    /*** ClassName 部门管理控制器*/
    Ext.define(&#ller.DeptController",{extend:'Ext.app.Controller',ate("AM.util.GridDoActionUtil"),init: function(){GridObj = function(buttion){return buttion.ownerCt.ownerCt;};TreeObj = function(buttion){return  buttion.ownerCt.ownerCt.ownerCt.ownerCt.child('#west-tree').child("#dept-tree");};l({'depTree':{itemclick:function(tree,record,item,e,opti){/*** 1.得到单击节点的ID* 2.发到后台重新查询数据load表盒 where id="A0"* 3.oracle 那就用递归查询* .htm*///("id"))/*** 1.得到节点ID和子节点的ID* 2.发到后台重新查询数据load表盒 where id in ("A0","A01010");*/llapse(function(){return true;},function(node){console.log(node);})//grid.load({whereSql:'in ('A0')'})}},'deptlist button[id=delete]':{click:function(deleteButton){var grid  = GridObj(deleteButton);var tree = TreeObj(deleteButton);this.GridDoActionUtil.doDelete(grid,tree);}},//第二讲中修改'deptlist button[id=save]':{click:function(saveButton){var grid  = GridObj(saveButton);var tree = TreeObj(saveButton);this.GridDoActionUtil.doSave(grid,tree);}},//设定列表添加按钮的事件'deptlist button[id=add]':{click:function(addButton){//得到数据表格的对象var grid  = GridObj(addButton);var modelObj = {text: '',id: 'A01',info :'',orderIndex:0,manager:'',nodeType:'ROOT',leaf : true};//得到treevar tree = TreeObj(addButton);this.GridDoActionUtil.doInsert(grid,modelObj,tree);}}})},views:['DeptTree','DeptList','MainLayout'],stores:['DeptStore4Tree','DeptStore'],models:[//'DeptModel']
    });
    

  • model/DeptModel.js(停用)
    

    /*** ClassName 部门的实体* text : 部门的名称* id : id主键* info : 信息* orderIndex : 排序字段* manager : 部门的经理* nodeType : 节点类型* leaf :  是否叶子*/
    Ext.define(&#del.DeptModel",{extend:'Ext.data.Model',fields:[{name:'text',type:'string'},{name:'id',type:'string'},{name:'info',type:'string'},{name:'orderIndex',type:'int'},{name:'manager',type:'string'},{name:'nodeType',type:'string'},{name:'leaf',type:'string'}]
    });
    

  • store/DeptStore.js
    

    /*** ClassName 部门实体数据集*/
    Ext.define("AM.store.DeptStore",{extend:'Ext.data.Store',//model:&#del.DeptModel',model : ModelByName(&#del.DeptModel"),proxy:{api:{update:'/extjs/extjs!updateDeptList.action',remove:'/extjs/extjs!updateDeptList.action'},type:'ajax',url:'/extjs/extjs!readDeptForGrid.action',reader:{type:'json',root:'topics'},writer:{type:'json'}},autoLoad:true
    });
    

  • store/DeptStore4Tree.js
    

    Ext.define("AM.store.DeptStore4Tree",{extend:'Ext.data.TreeStore',defaultRootId : 'root',proxy:{type:'ajax',url:'/extjs/extjs!readDeptTree.action',reader:'json'}
    });
    

  • view/DeptList.js
    

    /*** ClassName 部门管理数据列表视图*/
    Ext.define("AM.view.DeptList",{extend:&#id.Panel',alias:'widget.deptlist',store:'DeptStore',width:540,height:400,selModel:{selType:'checkboxmodel'},border:0,multiSelect: true,frame:true,tbar:[{xtype:'button',text:'添加',id:'add',iconCls:'table_add'},{xtype:'button',text:'删除',id:'delete',iconCls:'table_remove'},{xtype:'button',text:'保存',id:'save',iconCls:'table_save'}],dockedItems:[{xtype:'pagingtoolbar',store:'DeptStore',dock:'bottom',displayInfo:true}],enableKeyNav:true,columnLines: true,columns:[{text:'部门名称',dataIndex:'text',width:100,field:{xtype:'textfield',allowBlank:false}},{text:'部门经理',dataIndex:'manager',width:100,field:{xtype:'textfield',allowBlank:false}       },{text:'顺序排序',dataIndex:'orderIndex',width:100},{text:'只能简介',dataIndex:'info',width:100}],initComponent:function(){this.editing = ate(&#id.plugin.CellEditing");this.plugins = [this.editing];this.callParent(arguments)}
    });
    

  • view/DeptTree.js
    

    Ext.define("AM.view.DeptTree",{extend:&#Panel',alias:'widget.depTree',rootVisible:false,//不展示ROOTdisplayField:'text',animate:false,store:'DeptStore4Tree'
    })
    

  • view/MainLayout.js
    

    Ext.define("AM.view.MainLayout",{extend:'Ext.panel.Panel',alias:'widget.mainlayout',defaults:{split:true,bodyStyle:'padding:1px'},layout:'border',items:[{title:'部门树形',region:'west',iconCls:'dept_tree',xtype:'panel',margins:'5 2 5 5',width: 200,collapsible:true,//可以被折叠id:'west-tree',layout:'fit',items:[{xtype:'depTree',id:'dept-tree'}]},{title:'部门数据表格',iconCls:'dept_table',region:'center',xtype:'panel',id:'center-grid',margins:'5 5 5 0',layout:'fit',items:[{id:'dept-grid',xtype:'deptlist'}]}]
    });
    

  • comm/ModelFactory.js
    

    /*** 工厂类*/
    Ext.define(&#delFactory",{//数据类模型的集合models:new Ext.util.MixedCollection(),//字段集合fields:new Ext.util.MixedCollection(),getModelByName:function(modelName){//1.声明类,返回类的ainsKey(modelName)){return modelName;}else{//ajax拿到我们的字段集合var fields = [];if(ainsKey(modelName)){fields = ainsKey(modelName)}else{quest({url:'/extjs/extjs!getModelFields.action?modelName='+modelName,method:'POST',timeout:4000,async:false,//跟关键 我不需要异步操作success:function(response,opts){fields = sponseText);}});}this.fields.add(modelName,fields);var newModel = Ext.define(modelName,{extend:'Ext.data.Model',fields:fields});dels.add(modelName,newModel);return modelName;}}
    });
    var modelFactory = ate(&#delFactory',{});
    

  • util/GridDoActionUtilview.js
    

    Ext.define("AM.util.GridDoActionUtil",{doDelete:function(grid,treeObj){if(!grid){alert("参数传递不正确");return;}//得到数据集合var store = Store(); var records = SelectionModel().getSelection();var data = [];Ext.Array.each(records,function(model){data.push(('id')));});     if(data.length > 0){quest({Proxy().api['remove'],params:{data:"["+data.join(",")+"]"},method:'POST',timeout:4000,success:function(response,opts){Ext.Array.each(records,function(model){//tree删除节点var node = Store().('id'));var parentNode = node.parentNode;ve(true);if(parentNode){if(!ChildAt(0)){parentNode.data['leaf'] = true;parentNode.updateInfo();}}}catch(e){console.log(e);}//表格删除数据ve(model);                        })}})}},/*** 列表的批量修改* @param {} grid* @param {} treeObj*/doSave:function(grid,treeObj){if(!grid){alert("参数传递不正确");return;}   //得到数据集合var store = Store();//records 被你修改过的数据var records = UpdatedRecords();var data = [];Ext.Array.each(records,function(model){data.push(de(model.data));});//异步的操作数据
    //      Proxy().update(new Ext.data.Operation({
    //          action:'update'
    //      }));if(data.length > 0){quest({Proxy().api['update'],params:{data:"["+data.join(",")+"]"},method:'POST',timeout:4000,success:function(response,opts){console.sponseText);Ext.Array.each(records,function(model){var node = Store().('id'));node.data['text'] = ('text');node.updateInfo();//取消小箭头modelmit();});}});}},/*** 树形维护表格的插入操作* @param {} grid* @param {} modelObj* @param {} treeObj*/doInsert:function(grid,modelObj,treeObj){if(!(grid && modelObj)){alert("参数传递不正确");return;}//得到表格数据集合var store = Store();//得到目前表格的数据集合长度var storeCount = Count();//得到编辑插件var edit = grid.editing;//得到数据模型var model = del;if(storeCount == 0){//证明添加的节点是ROOT//初始化一个模型的类var deptObj = new model(modelObj);edit.cancelEdit();//取消其他插件的编辑活动store.insert(0,deptObj);edit.startEditByPosition({row:0,column:1});if(treeObj){//我们需要树形操作var rootNode = Store().getRootNode();rootNode.appendChild({id:modelObj["id"],text:modelObj["text"],leaf:modelObj["leaf"]});}}else{//得到被选择的数据集合var checkedRecords = SelectionModel().getSelection();if(checkedRecords.length == 1){var parentRecord = checkedRecords[0];modelObj['nodeType'] = 'GENERAL';//第二讲中改********************************modelObj['id'] = 'A010101';//得到父节点var parentNode = Store().('id'));try{parentNode.data['leaf'] = false;parentNode.updateInfo();//给它加一个孩子节点parentNode.appendChild({id:"A010101",text:'',leaf:true}); pand();}catch(e){}edit.cancelEdit();//取消其他插件的编辑活动var deptObj = new model(modelObj);store.insert(0,deptObj);edit.startEditByPosition({row:0,column:1});}else{alert("请选择1个父级部门,您现在选择的是["+checkedRecords.length+"]个");}}}
    });
    

  • resources/css/dept.css
    

    .dept_table{background-image: url(/Learning-extjs4.0/lesson/18/resources/img/dept_table.png) !important;
    }
    .dept_tree{background-image: url(/Learning-extjs4.0/lesson/18/resources/img/dept_tree.png) !important;
    }
    .table_remove{background-image: url(/Learning-extjs4.0/lesson/18/resources/img/table_remove.gif) !important;
    }
    .table_add{background-image: url(/Learning-extjs4.0/lesson/18/resources/img/table_add.png) !important;
    }
    .table_save{background-image: url(/Learning-extjs4.0/lesson/18/resources/img/tabel_save.png) !important;
    }
    

form组件

• 根类 Ext.form.Basic
  • 提供了表单组件,字段管理,数据验证,表单提交,数据加载的功能
• 表单的容器 Ext.form.Panel
  • 容器自动关联Ext.form.Basic的实例对象更方便的进行字段的配置
  • 重要属性
    • defaultType:”” 设置默认子项 的xtype
• 数据交互和加载
  • Ext.form.action.Action
    • Ext.form.action.Submit ajax方式提交
      • Ext.form.action.StandardSubmit 原始表单提交方法
    • Ext.form.action.DirectLoad
      • Ext.form.action.DirectSubmit 指令式的模式
• 字段的控制
  • Ext.form.field.Base 是跟类
    • 混入了类 [Ext.form.field.Field]得到表单值的处理功能
    • 混入了类[Ext.form.Labelable]得到表单标签错误信息提示的功能
    • Ext.form.field.Text 文本框方式的
      • Ext.form.field.TextArea
      • Ext.form.field.Trigger 触发器
        • Ext.form.field.Picker 选择器
          • Ext.form.field.Time
          • Ext.form.field.Date
          • Ext.form.field.Number
          • Ext.form.field.File 文件上传的
          • Ext.form.field.ComboBox 选择框
    • Ext.form.field.Checkbox 选择框方式的
      • Ext.form.field.Radio 单选框
    • Ext.form.field.Hidden 特殊的-隐藏字段
  • Ext.form.field.HtmlEditor 特殊的-文本编辑框
• 其中夹杂布局的类
  • Ext.form.FieldContainer
    • Ext.form.CheckboxGroup
      • Ext.form.RadioGroup
  • Ext.form.Label
    • Ext.form.Labelable
  • Ext.form.FieldSet
  • Ext.form.FieldContainer
• 实例讲解
  • Ext.form.Panel
    • 重要的配置项
      • title:’‘,bodyStyle:’‘,frame : ,height: ,width :,
      • renderTo:’‘,defaultType:’‘,defaults:{}
    • 由于混入了Ext.form.Labelable，可以配置
      • labelSeparator 字段名字和值的分割符号、labelWidth 标签宽度
  • Ext.form.field.Text 文本框(xtype: textfield)
    • 重要的配置项
      • width : 150,allowBlank: false, //不能是空
      • labelAlign :’left’,msgTarget:’side’//在字段的右面展示数据
  • Ext.form.field.TextArea
    • getValues()用法
• 代码
  
  • 数字框
  • CheckBox,radio
  • CheckGroup,RadioGroup
  • Trigger 触发器字段
    • 他指派了一个没有任何动作的接触按钮,需要给他加上不同的动作
• TextArea.js
  

• number.js
  

• checkbox.js
  

• checkboxgroup.js
  

• Trigger.js
  
  • comboBox组件
    • Ext.form.field.ComboBox
    • Ext.view.BoundList 约束列表
    • 本地下拉框
    • Time
    • Date
• combobox.js
  

• date.js
  

• synccombobox.js
  

• time.js
  
  • Ext.form.field.Hidden
  • Ext.form.field.HtmlEditor
  • Ext.form.field.Display 就是为了展示的字段
  • Ext.form.Label
  • Ext.form.FieldSet
  • Ext.form.FieldContainer
  • Ext.form.field.File
• FieldContainer.js
  

• cosupload.jsp
  

  <%@ page language="java" contentType="text/html; charset=GBk"pageEncoding="GBK"%>
  <%@ page import="java.util.*" %>
  <%@ page import="java.io.*" %>
  <%@ page import="com.hd.util.RandomFileRenamePolicy" %>
  <%@page import=&#illy.servlet.*"%>
  <%//----------------------------------------//----------------------------------------String root = Session().getServletContext().getRealPath("/");String savePath = root + "file-library\";int maxPostSize = 3 * 5 * 1024 * 1024;RandomFileRenamePolicy frp = new RandomFileRenamePolicy();MultipartRequest multi = new MultipartRequest(request, savePath, maxPostSize, "utf-8",frp);String fieldIds = "";//取得所有已上传文件的名字，返回枚举类型。Enumeration filesName = FileNames();//遍历返回的枚举类型，COS可以上传多个文件，当表单中有多个文本域标签时，使用while关键字遍历.long l = 0L;String fileType = null;String fileName = null;while(filesName.hasMoreElements()){//当发现枚举类型中包含文件对象，获取文件对象在枚举中的名字String fname = (Element();//通过名字获取文件，返回java文件对象File file = File(fname);//判断是否获得到文件if(file != null){//获取文件的真实名字(以便能存储到数据库中)fileName = FilesystemName(fname);fileType = fileName.substring(fileName.lastIndexOf(".")+1);RandomAccessFile raFile = new RandomAccessFile(new File(savePath+fileType+"\"+fileName),"r"); l = raFile.length(); fieldIds = fieldIds + fileName+",";}}fieldIds = fieldIds.substring(0,fieldIds.length()-1);response.setContentType("text/html;charset=GBK");Writer().print("{'address':'"+RandomFileRenamePolicy.fp+"','docName':'"+RandomFileRenamePolicy.fn+"','fileType':'"+fileType+"','docCode':'"+fileName+"','size':'"+l+"','success':true,'message':'上传成功','ids':'"+fieldIds+"'}");
  %>
  

• Display.js
  

• FieldContainer.js
  

• FieldSet.js
  

• File.js
  

• hidden.js
  

• HtmlEditor.js
  

• Label.js
  
  • 从Grid中装载数据 basic.loadRecord(Model);
  • 服务器装载数据
    • 异步装载
  • 表单的提交操作
    • Ajax提交数据
    • 传统方式提交
• load.js
  

panel与layout

• 面板
  • 类结构
    • Ext.Base
      • Ext.AbstractComponent
        • Ext.Component
          • Ext.panel.AbstractPanel
            • Ext.panel.Panel (是以前版本的Ext.Panel类)

chart

• 图表分为坐标轴(axes)和图表序列(series)
  • axes 轴
    • 数值轴 Ext.chart.axis.Numeric
    • 时间轴 Ext.chart.axis.Time
    • 分类轴 Ext.chart.axis.Category
    • 仪表轴 Ext.chart.axis.Gauge
  • series 图表序列
    highlight高亮,label标题,tips提示,renderer格式化
    • 折线图 Ext.chart.series.Line
    • 柱形图 Ext.chart.series.Column
    • 饼状图 Ext.chart.series.Pie
    • 条形图 Ext.chart.series.Bar
    • 面积图 Ext.chart.series.Area
    • 雷达图 Ext.chart.series.Radar 略
    • 散点图 Ext.chart.series.Scatter 略
    • 仪表图 Ext.chart.series.Gauge
• Numeric.js
  

  var dataStore = ate("Ext.data.Store",{fields:['name','data'],data:[{name:'0~10岁',data:120},{name:'11~18岁',data:170},{name:'19~24岁',data:175}]
  });
  var b1 = ate("Ext.Window",{width:600,height:500,title:'年龄身高分布图',shadow:false,maximizable:true,layout:'fit',items:[{xtype:'chart',style:'background:#fff',//控制背景颜色animate :true,//运行动画shadow : true,theme:"Category1",//皮肤store:dataStore,axes:[{type:'Numeric',position:'left',//放置到左边dashSize:5,//引导线的宽度设置title:'身高分布(CM)',fields:['data'],//显示的数据索引majorTickSteps:5,minorTickSteps:6,grid:{odd:{//奇数行opacity:1,//不透明'stroke-width':0.5//表格线宽},even:{//偶数行opacity:1,//不透明stroke:'#DDD','stroke-width':0.5//表格线宽}}},{type:'Category',position:'bottom',fields:['name'],title:'年龄段',grid:true}],//轴series:[{type:'line',axis:'left',xField: 'name',yField: 'data',highlight:true,tips:{trackMouse: true,width: 140,height: 28,renderer: function(storeItem, item) {this.('name') + ': ' &#('data') + 'CM');}}}]//序列}]
  });
  

• Column.js
  

    //定义数据集合var columnStore1 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:20},{name:"11~18岁",data:60},{name:"19~24岁",data:30}]});var b2 = ate('Ext.Window', {width: 800,height: 600,hidden: false,closeAction:'hide',maximizable: true,title: '柱形图展示图表',layout: 'fit',tbar: [{text: '改变数据',handler: function() {columnStore1.loadData([{name:"0~10岁",data:50},{name:"11~18岁",data:30},{name:"19~24岁",data:20}]);}}],items: {id: 'chartCmp',xtype: 'chart',style: 'background:#fff',animate: true,shadow: true,store: columnStore1,axes: [{//轴type: 'Numeric',position: 'left',fields: ['data'],title: '人数',grid: true,minimum: 0}, {type: 'Category',position: 'bottom',fields: ['name'],title: '年龄段'}],//序列series: [{type: 'column',axis: 'left',highlight: true,tips: {//提示trackMouse: true,width: 140,height: 28,renderer: function(storeItem,item) {this.('name') + ': ' + ('data') + ' 名');                    }},//格式化renderer: function(sprite, record, attr, index, store){var fieldValue = Math.random() * 20 + 10;var value = (('data') >> 0) % 3;var color = ['rgb(213, 70, 121)', 'rgb(44, 153, 201)', 'rgb(146, 6, 157)', 'rgb(49, 149, 0)', 'rgb(249, 153, 0)'][value];return Ext.apply(attr, {fill: color});} ,                 label: { //控制柱形图labeldisplay: 'insideEnd','text-anchor': 'middle',field: 'data',renderer: Ext.util.Format.numberRenderer('0'),orientation: 'vertical',color: '#333'},xField: 'name',yField: 'data'}]}});
  

• line.js
  

    //定义数据集合var columnStore2 =  ate('Ext.data.JsonStore', {fields: ['name', 'data1','data2','data3','data4'],data: [{name:"一月月考",data1:85,data2:76,data3:94,data4:80},{name:"二月月考",data1:96,data2:72,data3:87,data4:63},{name:"三月月考",data1:70,data2:66,data3:68,data4:78},{name:"四月月考",data1:90,data2:78,data3:76,data4:90}]});
  var b3 = ate('Ext.Window', {width: 800,height: 600,hidden: false,maximizable: true,closeAction:'hide',title: 'Line Chart',renderTo: Body(),layout: 'fit',tbar: [{text: '产看另外一个人的成绩',handler: function() {columnStore2.loadData([{name:"一月月考",data1:75,data2:86,data3:84,data4:90},{name:"二月月考",data1:86,data2:62,data3:87,data4:93},{name:"三月月考",data1:80,data2:96,data3:68,data4:98},{name:"四月月考",data1:60,data2:98,data3:76,data4:60}]);}}],items: {xtype: 'chart',style: 'background:#fff',animate: true,store: columnStore2,shadow: true,//阴影
  //          mask: 'horizontal',//创建遮罩
  //          listeners: {//配合遮罩用的隐藏
  //              select: {
  //                  fn: function(me, selection) {
  //                      //me.setZoom(selection);
  //                      me.mask.hide();
  //                  }
  //              }
  //          },            theme: 'Category1',legend: {position: 'right'},axes: [{//轴type: 'Numeric',minimum: 0,position: 'left',fields: ['data1', 'data2', 'data3', 'data4'],title: '分数',minorTickSteps: 1,//内部去也的跨度grid: {odd: {opacity: 1,fill: '#ddd',stroke: '#bbb','stroke-width': 0.5}}}, {type: 'Category',position: 'bottom',fields: ['name'],title: '历次考试'}],series: [{//序列1type: 'line',highlight: {size: 7,radius: 7},axis: 'left',xField: 'name',yField: 'data1',//展示在图例上的title  :'语文',markerConfig: {//标记配置type: 'cross',//交叉size: 4,radius: 4,'stroke-width': 0}},{//序列2type: 'line',highlight: {size: 7,radius: 7},axis: 'left',xField: 'name',yField: 'data2',title  :'数学',markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}}, {type: 'line',highlight: {size: 7,radius: 7},axis: 'left',//位置smooth: true,xField: 'name',yField: 'data3',title  :'英语',markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}}, {type: 'line',highlight: {size: 7,radius: 7},axis: 'left',smooth: true,fill: true,//填充颜色xField: 'name',yField: 'data4',title  :'计算机',markerConfig: {type: 'circle',//圈size: 4,radius: 4,'stroke-width': 0}}]}});
  

• Pie.js
  

  var columnStore5 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:20},{name:"11~18岁",data:60},{name:"19~24岁",data:30}]});
  var b4 = ate('Ext.Window', {width: 800,height: 600,title: '饼图示例',layout: 'fit',closeAction:'hide',tbar: [{text: '数据变换',handler: function() {columnStore5.loadData([{name:"0~10岁",data:40},{name:"11~18岁",data:20},{name:"19~24岁",data:40}]);}}, {enableToggle: true,pressed: false,text: 'Donut(设置内圆)',toggleHandler: function(btn, pressed) {var chart = Cmp('chartCmp');//设置图标序列的模式chart.series.first().donut = pressed ? 35 : false;//内弧度fresh();}}],items: {xtype: 'chart',id: 'chartCmp',animate: true,store: columnStore5,shadow: true,legend: {position: 'right'},insetPadding: 60,theme: 'Base:gradients',series: [{type: 'pie',field: 'data',showInLegend: true,donut: false,//内环状线圈tips: {//提示trackMouse: true,width: 140,height: 28,renderer: function(storeItem, item) {var total = 0;columnStore5.each(function(rec) {total += ('data');});this.('name') + ': ' + ('data')/total*100)+ '%');}},highlight: {//高亮segment: {margin: 20}},label: {field: 'name',display: 'rotate',contrast: true,font: '18px Arial'}}]}});
  

• Bar.js
  

  var columnStore6 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:122},{name:"11~18岁",data:163},{name:"19~24岁",data:234},{name:"15~35岁",data:737},{name:"36~42岁",data:453},{name:"43~60岁",data:540}]});
  var b5 = ate('Ext.Window', {width: 800,height: 600,hidden: false,maximizable: true,title: 'Bar Renderer',renderTo: Body(),layout: 'fit',tbar: [{text: '重新装载数据',handler: function() {columnStore6.loadData( [{name:"0~10岁",data:221},{name:"11~18岁",data:363},{name:"19~24岁",data:135},{name:"15~35岁",data:432},{name:"36~42岁",data:756},{name:"43~60岁",data:649}]);}}],items: {xtype: 'chart',animate: true,style: 'background:#fff',shadow: false,//阴影store: columnStore6,axes: [{type: 'Numeric',position: 'bottom',fields: ['data'],label: {renderer: Ext.util.Format.numberRenderer('0,0')},title: '人数',minimum: 0}, {type: 'Category',position: 'left',fields: ['name'],title: '年龄分布'}],series: [{type: 'bar',axis: 'bottom',label: {display: 'insideEnd',field: 'data1',renderer: Ext.util.Format.numberRenderer('0'),orientation: 'horizontal',color: '#333','text-anchor': 'middle',contrast: true},xField: 'name',yField: ['data'],renderer: function(sprite, record, attr, index, store) {var fieldValue = Math.random() * 20 + 10;var value = (('data') >> 0) % 5;var color = ['rgb(213, 70, 121)', 'rgb(44, 153, 201)', 'rgb(146, 6, 157)', 'rgb(49, 149, 0)', 'rgb(249, 153, 0)'][value];return Ext.apply(attr, {fill: color});}}]}});
  

• area.js
  

   //Ready(function () {var columnStore7 =  ate('Ext.data.JsonStore', {fields: ['name', 'data1','data2','data3','data4'],data: [{name:"一月月考",data1:85,data2:76,data3:94,data4:80},{name:"二月月考",data1:96,data2:72,data3:87,data4:63},{name:"三月月考",data1:70,data2:66,data3:68,data4:78},{name:"四月月考",data1:90,data2:78,data3:76,data4:90}]});var b6 = ate('Ext.Window', {width: 800,height: 600,hidden: false,shadow: false,maximizable: true,title: 'Area Chart',renderTo: Body(),layout: 'fit',tbar: [{text: '切换数据',handler: function() {columnStore7.loadData([{name:"一月月考",data1:75,data2:86,data3:84,data4:90},{name:"二月月考",data1:86,data2:62,data3:87,data4:93},{name:"三月月考",data1:80,data2:96,data3:68,data4:98},{name:"四月月考",data1:60,data2:98,data3:76,data4:60}]);}}, {enableToggle: true,pressed: true,text: '动画开启|关闭',toggleHandler: function(btn, pressed) {var chart = Cmp('chartCmp');chart.animate = pressed?{easing: 'ease', duration: 500 }:false;}}],items: {id: 'chartCmp',xtype: 'chart',style: 'background:#fff',animate: true,store: columnStore7,legend: {position: 'bottom'},axes: [{type: 'Numeric',grid: true,position: 'left',//位置fields: ['data1', 'data2', 'data3', 'data4'],title: '分数分布',grid: {odd: {opacity: 1,fill: '#ddd',stroke: '#bbb','stroke-width': 1}},minimum: 0,adjustMinimumByMajorUnit: 0}, {type: 'Category',position: 'bottom',fields: ['name'],title: '每月考试',grid: true,label: {rotate: {degrees: 315}}}],series: [{type: 'area',highlight: false,axis: 'left',xField: 'name',yField: ['data1', 'data2', 'data3', 'data4'],style: {opacity: 0.93}}]}}); //})
  

• area.js(加)
  

• Gauge.js
  

  var s1 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:20}]});var s2 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:50}]});var s3 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:30}]});var b8 = ate('Ext.Window', {width: 800,height: 250,minWidth: 650,minHeight: 225,title: 'Gauge Charts',tbar: [{text: '装载新的数据',handler: function() {s1.loadData([{name:"0~10岁",data:50}]);s2.loadData([{name:"0~10岁",data:20}]);s3.loadData([{name:"0~10岁",data:70}]);}}],layout: {type: 'hbox',align: 'stretch'},items: [{//第一个仪表图xtype: 'chart',style: 'background:#fff',animate: {easing: 'elasticIn',duration: 1000},store: s1,insetPadding: 25,flex: 1,axes: [{type: 'gauge',position: 'gauge',minimum: 0,maximum: 100,steps: 10,margin: -10}],series: [{type: 'gauge',field: 'data',donut: false,colorSet: ['#F49D10', '#ddd']}]}, {//第二个仪表图xtype: 'chart',style: 'background:#fff',animate: true,store: s2,insetPadding: 25,flex: 1,axes: [{type: 'gauge',position: 'gauge',minimum: 0,maximum: 100,steps: 10,margin: 7}],series: [{type: 'gauge',field: 'data',donut: 30,colorSet: ['#82B525', '#ddd']}]}, {//第三个仪表图xtype: 'chart',style: 'background:#fff',animate: {easing: 'bounceOut',duration: 500},store: s3,insetPadding: 25,flex: 1,axes: [{type: 'gauge',position: 'gauge',minimum: 0,maximum: 100,steps: 10,margin: 7}],series: [{type: 'gauge',field: 'data',donut: 80,colorSet: ['#3AA8CB', '#ddd']}]}]})
  

• Radar.js
  

  var columnStore9 =  ate('Ext.data.JsonStore', {fields: ['name', 'data1','data2','data3','data4'],data: [{name:"一月月考",data1:85,data2:76,data3:94},{name:"二月月考",data1:96,data2:72,data3:87},{name:"三月月考",data1:70,data2:66,data3:68},{name:"四月月考",data1:50,data2:88,data3:56},{name:"五月月考",data1:80,data2:88,data3:36},{name:"六月月考",data1:40,data2:68,data3:96},{name:"七月月考",data1:60,data2:88,data3:86},{name:"八月月考",data1:70,data2:88,data3:96},{name:"九月月考",data1:80,data2:98,data3:66},{name:"十月月考",data1:90,data2:78,data3:76},{name:"十一月月考",data1:90,data2:78,data3:76},{name:"十二月月考",data1:90,data2:78,data3:76}]});var b9 = ate('Ext.Window', {width: 800,height: 600,hidden: false,shadow: false,maximizable: true,style: 'overflow: hidden;',title: 'Radar Chart',renderTo: Body(),layout: 'fit',tbar: [{text: '装载数据',handler: function() {columnStore9.loadData( [{name:"一月月考",data1:75,data2:86,data3:74},{name:"二月月考",data1:96,data2:82,data3:87},{name:"三月月考",data1:70,data2:96,data3:68},{name:"四月月考",data1:50,data2:78,data3:56},{name:"五月月考",data1:90,data2:88,data3:36},{name:"六月月考",data1:80,data2:68,data3:96},{name:"七月月考",data1:60,data2:88,data3:86},{name:"八月月考",data1:70,data2:98,data3:86},{name:"九月月考",data1:88,data2:98,data3:66},{name:"十月月考",data1:70,data2:88,data3:96},{name:"十一月月考",data1:90,data2:78,data3:76},{name:"十二月月考",data1:90,data2:98,data3:76}]);}}, {enableToggle: true,pressed: true,text: 'Animate',toggleHandler: function(btn, pressed) {var chart = Cmp('chartCmp');chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;}}],items: {id: 'chartCmp',xtype: 'chart',style: 'background:#fff',theme: 'Category2',animate: true,store: columnStore9,insetPadding: 20,legend: {position: 'right'//图例},axes: [{//轴type: 'Radial',position: 'radial',label: {display: true}}],series: [{type: 'radar',xField: 'name',yField: 'data1',showInLegend: true,//展示在图例showMarkers: true,markerConfig: {radius: 5,size: 5},style: {'stroke-width': 2,//fill: 'yellow'//没有填充fill:'none'}},{type: 'radar',xField: 'name',yField: 'data2',showInLegend: true,showMarkers: true,markerConfig: {radius: 5,size: 5},style: {'stroke-width': 2,fill: 'none'}},{type: 'radar',xField: 'name',yField: 'data3',showMarkers: true,showInLegend: true,markerConfig: {radius: 5,size: 5},style: {'stroke-width': 2,fill: 'none'}}]}}); 
  

• demo.js
  

   var chart;var generateData = (function() {var data = [], i = 0,last = false,date = new Date(2011, 1, 1),seconds = +date,min = Math.min,max = Math.max,random = Math.random;return function() {data = data.slice();data.push({date:  Ext.Date.add(date, Ext.Date.DAY, i++),visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),users: min(100, max(last? last.users + (random() - 0.5) * 20 : random() * 100, 0))});last = data[data.length -1];return data;};})();var group = false,groupOp = [{dateFormat: 'M d',groupBy: 'year,month,day'}, {dateFormat: 'M',groupBy: 'year,month'}];function regroup() {group = !group;var axis = (1),selectedGroup = groupOp[+group];axis.dateFormat = selectedGroup.upBy = draw();}var store = ate('Ext.data.JsonStore', {fields: ['date', 'visits', 'views', 'users'],data: generateData()});
  //关键函数var intr = setInterval(function() {var gs = generateData();var toDate = Date,lastDate = gs[gs.length - 1].date,markerIndex = chart.markerIndex || 0;if (+toDate < +lastDate) {markerIndex = Date = lastDate;timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);chart.markerIndex = markerIndex;}store.loadData(gs);}, 1000);var b10 =  ate('Ext.Window', {width: 800,height: 600,hidden: false,maximizable: true,title: 'Live Animated Chart',renderTo: Body(),layout: 'fit',items: [{xtype: 'chart',style: 'background:#fff',id: 'chartCmp',store: store,shadow: false,animate: true,axes: [{type: 'Numeric',grid: true,minimum: 0,maximum: 100,position: 'left',fields: ['views', 'visits', 'users'],title: 'Number of Hits',grid: {odd: {fill: '#dedede',stroke: '#ddd','stroke-width': 0.5}}}, {type: 'Time',position: 'bottom',fields: 'date',title: 'Day',dateFormat: 'M d',groupBy: 'year,month,day',aggregateOp: 'sum',constrain: true,fromDate: new Date(2011, 1, 1),toDate: new Date(2011, 1, 7),grid: true}],series: [{type: 'line',smooth: false,axis: 'left',xField: 'date',yField: 'visits',label: {display: 'none',field: 'visits',renderer: function(v) { return v >> 0; },'text-anchor': 'middle'},markerConfig: {radius: 5,size: 5}},{type: 'line',axis: 'left',smooth: false,xField: 'date',yField: 'views',label: {display: 'none',field: 'visits',renderer: function(v) { return v >> 0; },'text-anchor': 'middle'},markerConfig: {radius: 5,size: 5}},{type: 'line',axis: 'left',smooth: false,xField: 'date',yField: 'users',label: {display: 'none',field: 'visits',renderer: function(v) { return v >> 0; },'text-anchor': 'middle'},markerConfig: {radius: 5,size: 5}}]}]});chart = Cmp('chartCmp');var timeAxis = (1);
  

• demo.js(加)
  

    var columnStore11 =  ate('Ext.data.JsonStore', {fields: ['name', 'data'],data: [{name:"0~10岁",data:20},{name:"11~18岁",data:60},{name:"19~24岁",data:30}]});var b11 = ate('Ext.Window', {width: 800,height: 600,hidden: false,maximizable: true,title: 'Pie Renderer Chart',renderTo: Body(),layout: 'fit',tbar: [{text: 'Reload Data',handler: function() {columnStore11.loadData([{name:"0~10岁",data:40},{name:"11~18岁",data:20},{name:"19~24岁",data:40}]);}}],items: {id: 'chartCmp',xtype: 'chart',style: 'background:#fff',animate: true,shadow: true,store: columnStore11,series: [{type: 'pie',animate: true,angleField: 'data', //角度lengthField: 'data', //字段切点长度highlight: {segment: {margin: 20}},label: {field: 'name',   //文本标注display: 'rotate', //旋转标签 (also middle, out).font: '14px Arial',contrast: true},                                style: {'stroke-width': 1,'stroke': '#fff'},//add rendererrenderer: function(sprite, record, attr, index, store) {//格式化重要函数var value = (('data') >> 0) % 9;var color = [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"][value];return Ext.apply(attr, {fill: color});}}]}});
  

• Numeric.js
  

转载于:.html