本文共 11937 字，大约阅读时间需要 39 分钟。

一 ext.direct 有点象DWR，但跨平台，根据后台暴露的功能生成前台的JS 1）支持类库下载：directjngine http://code.google.com/p/directjngine 2)配置服务端功能 比如首先formaction处理表单的读取和提交 @DirectMethod public ExtFormDirectResult loadProductServer(String productId){ ExtFormDirectResult result = new ExtFormDirectResult(); if("001".equals(productId)){ //获取产品信息 Product product = new Product(); product.setProductName("笔记本"); product.setIntroduction("本产品美观实用，售后服务优秀。"); //将产品信息放入结果对象中 result.setData(product); result.setSuccess(true); }else{ //设置错误信息 result.setErrorMessage("读取的产品id不存在"); result.setSuccess(false); } return result; } /** * 表单提交处理方法 * @param params 表单参数集合 * @param files 文件集合 * @return 结果对象 */ @DirectFormPostMethod public ExtFormDirectResult submitProductServer(Map<String,String> params, Map<String, FileItem> files){ ExtFormDirectResult result = new ExtFormDirectResult(); //获取表单参数 String productName = params.get("productName"); if("笔记本".equals(productName)){ result.setSuccess(true); }else{ result.addError("productName", "产品名称必须是：笔记本"); //设置错误信息 result.setErrorMessage("提交产品名称错误"); result.setSuccess(false); } return result; } 配置WEB.XML <!-- DirectJNgine servlet --> <servlet> <servlet-name>DjnServlet</servlet-name> <servlet-class> com.softwarementors.extjs.djn.servlet.DirectJNgineServlet</servlet-class> <init-param> <param-name>providersUrl</param-name> <param-value>djn/directprovider</param-value> </init-param> <init-param> <param-name>apis</param-name> <param-value>form,data</param-value> </init-param> <init-param> <param-name>form.apiFile</param-name> <param-value>form/api.js</param-value> </init-param> <init-param> <param-name>data.apiFile</param-name> <param-value>data/api.js</param-value> </init-param> <init-param> <param-name>form.apiNamespace</param-name> <param-value>Ext.form.app</param-value> </init-param> <init-param> <param-name>data.apiNamespace</param-name> <param-value>Ext.data.app</param-value> </init-param> <init-param> <param-name>form.classes</param-name> <param-value> com.sample.ext4.direct.form.action.FormAction </param-value> </init-param> <init-param> <param-name>data.classes</param-name> <param-value> com.sample.ext4.direct.data.action.DataAction </param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <init-param> <!-- 指定gson的配置类 --> <param-name>gsonBuilderConfiguratorClass</param-name> <param-value>com.sample.ext4.direct.config.GsonBuilderConfiguratorCustom</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> <servlet-name>action</servlet-name> <servlet-class>org.apache.struts.action.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>action</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>DjnServlet</servlet-name> <url-pattern>/djn/directprovider/*</url-pattern> </servlet-mapping> 3 前端脚本引入 <script type="text/javascript" src="../../form/api.js"></script> Ext.onReady(function(){ Ext.QuickTips.init();//初始化提示; //注册api Ext.Direct.addProvider( Ext.form.app.REMOTING_API ); var productForm = Ext.create('Ext.form.Panel',{ title:'在表单中使用Direct技术', width : 300, frame : true, fieldDefaults:{//统一设置表单字段默认属性 labelSeparator :'：',//分隔符 labelWidth : 80,//标签宽度 width : 270,//字段宽度 msgTarget : 'under' }, api: { load: FormAction.loadProductServer,//加载数据的远程方法 submit: FormAction.submitProductServer//提交数据的远程方法 }, paramOrder: ['productId'], renderTo: Ext.getBody(), bodyPadding: 5, defaultType: 'textfield',//设置表单字段的默认类型 items:[{ fieldLabel:'产品名称', name : 'productName' },{ fieldLabel:'产品简介', name : 'introduction', xtype : 'textarea' }], buttons:[{ text : '数据加载', handler : loadData },{ text : '数据提交', handler : submitData }] }); //表单数据加载 function loadData(){ productForm.form.load({ params:{productId:'001'},//以产品id作为参数 success:function(form,action){//加载成功的处理函数 Ext.Msg.alert('提示','表单数据加载成功'); }, failure:function(form,action){//加载失败的处理函数 Ext.Msg.alert('提示','表单数据加载失败<br>失败原 因：'+action.result.errorMessage); } }); } //表单数据提交 function submitData(){ productForm.form.submit({ success:function(form,action){//加载成功的处理函数 Ext.Msg.alert('提示','表单数据提交成功'); }, failure:function(form,action){//加载失败的处理函数 Ext.Msg.alert('提示','表单数据提交失败<br>失败原 因：'+action.result.errorMessage); } }); } }); 二 图形部分 1） ext.draw为ext js 4中的新的图形包 2）绘制基本图形 Ext.onReady(function() { //创建图形组件 Ext.create('Ext.draw.Component', { width: 600, height: 400, viewBox : false,//使图形保持原始大小 renderTo: 'container', items: [{ type: 'rect',//矩形 x: 50,//矩形左上角的横坐标 y: 20,//矩形左上角的纵坐标 height: 150,//矩形的高度 width: 150,//矩形的宽度 stroke : "#CCFFFF",//边线的填充颜色 fill : "#FF99CC"//填充的颜色 },{ type: 'circle',//圆形 x: 280,//圆心的横坐标 y: 95,//圆心的纵坐标 radius: 70,//半径 stroke : "#FF0000",//边线的填充颜色 fill : "#FFCC66"//填充的颜色 },{ type: 'ellipse',//椭圆形 x: 430,//圆心的横坐标 y: 95,//圆心的纵坐标 radiusX:50,//水平半径 radiusY:30,//垂直半径 stroke : "#000000",//边线的填充颜色 fill : "#CC00FF"//填充的颜色 }] }); }); 3）线性渐变 //创建图形组件 Ext.create('Ext.draw.Component', { width: 600, height: 400, viewBox : false,//使图形保持原始大小 renderTo: 'container', //定义线性渐变 gradients: [{ id: 'grad1',//渐变id angle: 90,//角度 stops: {//渐变层次 0: { color: '#FF0000'//红色 }, 50: { color: '#00FF00'//绿色 }, 100: { color: '#0000FF'//蓝色 } } },{ id: 'grad2',//渐变id angle: 135,//角度 stops: {//渐变层次数组 0: { color: '#CC33FF'//黑色 }, 100: { color: '#FFFFFF'//白色 } } },{ id: 'grad3',//渐变id angle: 45,//角度 stops: {//渐变层次数组 50: { color: '#000000'//黑色 } } }], items: [{ type: 'rect',//矩形 x: 50,//矩形左上角的横坐标 y: 20,//矩形左上角的纵坐标 height: 150,//矩形的高度 width: 150,//矩形的宽度 stroke : "#CCFFFF",//边线的填充颜色 fill: 'url(#grad1)'//使用渐变填充 },{ type: 'circle',//圆形 x: 280,//圆心的横坐标 y: 95,//圆心的纵坐标 radius: 70,//半径 stroke : "#FF0000",//边线的填充颜色 fill: 'url(#grad2)'//使用渐变填充 },{ type: 'ellipse',//椭圆形 x: 430,//圆心的横坐标 y: 95,//圆心的纵坐标 radiusX:50,//水平半径 radiusY:30,//垂直半径 stroke : "#000000",//边线的填充颜色 fill : "url(#grad3)"//使用渐变填充 }] 三 CHART图表 1）坐标轴 Ext.onReady(function(){ var dataStore = new Ext.data.JsonStore({ fields:['name', 'percentage'], data: [ {name :'小于30岁', percentage : 2}, {name :'30-40岁', percentage : 4}, {name :'40-50岁', percentage : 3}, {name :'50岁以上', percentage : 3} ] }); Ext.create('Ext.panel.Panel', { title : '员工年龄分布图', width: 400, height: 400, renderTo: Ext.getBody(), layout: 'fit', items : [{ xtype : 'chart', store : dataStore, axes: [{ type: 'Numeric',//配置坐标轴类型为数值坐标 dashSize : 10,//坐标轴前导线条长度，默认为3 position: 'left',//配置坐标在左侧 fields: ['percentage'],//指定坐标对应的字段 title: '百分比',//配置坐标轴标题 grid: { //奇数行 odd : { opacity: 1,//不透明 fill: '#FFFF99',//表格内的填充色 stroke: '#FF3300',//表格线颜色 'stroke-width': 0.5//表格线宽度 }, //偶数行 even : { opacity: 0,//透明 stroke: '#6600CC',//表格线颜色 'stroke-width': 0.5//表格线宽度 } }, majorTickSteps : 10,//主区间数 minorTickSteps : 3//副区间数 }, { type: 'Category',//配置坐标轴类型为目录坐标 position: 'bottom',//配置坐标在底部 fields: ['name'],//指定坐标对应的字段 grid : true,//启用表格 title: '年龄段'//配置坐标轴标题 }], series : [{ type: 'line', axis: 'left', xField: 'name',//横轴字段 yField: 'percentage'//纵轴字段 }] }] }); }); 2） 饼状图 Ext.onReady(function(){ var dataStore = new Ext.data.JsonStore({ fields:['age', 'percentage', 'growing'], data: [ {age :'小于30岁', percentage : 10, growing : 35}, {age :'30-40岁', percentage : 40, growing : 30}, {age :'40-50岁', percentage : 30,growing : 30}, {age :'50岁以上', percentage : 20, growing : 30} ] }); Ext.create('Ext.panel.Panel', { title : '员工年龄分布图', width : 400, height : 400, renderTo: Ext.getBody(), layout : 'fit', items : [{ xtype : 'chart', store : dataStore, animate : true,//是否启用动画效果 legend : { position : 'bottom' //图例位置 }, shadow : true, series : [{ type : 'pie',//图表序列类型 field : 'percentage',//对应饼状图角度的字段名 showInLegend : true,//是否显示在图例当中 colorSet : ['#FFFF00','#669900','#FF6699','#66CCCC'],//颜色 label : { field : 'age',//标签字段名 contrast : true, color : '#FFFF00', renderer : function(v){//自定义标签渲染函数 return "["+v+"]"; }, display : 'middle',//标签显现方式 font : '18px "Lucida Grande"'//字体 }, highlight : { segment : { margin: 10 //空白区域宽度 } }, tips : { trackMouse : true, //是否启用鼠标跟踪 width : 50, height : 28, renderer : function(storeItem) {//自定义渲染函数 var title = storeItem.get('percentage') + '%'; this.setTitle(title); } } }] }] }); }); 3 BAR条型图 Ext.onReady(function(){ var dataStore = new Ext.data.JsonStore({ fields:['ageRange', 'proportion', 'growing'], data: [ {ageRange :'小于30岁', proportion : 10, growing : 35}, {ageRange :'30-40岁', proportion : 40, growing : 30}, {ageRange :'40-50岁', proportion : 30,growing : 30}, {ageRange :'50岁以上', proportion : 20, growing : 30} ] }); Ext.create('Ext.panel.Panel', { title : '员工年龄分布图', width: 400, height: 400, renderTo: Ext.getBody(), layout: 'fit', items : [{ xtype : 'chart', store : dataStore, axes: [{ type: 'Numeric', position: 'bottom', minimum : 0,//数轴最小值 maximum : 60,//数轴最大值 fields: ['proportion','growing'],//同时展示2个数据 title: '百分比' }, { type: 'Category', position: 'left', fields: ['ageRange'], title: '年龄段' }], legend : { position : 'bottom' //图例位置 }, series : [{ type: 'bar', gutter : 20,//配置条形图矩形之间的间距 groupGutter : 10,//配置条形图相邻两组矩形之间的距离是矩形宽度的10% //column : true,//配置条形图的模式（true垂直false水平） xPadding : 10,//配置左右坐标轴距图形的空隙 yPadding : 20,//配置上下坐标轴距图形的空隙 axis: 'bottom', xField: 'ageRange',//左侧坐标轴字段 yField: ['proportion','growing'],//底部坐标轴字段 title : ['人员比例','增长速度'],//配置图例字段说明 label : { field : ['proportion','growing'],//标签字段名 display : 'outside',//标签显现方式 font : '18px "Lucida Grande"',//字体 renderer : function(v){//自定义标签渲染函数 return v + '%'; } } }] }] }); }); 4 柱状图 Ext.onReady(function(){ var dataStore = new Ext.data.JsonStore({ fields:['ageRange', 'proportion', 'growing'], data: [ {ageRange :'小于30岁', proportion : 10, growing : 35}, {ageRange :'30-40岁', proportion : 40, growing : 30}, {ageRange :'40-50岁', proportion : 30,growing : 30}, {ageRange :'50岁以上', proportion : 20, growing : 30} ] }); Ext.create('Ext.panel.Panel', { title : '员工年龄分布图', width: 400, height: 400, renderTo: Ext.getBody(), layout: 'fit', items : [{ xtype : 'chart', store : dataStore, axes: [{ type: 'Numeric', position: 'left', minimum : 0,//数轴最小值 maximum : 60,//数轴最大值 fields: ['proportion','growing'],//同时展示2个数据 title: '百分比' }, { type: 'Category', position: 'bottom', fields: ['ageRange'], title: '年龄段' }], legend : { position : 'bottom' //图例位置 }, series : [{ type: 'column', axis: 'left', xField: 'ageRange',//x轴字段 yField: ['proportion','growing'],//y轴字段 title : ['人员比例','增长速度'],//配置图例字段说明 label : { field : ['proportion','growing'],//标签字段名 display : 'outside',//标签显现方式 font : '18px "Lucida Grande"',//字体 renderer : function(v){//自定义标签渲染函数 return v + '%'; } } }] }] }); }); 5 图表中使用主题 items : [{ xtype : 'chart', store : dataStore, //theme: 'Base',//基本主题 //theme: 'Blue',//蓝色主题 theme: 'Category1',//彩色主题1 （有1-30个） 6 自定义主题 //创建自定义图表主题类Ext.chart.theme.Cust Ext.define('Ext.chart.theme.Cust', { //扩展基本主题 extend : 'Ext.chart.theme.Base', constructor: function(config) { Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({ //统一定义坐标轴样式 axis: { stroke: '#444',//指定坐标轴轴线颜色 'stroke-width': 1//0表示无轴线，1表示有轴线 }, //定义左侧坐标标签样式 axisLabelLeft: { fill: '#FF0000',//指定标签字体填充颜色 font: '12px "Lucida Grande", sans-serif', padding: 3,//指定标签距离坐标轴的间距 renderer: function(v) { return v; }//标签渲染函数 }, //axisLabelTop:{}顶部左边标签样式 //axisLabelRight:{}顶部左边标签样式 //axisLabelBottom:{}顶部左边标签样式 //自定义底部坐标标题样式 axisTitleBottom: { font: 'bold 18px "Lucida Grande", sans-serif',//指定坐标轴标题字体 fill: '#6600CC'//指定坐标轴标题文字填充色 }, //axisTitleTop:{}顶部坐标标题样式 //axisTitleRight:{}右侧坐标标题样式 //axisTitleLeft:{}左侧坐标标题样式 //统一定义图表序列边线样式 series: { 'stroke-width': 0//0表示无边线，1表示有边线 }, //按顺序自定义图表序列颜色，colorSet属性会覆盖该主题 colors: [ "#FF0000", "#FFFF00"], //按顺序定义图表序列填充染色，colors 优先级高于seriesThemes seriesThemes: [{ fill: "#66FF00",//fill 优先级高于stroke stroke:"#FF3300" }, { fill: "#66FFFF", stroke:"#FF33FF" }], //统一自定义图表节点标志样式，markerCfg:属性会覆盖该主题 marker: { stroke: '#FFFF00',//指定标志边线颜色 fill: '#660000',//指定标志填充色 radius: 10//指定标志半径 }, //按顺序自定义图表节点标志样式，markerCfg:属性会覆盖该主题 //markerThemes的优先级高于marker中的配置 markerThemes: [{ fill: "#115fa6",//指定标志填充色 type: 'circle' //指定标志类型 }, { fill: "#94ae0a", type: 'cross' }, { type: 'plus' }] }, config)); } });

转载地址：http://nwnf.baihongyu.com/