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