ext js 4 学习笔记6

一 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));
}
});