第二章：Ext.js高级组件
grid组件
普通方式
表格面板类Ext.grid.Panel
- xtype（别名）：gridpanel、grid
- title标题、renderTo渲染至、width宽、height高
- frame : Boolean 是否填充渲染gridpanel
- forceFit : true 列是否自动填充
- store : store 数据集
- tbar: []
- 头部工具栏
- dockedItems : Object/Array
- 可定位的停靠工具条（上、下、左、右）
- selType : ‘checkboxmodel’
- 选择框选择模式
- multiSelect :true
- 是否允许多选
- plugins 插件
- columns : Array
- 列模式(Ext.grid.column.Columnxtype: gridcolumn)
- text : String 列标题
- dataIndex : String 和Model列对应
- sortable : true 是否可以分类
- field:
- 可编辑字段配置
- getStore
- ownerCt返回父级
- 列模式(Ext.grid.column.Columnxtype: gridcolumn)
- grid案例
- gridDemo.js文件代码
Ext.QuickTips.init(); //初始化提示
//// 创建表格面板
var grid = Ext.create("Ext.grid.Panel",{
title : 'Grid Demo',
frame : true, //面板渲染
//forceFit : true, //自动填充列空白处（4.0的选择框有空隙问题时指定宽度）
width : 600,
height: 280,
columns : [ //列模式
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:350,
field:{ //指定可编辑字段
xtype:'textfield', //指定可编辑类型
allowBlank:false
}
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',text:'删除',iconCls:'table_remove',
handler:function(o){
//var gird = o.findParentByType("gridpanel"); //获取父级
var gird = o.ownerCt.ownerCt; //获取删除按钮的父级的父级
// 获取选中数据集
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","请选择数据");
}else{
//// 根据name得到数据
var st = gird.getStore(); //获取数据集
var ids = []; //存储被选中数据的name集合
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//// 后台操作(delete)、前端操作DOM进行删除(ExtJs)
Ext.Ajax.request({
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中删除该条记录
})
}
})
}
}
},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{ //可定位的停靠工具条
xtype:'pagingtoolbar', //分页工具条
store:Ext.data.StoreManager.lookup('s_user'), //指定store
dock:'bottom',
displayInfo:true //是否展示信息（eg:条数）
}],
plugins:[ //配置可编辑单元格插件实现grid的编辑
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 1 //点击N次进入编辑
})
],
selType:'checkboxmodel', //设定选择模式
multiSelect:true, //允许多选
renderTo :Ext.getBody(),
// 通过指定store的id在StoreManager获取store
store : Ext.data.StoreManager.lookup('s_user')
}); - model.js文件代码
//// Model类
Ext.define("user",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'string',sortable:true},
{name:'age',type:'int',sortable:true},
{name:'email',type:'string',sortable:true}
]
});
//// store类
Ext.create("Ext.data.Store",{
model:'user',
storeId:'s_user', //指定了storeId后store由StoreManager自动管理
proxy:{
type:'ajax',
url:'/extjs/extjs!getUserList.action',
reader:{
type:'json',
root:'root'
},
writer:{
type:'json'
}
},
autoLoad:true //自动加载数据
});
- gridDemo.js文件代码
MVC方式
- extjs创建应用的方法
- Ext.application();（Ext.app.Application类）
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: { html: 'My App'}
});
}
}); - Ext.app.Controller 控制器
- Ext.ComponentQuery 组件查询(extjs4.0新特性)
- Ext.container.Containerxtype: container类
- Ext.application();（Ext.app.Application类）
- grid组件的MVC实现
- html文件代码中引入app.js文件
<link rel="stylesheet"type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script> - app.js文件代码
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({ //执行加载
enabled:true
});
Ext.application({
name : 'AM', //应用名
appFolder : "app", //应用目录
launch:function(){ //当前页面加载完成后执行
Ext.create('Ext.container.Viewport', { //创建Viewport
layout:'auto', //自动填充布局
items: {
xtype: 'userlist', //view的别名
title: 'Users',
html : 'List of users will go here'
}
});
},
controllers:['Users']
});
}) - controller/Users.js文件代码
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({ //控制事件等
'userlist button[id=delete]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","请选择数据");
}else{
//// 根据name得到数据
var st = gird.getStore(); //获取数据集
var ids = []; //存储被选中数据的name集合
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//// 后台操作(delete)、前端操作DOM进行删除(ExtJs)
Ext.Ajax.request({
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中删除该条记录
})
}
})
}
}
}
});
},
views:['List'],
stores :["Users"],
models :["User"]
}); - view/List.js文件代码
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',
alias: 'widget.userlist',
frame : true, //面板渲染
width : 600,
height: 280,
columns : [ //列模式
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:350,
field:{
xtype:'textfield',
allowBlank:false
}
}
],
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:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2 //单击时会报错（ext.js的bug）
})
],
selType:'checkboxmodel', //设定选择模式
multiSelect:true,
store : 'Users',
initComponent:function(){ //初始化组件，进行渲染
this.callParent(arguments);
}
}); - store/Users.js文件代码
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User', //define时的名
storeId: 's_user',
proxy:{
type:'ajax',
url:'/extjs/extjs!getUserList.action',
reader: {
type: 'json',
root: 'root'
},
writer:{
type:'json'
}
},
autoLoad: true //自动加载数据（很关键）
}); - model/User.js文件代码
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string',sortable : true},
{name: 'age', type: 'int',sortable : true},
{name: 'email', type: 'string',sortable : true}
]
});
- html文件代码中引入app.js文件
grid列模式
- Ext.grid.column.Column
- xtype: gridcolumn
- Ext.grid.column.Action
- 在表格中渲染一组图标按钮,并为其赋予某种功能
- xtype: actioncolumn
- altText:String 设置应用image元素上的alt
- handler:function(view,rowindex,collndex,item,e);
- icon:图标资源地址、iconCls:图标样式
- items:多个图标的数组 （使用MVC时不建议使用）
- stopSelection:设置是否单击选中
- Ext.grid.column.Boolean
- xtype: booleancolumn
- falseText,trueText
- xtype: booleancolumn
- Ext.grid.column.Date
- xtype: datecolumn
- format:’Y年m月的日’
- xtype: datecolumn
- Ext.grid.column.Number
- xtype: numbercolumn
- format:‘0,000’
- xtype: numbercolumn
- Ext.grid.column.Template
- xtype:’templatecolumn’,
- tpl :”“
- Ext.grid.RowNumberer
- xtype: rownumberer
- 数据字典
- 业务数据字典
- 风险等级,城市
- 不变的数据字典
- 男,女；是,否；血型
- 业务数据字典
- 案例
- controller/Users.js文件代码
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({ //控制事件等
'userlist button[id=delete]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","请选择数据");
}else{
//// 根据name得到数据
var st = gird.getStore(); //获取数据集
var ids = []; //存储被选中数据的name集合
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//// 后台操作(delete)、前端操作DOM进行删除(ExtJs)
Ext.Ajax.request({
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"]
}); - view/List.js文件代码
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',
alias: 'widget.userlist',
frame : true, //面板渲染
width : 600,
height: 280,
columns : [ //列模式
Ext.create("Ext.grid.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:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2 //单击时会报错（ext.js的bug）
})
],
selType:'checkboxmodel', //设定选择模式
multiSelect:true,
store : 'Users',
initComponent:function(){ //初始化组件，进行渲染
this.callParent(arguments);
}
}); - model/User.js文件代码
Ext.define('AM.model.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’
- 从这发现的Ext.grid.plugin.CellEditing
- 重要方法
- 得到被选择的单元格getCurrentPosition() Object
- Ext.JSON.encode()
- itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
- selectByPosition({“row”:5,”column”:6})
- 很实用，选择要特殊处理的数据
- selType: ‘cellmodel’
- 多选框选择器Ext.selection.CheckboxModel
- 重要方法
- Ext.selection.RowModel
- rowmodel 行选择器
- Ext.selection.RowModel
- 重要属性
- multiSelect 允许多选
- simpleSelect 单选选择功能
- enableKeyNav 允许使用键盘
- 重要方法
Grid特性
- Ext.grid.feature.Feature
-
表格的行体Ext.grid.feature.RowBody
- 重要方法
- getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
- 如果要展示这个面板那么必须复写这个方法
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData:function(data,idx,record,orig){ ...... }
})
], - 必须返回行体的对象
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: "",
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
- 如果要展示这个面板那么必须复写这个方法
- getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
- 重要方法
-
Ext.grid.feature.AbstractSummary
- Ext.grid.feature.Summary
- 第一步
features: [{
ftype: 'summary'
}], - 第二步
- columns中配置summaryType: ‘count’, (count,sum,min,max,average)
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format(' : '+value);
}
- columns中配置summaryType: ‘count’, (count,sum,min,max,average)
-
Ext.grid.feature.Grouping
- 在store中设置可以分组的属性
- groupField : ‘’
- 在view中增加代码
Ext.create("Ext.grid.feature.Grouping",{
groupByText : "职业分组",
groupHeaderTpl : "职业{name} 一共{rows.length}人",
showGroupsText : "展示分组",
startCollapsed : true } - 重要事件
- groupclick
- groupdblclick
- groupcontextmenu
- groupexpand
- groupcollapse
- 在store中设置可以分组的属性
-
扩展
- Ext.grid.feature.GroupingSummary
- Ext.grid.feature.Chunking
-
代码
- app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',//应用的名字
appFolder : "app",//应用的目录
launch:function(){//当前页面加载完成执行的函数
Ext.create('Ext.container.Viewport', { //简单创建一个试图
layout:'auto',//自动填充布局
items: {
xtype: 'userlist',
title: 'Users',
html : 'List of users will go here'
}
});
},
controllers:[
'Users'
]
});
}) - controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist':{
itemclick:function(View, record, item, index, e, options ){
var sm = View.getSelectionModel();//.getSelection();
//alert(Ext.JSON.encode(sm.getCurrentPosition()));
sm.selectByPosition({"row":1,"column":2});
}
},
'userlist button[id=selection]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var sm = gird.getSelectionModel();
//sm.deselect(0);
//alert(sm.getLastSelected().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 = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.后台操作(delet)
Ext.Ajax.request({
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('AM.model.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: 'AM.model.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:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1100,
height: 450,
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: record.get('email'),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}),{
ftype: 'summary'
},Ext.create("Ext.grid.feature.Grouping",{
groupByText : "性别分组",
groupHeaderTpl : "性别{name} 一共{rows.length}人",
showGroupsText : "展示分组" })
],
columns : [ //列模式
Ext.create("Ext.grid.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:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
})
],
//selType:'rowmodel',//设定选择模式
selType:'cellmodel',
//multiSelect:true,//运行多选
//enableKeyNav :true,
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
- app.js
grid插件
- 可编辑插件
- 根类Ext.grid.plugin.Editing
- Ext.grid.plugin.CellEditing
- 保存修改的两种办法
- 设立保存按钮,用户单击的时候保存数据
st.sync();
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
model.commit();
}); - 注册edit事件
- e.record.commit();
- 设立保存按钮,用户单击的时候保存数据
- 保存修改的两种办法
- Ext.grid.plugin.RowEditing
- 4.0.1a版本不推荐这个功能
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
- 4.0.1a版本不推荐这个功能
- 表格拖拽Ext.grid.plugin.DragDrop
- 注意:配置有变化
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放组的名称
dragGroup :'userlist', //拖拽组名称
dropGroup :'userlist' //释放租名称
enableDrag:true, //是否启用
enableDrop:true
})]
} - 处理事件
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i<st.getCount();i++){
st.getAt(i).set('index',i+1);
}
}
}
- 注意:配置有变化
- 分页组件Ext.toolbar.Paging
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],- 第二种分页的形式
Ext.Loader.setPath('Ext.ux', '../../../extjs4/examples/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.SlidingPager'
]);
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {}) ---- 重点
})
- 第二种分页的形式
- 属性配置框面板Ext.grid.property.Grid
- 做自动生成功能时可以考虑用
- 关于表格的其他东西
- 列锁定
- {text:”age”,dataIndex:’age’,width:100,locked:true},
- 复杂表头
{
text:'other',columns:[
{text:"age",dataIndex:'age',width:100,locked : true},
{text:"int",dataIndex:'index',width:100}]
} - 字段过滤
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
//创建类
Ext.define("AM.class.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}
]
})
//view层中添加
features: [Ext.create("AM.class.filters")],
列中{filterable: true,text:"age",dataIndex:'age',width:100,filter: {type: 'numeric'}},
- 列锁定
- 代码
- app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.Loader.setPath('Ext.ux', '../../../extjs4/examples/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.SlidingPager',
'Ext.ux.grid.FiltersFeature'
]);
Ext.application({
name : 'AM',
appFolder : "app",
launch:function(){
Ext.create('Ext.container.Viewport', {
layout:'auto',
items:[{
xtype: 'userlist',
title: 'Users'
},{
xtype:'proList'
}]
});
},
controllers:[
'Users'
]
});
}) - controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist':{
edit:function(editor,e,options){
//Model
//e.record.commit(); }
},
'userlist button[id=save]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var st = gird.getStore();
st.sync();//数据与后台同步
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
model.commit();
});
}
},
'userlist button[id=delete]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.后台操作(delet)
Ext.Ajax.request({
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)
}
}
}
});
},
views:[
'proerty',
'List'
],
stores :[
"Users"
],
models :[
"User"
]
}); - model/User.js
Ext.define('AM.model.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: 'index', type: 'int',sortable : true}
]
}); - store/Users.js
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
storeId: 's_user',
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:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 500,
height: 380,
columns : [ //列模式
//{text:"Name",dataIndex:'name',width:100,locked:true},
{text:"Name",dataIndex:'name',width:100},
//{text:'others',columns:[
{text:"age",dataIndex:'age',width:100,filterable: true,filter: {type: 'numeric'}},
{text:"email",dataIndex:'email',width:250,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'index',dataIndex:'index',width:100
}
//]}
],
features: [Ext.create("AM.util.filters")],
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'},
{xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
}],
//plugins:[
// Ext.create("Ext.grid.plugin.CellEditing",{
// clicksToEdit : 2
// })
// Ext.create('Ext.grid.plugin.RowEditing', {
// clicksToEdit: 1
// })
//],
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放组的名称
dragGroup :'userlist', //拖拽组名称
dropGroup :'userlist', //释放租名称
enableDrag:true, //是否启用
enableDrop:true
})],
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i<st.getCount();i++){
st.getAt(i).set('index',i+1);
}
}
}
},
//selType:'checkboxmodel',//设定选择模式
//multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
}); - view/dd.js
Ext.define("AM.view.dd",{
extend:'Ext.grid.plugin.DragDrop',
alias: 'widget.dd',
ddGroup:'ddTree',
dragGroup :'userlist',
dropGroup :'userlist',
initComponent:function(){
this.callParent(arguments);
}
}) - view/proerty.js
Ext.define("AM.view.proerty",{
extend:'Ext.grid.property.Grid',
title: 'Properties Grid',
alias: 'widget.proList',
width: 300,
//自定义渲染的函数
customRenderers :{
'boy':function(value){
return value?'是':'否'
},
'emial-width':function(value){
return value;
}
},
source: {
'boy':false,
'emial-width':'100'
}
}) - util/filters.js
Ext.define("AM.util.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}
]
})
- app.js
tree组件
- 类结构
- Ext.panel.Panel
- Ext.panel.Table
- Ext.tree.Panel
- 和grid完全一样
- Ext.tree.Panel
- Ext.panel.Table
- Ext.panel.Panel
- 快速实现一个demo
- 主要配置项
- title、width、height、renderTo
- root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
- animate : Boolean 控制收起和展开是否有动画效果
- store: store 数据集合
- 重要事件
- itemclick
- 主要配置项
- Ext.data.TreeStore
- 代码
- app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',
appFolder : "app",
launch:function(){
Ext.create('Ext.container.Viewport', {
layout:'auto',
items: {
xtype: 'deptTree'
}
});
},
controllers:[
'deptController'
]
});
}) - controller/deptController.js
Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
"deptTree button[id=allopen]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.expandAll();
}
},
"deptTree button[id=allclose]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.collapseAll();
}
},
"deptTree button[id=add]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
if(nodes.length == 1){
var node = nodes[0];
node.appendChild({
checked:true,
text:'技术架构组',
id : '0103',
leaf:true
});
}else{
alert("请您选择一个节点");
}
}
},
"deptTree":{
itemclick:function(tree,record,item,index,e,options){
alert(record.get('id'));
}
}
});
},
views:[
'deptView'
],
stores :[
'deptStore'
],
models :[
]
}); - store/deptStore.js
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
proxy:{
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
}
}); - view/deptView.js
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
dockedItems:[{
xtype:'toolbar',
dock:'left',
//ui:'footer',
items:[
{xtype:'button',text:'add',id:'add'},
{xtype:'button',text:'copy',id:'copy'},
{xtype:'button',text:'delete',id:'delete'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展开全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore'
// root:{
// text:'root',
// id : '0',
// leaf:false,
// children:[{
// text:'技术部门',
// checked:false,
// id : '01',
// leaf:false,
// children:[{
// checked:false,
// text:'研发部',
// id : '0101',
// leaf:true
// },{
// checked:false,
// text:'实施部',
// id : '0102',
// leaf:true
// }]
// },{
// text:'后勤部门',
// id : '02',
// checked:false,
// leaf:false,
// children:[{
// text:'人事部',
// id : '0201',
// checked:false,
// leaf:true
// },{
// text:'行政部',
// id : '0202',
// checked:false,
// leaf:true
// }]
// }]
// }
});
- app.js
- 树形的拖拽
- Ext.tree.ViewDDPlugin
- alias: ‘plugin.treeviewdragdrop’,
viewConfig:{
plugins :{
ptype:'treeviewdragdrop'
}
},
- alias: ‘plugin.treeviewdragdrop’,
- 事件
listeners: {
drop: function(node, data, dropRec, dropPosition) {},
beforedrop:function(node,data,overModel,dropPosition,dropFunction,options ){ }
} - 模拟拷贝和黏贴
- 删除操作
- 多列树
- 单击树形根节点子节点也被选中
- Ext.tree.ViewDDPlugin
- 代码
- app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',
appFolder : "app",
launch:function(){
Ext.create('Ext.container.Viewport', {
layout:'auto',
items: {
xtype: 'deptTree'
}
});
},
controllers:[
'deptController'
]
});
}) - controller/deptController.js
Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'deptTree':{
checkchange : function(node,checked,options){
if(node.data.leaf == false){//不是叶子
if(checked){
//打开节点
node.expand();
//遍历孩子
node.eachChild(function(n){
n.data.checked = true;
n.updateInfo({checked:true});
})
}else{
node.expand();
node.eachChild(function(n){
n.data.checked = false;
n.updateInfo({checked:false});
})
}
}else{//单击叶子
if(!checked){
node.parentNode.data.checked = false;
node.parentNode.updateInfo({checked:false});
}
}
}
},
'deptTree button[id=delete]':{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
for(i=0;i<nodes.length;i++){
nodes[i].remove(true);
}
}
},
'deptTree button[id=copy]':{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到数据集合
var nodes = tree.getChecked();
if(nodes.length>0){
//把数据放到剪切板中
tree.setCopyNodes(Ext.clone(nodes));
alert("拷贝"+nodes.length+"个节点");
for(i=0;i<nodes.length;i++){
nodes[i].data.checked = false;
nodes[i].updateInfo();
}
}
}
},
"deptTree button[id=paste]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//被追加孩子的节点集合
var checkednodes = tree.getChecked();
if(checkednodes.length == 1){
//被追加孩子的节点
var node = checkednodes[0];
//去剪切板中区数据
var nodes = tree.getCopyNodes();
if(nodes.length>0){
for(i=0;i<nodes.length;i++){
var n = nodes[i].data;
n['id'] = n['id']+'1';
node.appendChild(n);
}
}
}else{
alert("剪切板中无数据或者你没有选择要追加孩子的节点");
}
}
},
"deptTree button[id=allopen]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.expandAll();
}
},
"deptTree button[id=allclose]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.collapseAll();
}
},
"deptTree button[id=add]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
if(nodes.length == 1){
var node = nodes[0];
node.appendChild({
checked:true,
text:'技术架构组',
id : '0103',
leaf:true
});
}else{
alert("请您选择一个节点");
}
}
}//,
// "deptTree":{
// itemclick:function(tree,record,item,index,e,options){
// alert(record.get('id'));
// }
// }
});
},
views:[
'deptView'
],
stores :[
'deptStore'
],
models :[
'deptModel'
]
}); - model/deptModel.js
Ext.define('AM.model.deptModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string',sortable : true},
{name: 'id', type: 'string',sortable : true}
]
}); - store/deptStore.js
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
model:'AM.model.deptModel',
proxy:{
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
}
}); - view/deptView.js
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 350,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
config:{
copyNodes:''//他充当剪切板的作用
},
columns:[
{
xtype:'treecolumn',
text:'text',
writh:150,
dataIndex:'text'
},{
text:'info',
dataIndex:'id'
}
],
viewConfig:{
plugins :{
ptype:'treeviewdragdrop',
appendOnly : true
},
listeners:{
drop:function( node, data, overModel, dropPosition, options){
//ajax的操作把数据同步到后台数据库
alert("把: "+data.records[0].get('text')+" 移动到: "+overModel.get('text'));
},
beforedrop:function( node, data, overModel, dropPosition, dropFunction, options){
// if(overModel.get("leaf")){
// overModel.set('leaf',false)
// }
}
}
},
dockedItems:[{
xtype:'toolbar',
dock:'left',
items:[
{xtype:'button',text:'add',id:'add'},
{xtype:'button',text:'copy',id:'copy'},
{xtype:'button',text:'delete',id:'delete'},
{xtype:'button',text:'paste',id:'paste'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展开全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore'
});
tree+grid 部门管理案例
- 简单布局应用
- border布局、tab布局、fit布局
- 表格的操作
- 列表的CRUD
- 控制树形节点的CRUD
- 树形的操作
- 自身的一些功能
- 过滤grid的数据
- 制作流程
- 整体框架搭建
- 表格视图搭建
- 表格CRUD
- 树形视图搭建
- 树形功能实现
- tree和grid整合
- 完善
- 公共函数的抽取
- 完成保存操作
- 完成批量删除操作
- 进一步完善添加操作
- 解决网友提出后台一个pojo前台就要写一个model的问题(缓存,工厂,Ajax)
- 树形过滤表格(伪代码和思路)
- 代码
- app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',
appFolder : "app",
launch:function(){
Ext.create('Ext.container.Viewport', {
padding : "15 15 15 15",
items: {
width: 750,
height: 530,
xtype: 'mainlayout'
}
});
},
controllers:[
'DeptController'
]
});
}) - controller/DeptController.js
/**
* ClassName 部门管理控制器
*/
Ext.define("AM.controller.DeptController",{
extend:'Ext.app.Controller',
GridDoActionUtil:Ext.create("AM.util.GridDoActionUtil"),
init: function(){
this.gerGridObj = function(buttion){
return buttion.ownerCt.ownerCt;
};
this.getTreeObj = function(buttion){
return buttion.ownerCt.ownerCt.ownerCt.ownerCt
.child('#west-tree').child("#dept-tree");
};
this.control({
'depTree':{
itemclick:function(tree,record,item,e,opti){
/**
* 1.得到单击节点的ID
* 2.发到后台重新查询数据load表盒 where id="A0"
* 3.oracle 那就用递归查询
* http://www.uspcat.com/myknowledgebase/oracle/oracl_digui.htm
*/
//alert(record.get("id"))
/**
* 1.得到节点ID和子节点的ID
* 2.发到后台重新查询数据load表盒 where id in ("A0","A01010");
*/
record.collapse(function(){
return true;
},function(node){
console.log(node);
})
//grid.load({whereSql:'in ('A0')'})
}
},
'deptlist button[id=delete]':{
click:function(deleteButton){
var grid = this.gerGridObj(deleteButton);
var tree = this.getTreeObj(deleteButton);
this.GridDoActionUtil.doDelete(grid,tree);
}
},
//第二讲中修改
'deptlist button[id=save]':{
click:function(saveButton){
var grid = this.gerGridObj(saveButton);
var tree = this.getTreeObj(saveButton);
this.GridDoActionUtil.doSave(grid,tree);
}
},
//设定列表添加按钮的事件
'deptlist button[id=add]':{
click:function(addButton){
//得到数据表格的对象
var grid = this.gerGridObj(addButton);
var modelObj = {
text: '',
id: 'A01',
info :'',
orderIndex:0,
manager:'',
nodeType:'ROOT',
leaf : true
};
//得到tree
var tree = this.getTreeObj(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("AM.model.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:'AM.model.DeptModel',
model : modelFactory.getModelByName("AM.model.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:'Ext.grid.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 = Ext.create("Ext.grid.plugin.CellEditing");
this.plugins = [this.editing];
this.callParent(arguments)
}
}); - view/DeptTree.js
Ext.define("AM.view.DeptTree",{
extend:'Ext.tree.Panel',
alias:'widget.depTree',
rootVisible:false,//不展示ROOT
displayField:'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("AM.model.modelFactory",{
//数据类模型的集合
models:new Ext.util.MixedCollection(),
//字段集合
fields:new Ext.util.MixedCollection(),
getModelByName:function(modelName){
//1.声明类,返回类的ClassName
if(this.models.containsKey(modelName)){
return modelName;
}else{
//ajax拿到我们的字段集合
var fields = [];
if(this.fields.containsKey(modelName)){
fields = this.fields.containsKey(modelName)
}else{
Ext.Ajax.request({
url:'/extjs/extjs!getModelFields.action?modelName='+modelName,
method:'POST',
timeout:4000,
async:false,//跟关键 我不需要异步操作
success:function(response,opts){
fields = eval(response.responseText);
}
});
}
this.fields.add(modelName,fields); var newModel = Ext.define(modelName,{
extend:'Ext.data.Model',
fields:fields
});
this.models.add(modelName,newModel);
return modelName;
}
}
});
var modelFactory = Ext.create('AM.model.modelFactory',{}); - util/GridDoActionUtilview.js
Ext.define("AM.util.GridDoActionUtil",{
doDelete:function(grid,treeObj){
if(!grid){
alert("参数传递不正确");
return;
}
//得到数据集合
var store = grid.getStore();
var records = grid.getSelectionModel().getSelection();
var data = [];
Ext.Array.each(records,function(model){
data.push(Ext.JSON.encode(model.get('id')));
});
if(data.length > 0){
Ext.Ajax.request({
url:store.getProxy().api['remove'],
params:{data:"["+data.join(",")+"]"},
method:'POST',
timeout:4000,
success:function(response,opts){
Ext.Array.each(records,function(model){
//tree删除节点
var node = treeObj.getStore().getNodeById(model.get('id'));
var parentNode = node.parentNode;
try{
node.remove(true);
if(parentNode){
if(!parentNode.getChildAt(0)){
parentNode.data['leaf'] = true;
parentNode.updateInfo();
}
}
}catch(e){
console.log(e);
}
//表格删除数据
store.remove(model);
})
}
})
} },
/**
* 列表的批量修改
* @param {} grid
* @param {} treeObj
*/
doSave:function(grid,treeObj){
if(!grid){
alert("参数传递不正确");
return;
}
//得到数据集合
var store = grid.getStore();
//records 被你修改过的数据
var records = store.getUpdatedRecords();
var data = [];
Ext.Array.each(records,function(model){
data.push(Ext.JSON.encode(model.data));
});
//异步的操作数据
// store.getProxy().update(new Ext.data.Operation({
// action:'update'
// }));
if(data.length > 0){
Ext.Ajax.request({
url:store.getProxy().api['update'],
params:{data:"["+data.join(",")+"]"},
method:'POST',
timeout:4000,
success:function(response,opts){
console.log(response.responseText);
Ext.Array.each(records,function(model){
var node = treeObj.getStore().getNodeById(model.get('id'));
node.data['text'] = model.get('text');
node.updateInfo();
//取消小箭头
model.commit();
});
}
});
}
},
/**
* 树形维护表格的插入操作
* @param {} grid
* @param {} modelObj
* @param {} treeObj
*/
doInsert:function(grid,modelObj,treeObj){
if(!(grid && modelObj)){
alert("参数传递不正确");
return;
}
//得到表格数据集合
var store = grid.getStore();
//得到目前表格的数据集合长度
var storeCount = store.getCount();
//得到编辑插件
var edit = grid.editing;
//得到数据模型
var model = store.model;
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 = treeObj.getStore().getRootNode();
rootNode.appendChild({
id:modelObj["id"],
text:modelObj["text"],
leaf:modelObj["leaf"]
});
}
}else{
//得到被选择的数据集合
var checkedRecords = grid.getSelectionModel().getSelection();
if(checkedRecords.length == 1){
var parentRecord = checkedRecords[0];
modelObj['nodeType'] = 'GENERAL';
//第二讲中改********************************
modelObj['id'] = 'A010101';
//得到父节点
var parentNode = treeObj.getStore().getNodeById(parentRecord.get('id'));
try{
parentNode.data['leaf'] = false;
parentNode.updateInfo();
//给它加一个孩子节点
parentNode.appendChild({
id:"A010101",
text:'',
leaf:true
});
parentNode.expand();
}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;
}
- app.js
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.action.Submit ajax方式提交
- Ext.form.action.Action
- 字段的控制
- 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.Picker 选择器
- Ext.form.field.Checkbox 选择框方式的
- Ext.form.field.Radio 单选框
- Ext.form.field.Hidden 特殊的-隐藏字段
- Ext.form.field.HtmlEditor 特殊的-文本编辑框
- Ext.form.field.Base 是跟类
- 其中夹杂布局的类
- Ext.form.FieldContainer
- Ext.form.CheckboxGroup
- Ext.form.RadioGroup
- Ext.form.CheckboxGroup
- Ext.form.Label
- Ext.form.Labelable
- Ext.form.FieldSet
- Ext.form.FieldContainer
- 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()用法
- Ext.form.Panel
- 代码
Ext.onReady(function(){
//-------------------------------------
Ext.define("person",{
extend:'Ext.data.Model',
fields:[
{name:'userName',type:'auto'},
{name:'password',type:'auto'}
]
});
var p = new person({userName:'yunfengcheng2008@126.com',password:"123456"});
//-------------------------------------
var passTest = /[123]/i
Ext.apply(Ext.form.field.VTypes,{
myPass :function(val,field){
return passTest.test(val);
},
myPassText:"密码格式错误",
myPassMask:/[123]/i
});
//-------------------------------------
var textForm = Ext.create("Ext.form.Panel",{
title : "form中文本框实例",
bodyStyle :'padding:5 5 5 5',
frame : true,
height : 120,
width : 300,
id:'my_form',
renderTo:'formDemo',
defaultType:'textfield',
defaults:{
labelSeparator :": ",
labelWidth : 50,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
fieldLabel : "Name",
name:'userName',
id:'userName',
selectOnFocus : true,
regex:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
regexText:"请用邮箱来注册",
grow:false//是否在这个表单字段规定长度内自动根据文字的内容进行伸缩
},{
fieldLabel : "Pass",
name:'password',
id:'password',
inputType:'password',
vtype:'myPass'
}],
buttons: [
{text:'登陆系统',handler:function(b){
//我没想通过base来得到数值,那我们就要先得到base
//那么base我们有什么办法来的到呢?
//很简单 通过 Ext.form.Basic(findField( String id ) : void)
//那么Ext.form.Basic如何得到呢?
//很简单Ext.form.Panel (getForm( ))
//Ext.form.Panel如何得到呢?
//很简单 1>通过ID来的
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
var nameField = basic.findField("userName");
var nameValue = nameField.getValue();
alert(nameValue);
}},{
text:'重置',handler:function(b){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
basic.reset();
}
},{
text:'装在数据',handler:function(b){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
basic.loadRecord(p);
}
}
]
})
});- 数字框
- CheckBox,radio
- CheckGroup,RadioGroup
- Trigger 触发器字段
- 他指派了一个没有任何动作的接触按钮,需要给他加上不同的动作
- TextArea.js
Ext.onReady(function(){ var textFomr = Ext.create("Ext.form.Panel",{
title : "form中文本框大文本的实例",
bodyStyle :'padding:5 5 5 5',
frame : true,
height : 250,
width : 400,
id:'my_form',
renderTo:'formDemo',
defaultType:'textfield',
defaults:{
labelSeparator :": ",
labelWidth : 50,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
fieldLabel:'Name',
name:'userName',
id:'userName',
selectOnFocus:true
},{
xtype:'textareafield',
width:300,
height:150,
name:'info',
fieldLabel:'Info'
}],
buttons: [
{text:'登陆系统',handler:function(b){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
console.log(basic.getValues());
}}]
})
}) - number.js
Ext.onReady(function(){ var textFomr = Ext.create("Ext.form.Panel",{
title : "form中文本框数字框的实例",
bodyStyle :'padding:5 5 5 5',
frame : true,
height : 250,
width : 400,
id:'my_form',
renderTo:'formDemo',
defaultType:'numberfield',
defaults:{
labelSeparator :": ",
labelWidth : 80,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
fieldLabel:'整数微调',
allowDecimals:false,//叫你不能输入小数
name:'num1',
id:'num1'
},{
fieldLabel:'整数',
allowDecimals:false,//叫你不能输入小数
name:'num2',
id:'num2',
hideTrigger : true
},{
fieldLabel:'小数',
name:'num3',
id:'num3',
emptyText :'请输入小数',
hideTrigger : false,
decimalPrecision:3
},{
fieldLabel:'定界小数',
name:'num3',
id:'num3',
minValue:10,
maxValue:100,
emptyText :'请输入小数',
hideTrigger : false,
decimalPrecision:3
},{
fieldLabel:'输入限定',
name:'num4',
id:'num4',
baseChars:'01',
hideTrigger : true
},{
fieldLabel:'限定步长',
name:'num5',
id:'num5',
step:0.8,
hideTrigger : false,
value:'20'
},{
fieldLabel:'只读字段',
name:'num6',
id:'num6',
step:0.8,
hideTrigger : false,
value:'20',
//readOnly:true
disabled : true
}],
buttons: [
{text:'登陆系统',handler:function(b){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
console.log(basic.getValues());
}}]
})
}) - checkbox.js
Ext.onReady(function(){
var textFomr = Ext.create("Ext.form.Panel",{
title : "form中文本框选框的实例",
bodyStyle :'padding:5 5 5 5',
frame : true,
height : 250,
width : 400,
id:'my_form',
renderTo:'formDemo',
defaults:{
labelSeparator :": ",
labelWidth : 50,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'radiofield',
boxLabel :'男',
inputValue:'m',
fieldLabel:'性别',
checked:true,
name:'sex'
},{
xtype:'radiofield',
boxLabel :'女',
inputValue:'w',
fieldLabel:'性别',
name:'sex'
},{
xtype:'checkboxfield',
inputValue:'1',
name:'hobby',
boxLabel:'唱歌',
fieldLabel:'爱好'
},{
xtype:'checkboxfield',
inputValue:'2',
name:'hobby',
boxLabel:'看书',
fieldLabel:'爱好'
},{
xtype:'checkboxfield',
inputValue:'3',
name:'hobby',
checked:true,
boxLabel:'编程',
fieldLabel:'爱好'
},{
xtype:'checkboxfield',
inputValue:'4',
name:'hobby',
boxLabel:'交友',
fieldLabel:'爱好'
}],
dockedItems:[{
xtype:'toolbar',
dock:'top',
items:[{
text:'选择全部的爱好',
iconCls:'table_comm',
handler:function(){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
var fields = basic.getFields();
fields.each(function(field){
if("hobby" == field.getName()){
field.setValue(true)
}
})
}
}]
}],
buttons: [
{text:'登陆系统',handler:function(b){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
console.log(basic.getValues());
}}]
})
}) - checkboxgroup.js
Ext.onReady(function(){
var textFomr = Ext.create("Ext.form.Panel",{
title : "form中文本框选框的实例",
bodyStyle :'padding:5 5 5 5',
frame : true,
height : 250,
width : 400,
id:'my_form',
renderTo:'formDemo',
defaults:{
labelSeparator :": ",
labelWidth : 50,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'radiogroup',
fieldLabel:'性别',
columns:2,
items:[{
xtype:'radiofield',
boxLabel :'男',
inputValue:'m',
checked:true,
name:'sex'
},{
xtype:'radiofield',
boxLabel :'女',
inputValue:'w',
name:'sex'
}]
},{
xtype:'checkboxgroup',
fieldLabel:'爱好',
width:335,
columns:4,
items:[{
xtype:'checkboxfield',
inputValue:'1',
name:'hobby',
boxLabel:'唱歌'
},{
xtype:'checkboxfield',
inputValue:'2',
name:'hobby',
boxLabel:'看书'
},{
xtype:'checkboxfield',
inputValue:'3',
name:'hobby',
checked:true,
boxLabel:'编程'
},{
xtype:'checkboxfield',
inputValue:'4',
name:'hobby',
boxLabel:'交友'
}]
}],
dockedItems:[{
xtype:'toolbar',
dock:'top',
items:[{
text:'选择全部的爱好',
iconCls:'table_comm',
handler:function(){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
var fields = basic.getFields();
fields.each(function(field){
if("hobby" == field.getName()){
field.setValue(true)
}
})
}
}]
}],
buttons: [
{text:'登陆系统',handler:function(b){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
console.log(basic.getValues());
}}]
})
}) - Trigger.js
Ext.onReady(function(){ var textFomr = Ext.create("Ext.form.Panel",{
title : "form中文本框触发器的实例",
bodyStyle :'padding:5 5 5 5',
frame : true,
height : 250,
width : 400,
id:'my_form',
renderTo:'formDemo',
defaults:{
labelSeparator :": ",
labelWidth : 50,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'triggerfield',
fieldLabel:'Name',
name:'userName',
id:'userName',
onTriggerClick:function(e){
var formObj = Ext.getCmp("my_form");
var basic = formObj.getForm();
console.log(basic.getValues());
}
}]
})
})- comboBox组件
- Ext.form.field.ComboBox
- Ext.view.BoundList 约束列表
- 本地下拉框
- Time
- Date
- comboBox组件
- combobox.js
Ext.onReady(function(){
Ext.QuickTips.init();
//部门类
Ext.define("department",{
extend:'Ext.data.Model',
fields:[
{name:'name'},
{name:'id'}
]
});
var st = Ext.create("Ext.data.Store",{
model:'department',
data:[
{name:'销售部',id:'001'},
{name:'人事部',id:'002'},
{name:'研发部',id:'003'},
{name:'产品部',id:'004'},
{name:'实施部',id:'0`05'},
{name:'法务部',id:'006'}
]
});
Ext.create("Ext.form.Panel",{
title:'本地combobox实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'combobox',
listConfig:{//控制下拉列表的样式
emptyText:'没有找到匹配的数值',
maxHeight:200
},
fieldLabel:'选择部门',
name:'post',
queryMode:'local',//[local|remot]
store:st,
valueField:"id",
displayField :'name',
forceSelection:true,//不运行使用数据集合中没有的数值
typeAhead : true,
value:'001'
}]
});
}); - date.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地combobox实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'datefield',
fieldLabel:'工作日',
minValue:'01/01/2011',
maxValue:'31/12/2011',
disabledDays :[0,6],
disabledDates:['11年11月08日'],
disabledDatesText:'这个日期你不能选择'
}]
});
}); - synccombobox.js
Ext.onReady(function(){
Ext.QuickTips.init();
//部门类
Ext.define("department",{
extend:'Ext.data.Model',
fields:[
{name:'name'},
{name:'id'},
{name:'c'}
]
});
var st = Ext.create("Ext.data.Store",{
model:'department',
pageSize:4,
proxy:{
type:'ajax',
url:'/extjs/extjs!getComboBox.action'
}
});
Ext.create("Ext.form.Panel",{
title:'本地combobox实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:470,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 300,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left',
pageSize:4
},
items:[{
xtype:'combobox',
listConfig:{//控制下拉列表的样式
emptyText:'没有找到匹配的数值',
maxHeight:200,
getInnerTpl :function(){
return "<div class='{c}'>{name}.{id}</div>";
}
},
fieldLabel:'城市',
name:'post',
queryMode:'remot',//[local|remot]
store:st,
valueField:"id",
minChars:1,
triggerAction :'all',
queryDelay : 400,
queryParam:'whereSql',
multiSelect:true,//允许多选
displayField :'name'//,
//forceSelection:true,//不运行使用数据集合中没有的数值
//typeAhead : true,
//value:'001'
}]
});
}); - time.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地combobox实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'timefield',
fieldLabel:'上班时间',
minValue:'9:00',
maxValue:'18:00',
minText:'时间要大于{0}',
maxText:'时间要小于{0}',
format:'G时',
increment:60,
invalidText:'时间格式错误',
pickerMaxHeight :100
}]
});
});- 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
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地FieldContainer实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:570,
defaults:{
msgTarget : 'side',
labelAlign:'left'
},
frame:true,
items: [{
xtype: 'fieldcontainer',
fieldLabel: '人员信息',
combineErrors : true,//是否合并展示错误信息
combineLabels: true,//合并展示标签的信息,配合其他使用
labelConnector :',',
layout: {
type:'hbox',//横排布局(这个起了关键性在作用)
align:'middle'//垂直居中
},
fieldDefaults:{
hideLabel:true,//以藏label
allowBlank:false//不允许是空
},
defaultType:'textfield',
items: [{
xtype:'label',
forId:'name',
text:'姓名'
},{
fieldLabel: 'name',//虽然被隐藏但是很有用(展示错误信息)
name: 'name',
inputId:'name'
},{
xtype:'label',
forId:'photo',
text:'电话'
},{xtype: 'displayfield', value: ' ( '},{
name: 'photo',
fieldLabel: 'photo',
inputId:'photo'
},{xtype: 'displayfield', value: ' ) '}]
}],
buttons: [{
text: '提交',
handler: function() {
//up的源码讲解
this.up('form').getForm().submit({
params: {
info: 'age是隐藏字段'
}
});
}
}]
});
}); - 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="com.oreilly.servlet.*"%>
<%
//----------------------------------------
//----------------------------------------
String root = request.getSession().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 = multi.getFileNames();
//遍历返回的枚举类型，COS可以上传多个文件，当表单中有多个文本域标签时，使用while关键字遍历.
long l = 0L;
String fileType = null;
String fileName = null;
while(filesName.hasMoreElements()){
//当发现枚举类型中包含文件对象，获取文件对象在枚举中的名字
String fname = (String)filesName.nextElement();
//通过名字获取文件，返回java文件对象
File file = multi.getFile(fname);
//判断是否获得到文件
if(file != null){
//获取文件的真实名字(以便能存储到数据库中)
fileName = multi.getFilesystemName(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");
response.getWriter().print("{'address':'"+RandomFileRenamePolicy.fp+"','docName':'"+RandomFileRenamePolicy.fn+"','fileType':'"+fileType+"','docCode':'"+fileName+"','size':'"+l+"','success':true,'message':'上传成功','ids':'"+fieldIds+"'}");
%> - Display.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地Display实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'displayfield',
name:'name',
value:'uspcat.com',
fieldLabel:'展示'
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({
params:{
info:'age是隐藏字段'
}
});
}
}]
});
}) - FieldContainer.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地FieldContainer实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:500,
frame:true,
defaults:{
msgTarget:'side',
labelAlign:'left'
},
items:[{
xtype:'fieldcontainer',
layout:{
type:'hbox',
align:'middle'
},
combineLabels:true,
combineErrors:true,
fieldDefaults:{
hideLabel:true,//默认字段会隐藏lebel
allowBlank:false
},
defaultType:'textfield',
items:[{
xtype:'label',
forId:'name',
text:'姓名'
},{
fieldLabel:'name',
name:'name',
inputId:'name'
},{
xtype:'label',
forId:'phone',
text:'电话'
},{
fieldLabel:'phone',
name:'phone',
inputId:'phone'
}]
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({
params:{
info:'age是隐藏字段'
}
});
}
}]
});
}) - FieldSet.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地FieldSet实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:300,
width:270,
frame:true,
items:[{
title:'组合',
xtype:'fieldset',
collapsible:true,//可以展示伸缩的按钮
defaultType:'textfield',
defaults:{
anchor:'95%'
},
layout:'anchor',
items:[{
fieldLabel:'Name',
name:'name'
},{
fieldLabel:'Email',
name:'Email'
}]
},{
title:'组合2',
xtype:'fieldset',
checkboxToggle:true,//启用复选框
collapsible:true,//可以展示伸缩的按钮
defaultType:'textfield',
collapsed:true,//true默认set是收起的
defaults:{
anchor:'95%'
},
layout:'anchor',
items:[{
fieldLabel:'PASS',
name:'PASS'
},{
fieldLabel:'INFO',
name:'INFO'
}]
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({
params:{
info:'age是隐藏字段'
}
});
}
}]
});
}) - File.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地File实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
items:[{
xtype:'filefield',
name:'photo',
fieldLabel:'照片',
labelWidth:50,
msgTarget:'side',
allowBlank:false,
anchor:'98%',
buttonText:'请选中文件'
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({
url:'/platform/assistJsp/upload/cosupload.jsp',
waitMsg:'文件上传中',
success:function(){
Ext.Msg.alert("success","文件上传成功");
}
});
}
}]
});
}) - hidden.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地hiddenfield实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'textfield',
name:'name',
fieldLabel:'name',
value:'USPCAT.COM'
},{
xtype:'hiddenfield',
name:'age',
value:'1'
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({
params:{
info:'age是隐藏字段'
}
});
}
}]
});
}) - HtmlEditor.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地htmleditor实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:400,
width:600,
frame:true,
items:[{
xtype:'htmleditor',
name:'HTML',
height:320,
width:580,
fontFamilies :['宋体','黑体','楷体'],
defaultLinkValue :'http://www.uspcat.com'
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({
params:{
info:'age是隐藏字段'
}
});
}
}]
});
}) - Label.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地Label实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
items:[{
xtype:'label',
name:'name',
text:'展示',
forId :'myname',
overCls:'a'
},{
xtype:'textfield',
name:'age',
value:'1',
inputId:'myname',
hideLabel:true
}]
});
})- 从Grid中装载数据 basic.loadRecord(Model);
- 服务器装载数据
- 异步装载
- 表单的提交操作
- Ajax提交数据
- 传统方式提交
- load.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地load实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:300,
width:400,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 300,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
fieldLabel:'ID',
xtype:'textfield',
name:'userId',
value:'001'//硬编码写值
},{
fieldLabel:'NAME',
xtype:'textfield',
name:'userName',
value:'uspcat.com'//硬编码写值
},{
fieldLabel:'AGE',
xtype:'numberfield',
name:'userAge',
value:'1'//硬编码写值
},{
xtype:'textareafield',
width:300,
height:150,
name:'info',
fieldLabel:'INFO'
}],
buttons:[{
text:'提交数据',
handler:function(){
//得到form
var basic = this.up("form").getForm();
basic.submit({
clientValidation: true,//要经过客户端验证的
url: '/extjs/extjs!getFormValues.action',
method:'POST',
success:function(){
Ext.Msg.alert('提示',"提交数据");
}
});
}
},{
text:'加载远程数据',
handler:function(){
//得到form
var basic = this.up("form").getForm();
//得到userId
var userId = basic.findField("userId").getValue();
basic.load({
params:{userId:userId},
url:'/extjs/extjs!getFormValues.action',
method:'POST',
success:function(form,action){
Ext.Msg.alert('提示',"加载成功");
},
failure:function(form,action){
Ext.Msg.alert('提示',"失败原因是: "+action.result.errorMessage);
}
}); }
}]
});
});
panel与layout
- 面板
- 类结构
- Ext.Base
- Ext.AbstractComponent
- Ext.Component
- Ext.container.AbstractContainer
- Ext.container.Container
- Ext.panel.AbstractPanel
- Ext.panel.Panel (是以前版本的Ext.Panel类)
- Ext.panel.AbstractPanel
- Ext.container.Container
- Ext.container.AbstractContainer
- Ext.Component
- Ext.AbstractComponent
- Ext.Base
- 常见的子类
- Ext.window.Window 控制窗口
- Ext.form.Panel 控制form
- Ext.panel.Table 控制grid
- Ext.tab.Panel 控制工具条
- Ext.menu.Menu 控制菜单
- Ext.tip.Tip
- Ext.container.ButtonGroup
- 组成面板的部件
- 底部工具栏,顶部工具栏,面板头部,面板底部,面板体
- 类结构
- 布局
- Auto自动布局[Ext.layout.container.Auto]
- 组件没有指定任何布局方式的时候Auto布局就是默认的布局方式
- 他采用最原始的HTML流式排版的布局方式
- Fit自适应布局[Ext.layout.container.Fit]
- 他是他的(第一个也是唯一个)子元素填满自身的body
- Accordion折叠(手风琴)布局[Ext.layout.container.Accordion]
- 他是初始化多个版面,当一个版面处于打开状态下,其他版面就会处于收起状态
- Card卡片布局[Ext.layout.container.Card]
- 和折叠布局不同之处在于他是自定义按钮来切换
- Anchor锚点布局[Ext.layout.container.Anchor]
- 根据容器的大小为其子元素进行的布局和定位
- 百分比
- 偏移量
- 参考边
- 根据容器的大小为其子元素进行的布局和定位
- Absolute绝对定位[Ext.layout.container.Absolute]
- 多选框布局Ext.layout.container.CheckboxGroup
- Column列布局[Ext.layout.container.Column]
- 列风格布局,每一列的宽度可以根据百分比或者固定数值来控制
- Table表格布局[Ext.layout.container.Table]
- 和传统的HTML布局方式一样的布局使用方法
- Border边界布局[Ext.layout.container.Border]
- 可以控制上,下,左,右,中
- 盒布局
- Ext.layout.container.Box
- Ext.layout.container.VBox 竖排(竖直盒)
- Ext.layout.container.HBox 横排(水平盒)
- 主要参数
- Box
- flex 具有配置flex的子项,会根据占有总量的比之来决定自己的大小
- pack 控制子元素展示位置[start左面(这时候flex生效),center(中间),end(右面)]
- padding 边距
- HBox
- align[top,middle,stretch,stretchmax]
- VBox
- align[left,center,stretch,stretchmax]
- Box
- Ext.tab.Panel
- 选项卡布局
- 特殊(他不在布局的包下面)
- Auto自动布局[Ext.layout.container.Auto]
- panel.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel',{
title: '[01]面板的头部[Ext.panel.Header]',
width: 500,
bodyPadding : 10,//边距
height: 400,
hideCollapseTool:false,
collapsible :true,
//animCollapse : false,//控制动画
//frame : true,//渲染面板
autoLoad:'/Learning-extjs4.0/lesson/26/ass.html',//只要是不是null自动加载内容
html: '<p>[02]面板体</p>',//和上面的属性是冲突的
autoScroll:true,//自动滚动条
closable:true,//运行客户关闭
closeAction:'destroy',//设置关闭动作[destroy|hide]
bodyStyle: {
background: '#ffc'
},
renderTo: 'demo',
tbar: [
{ xtype: 'button', text: '[03]顶部工具栏' }
],
bbar: [
{ xtype: 'button', text: '[04]底部工具栏 ' }
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: '[05]面板底部',
handler:function(b){
b.up("panel").removeAll(true)//自动销毁
}
}
]
}],
tools:[{
type:'refresh',
qtip: '刷新'
},{
type:'help',
qtip: '帮助'
},{
id:'next',
handler: function(event, toolEl, panel){
panel.up("panel").insert(0,{
xtype:'panel',
width:100,
height:100,
bodyStyle: {
background: 'red'
}
})
}
}]
});
});
/**
close、collapse、down、expand、gear、help、left、maximize、minimize
minus、move、next、pin、plus、prev、print、refresh、resize、restore
right、save、search、toggle、unpin、up
*/ - auto.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 800,
height: 280,
title: "AutoLayout布局的面板",
layout: 'auto',//设置布局
renderTo: 'demo',
items: [{
xtype: 'panel',
title: '第一个面板',
width: '75%', //站总体宽度的75%
height: 90
},{
xtype: 'panel',
title: '第二个面板',
width: '75%',
height: 90
},{
xtype: 'panel',
title: '第三个面板',
width: '99%',
height: 90
}]
});
}) - fit.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "AutoLayout布局的面板",
layout: 'fit',//设置布局
renderTo: 'demo',
items: [{
xtype: 'panel',
title: '第一个面板'
},{
xtype: 'panel',
title: '第二个面板'
}]
});
}) - Accordion.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel', {
title: 'Accordion布局',
width: 300,
height: 300,
layout:'accordion',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '面板1'
},{
title: 'Panel 2',
html: '面板2'
},{
title: 'Panel 3',
html: '面板3'
}],
renderTo: 'demo'
});
}); - card.js
Ext.onReady(function(){
Ext.QuickTips.init();
var navigate = function(panel, direction,btn){
var layout = panel.getLayout();
layout[direction]();
//next(),prev()
//card的关键函数next( ) : Ext.Component,prev( ) : Ext.Component
//getNext( ) : Ext.Component,getPrev( ) : Ext.Component
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.Panel', {
width: 500,
height: 280,
layout: 'card',//设置布局
activeItem:0,//默认展示的子节点索引
renderTo: 'demo',
items: [{
id: 'card-0',
xtype: 'panel',
title: '第一个面板',
html:'第一个面板'
},{
id: 'card-1',
xtype: 'panel',
title: '第二个面板',
html:'第二个面板'
},{
id: 'card-3',
xtype: 'panel',
title: '第三个面板',
html:'第三个面板'
}],
index:1,//自定义索引
titleInfo: "cardt布局的面板",
listeners: {
render:function(){
var panel = this;
panel.setTitle(panel.titleInfo+"("+(this.activeItem+1)+"/"+panel.items.length+")");
}
},
bbar: [{
id: 'move-prev',
text: '上一页',
handler: function(btn) {
var panel = btn.up("panel");
panel.index = panel.index-1;
panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");
navigate(panel, "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: '下一页',
handler: function(btn) {
var panel = btn.up("panel");
panel.index = panel.index+1;
panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");
navigate(panel, "next");
}
}
]
});
}) - anchor.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 500,
height: 500,
title: "Anchor布局的面板",
layout: 'anchor',//设置布局
renderTo: 'demo',
items: [{
xtype: 'panel',
title: '75% 宽 and 20% 高',
anchor: '75% 20%'
},{
xtype: 'panel',
title: '偏移量 -300 宽 & -200 高',
anchor: '-300 -200'
},{
xtype: 'panel',
title: '综合使用 -250 宽 20% 高',
anchor: '-250 20%'
}]
});
}) - Absolute.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 200,
height: 200,
title: "absolute布局的面板",
layout: 'absolute',//设置布局
renderTo: 'demo',
items:[{
title: '子面板',
x: 50,
y: 50,
width: 100,
height: 100,
html: '定位在 x:50, y:40'
}]
});
}) - column.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 1000,
height: 200,
title: "column布局的面板",
layout: 'column',//设置布局
renderTo: 'demo',
items: [{
title: '宽 = (总宽度-250)*25%',
columnWidth: .25,//这个布局特有的写法
html: 'Content'
},{
title: '宽 = (总宽度-250)*75%',
columnWidth: .75,
html: 'Content'
},{
title: '宽 = 250px',
width: 250,
html: 'Content'
}]
});
}) - Table.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 400,
height: 230,
title: "table布局的面板",
layout: {
type:'table',
columns:4//四列
},//设置布局
defaults:{
width: 100,
height: 100,
frame:true
},
renderTo: 'demo',
items: [{
title: "1",
width:300,//这个布局特有的写法
colspan: 3//跨三列
},{
title: '2',
height:200,
rowspan:2//跨两行
},{
title: '3'
},{
title: '4'
},{
title: '5'
}]
});
}) - Border.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.container.Viewport', {//一般是这样配合使用的
//width: 1000,
//height: 800,
//renderTo: Ext.getBody(),
title: "table布局的面板",
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: '上面north',
region: 'north',
height: 100,
cmargins: '5 0 0 0'
},{
title: '下面south',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0'
},{
title: '左面west',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
},{
title: '中间Content',
collapsible: false,
region:'center',
margins: '5 0 0 0'
},{
title: '右面east',
width: 175,
region:'east',
margins: '5 0 5 5'
}]
});
}) - Box.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 400,
height: 230,
renderTo: Ext.getBody(),
title: "Vbox布局的面板",
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', height:150},
{html:'panel 3', flex:2}
]
});
}) - tab.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.tab.Panel', {
width: 400,
height: 230,
renderTo: Ext.getBody(),
items: [{
title: '第一个选项卡'
}, {
title: '第二个选项卡'
}],
buttons:[{
text:'增加选项卡',
handler:function(btn){
var panel = btn.up("tabpanel");
var index = panel.items.length+1;
var tabPage = panel.add({
title: '第'+index+'个选项卡',
html:'我新添加的tab',
closable:true
});
panel.setActiveTab(tabPage);//启用激活他
}
}]
});
})
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
- axes 轴
- Numeric.js
var dataStore = Ext.create("Ext.data.Store",{
fields:[
'name','data'
],
data:[
{name:'0~10岁',data:120},
{name:'11~18岁',data:170},
{name:'19~24岁',data:175}
]
});
var b1 = Ext.create("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.setTitle(storeItem.get('name') + ': ' +
storeItem.get('data') + 'CM');
}
}
}]//序列
}]
}); - Column.js
//定义数据集合
var columnStore1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:"0~10岁",data:20},
{name:"11~18岁",data:60},
{name:"19~24岁",data:30}
]
});
var b2 = Ext.create('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.setTitle(storeItem.get('name') + ': '
+ storeItem.get('data') + ' 名');
}
},
//格式化
renderer: function(sprite, record, attr, index, store){
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('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: { //控制柱形图label
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
}
}); - line.js
//定义数据集合
var columnStore2 = Ext.create('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 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
closeAction:'hide',
title: 'Line Chart',
renderTo: Ext.getBody(),
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: [{//序列1
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',//展示在图例上的
title :'语文',
markerConfig: {//标记配置
type: 'cross',//交叉
size: 4,
radius: 4,
'stroke-width': 0
}
},{//序列2
type: '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 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:"0~10岁",data:20},
{name:"11~18岁",data:60},
{name:"19~24岁",data:30}
]
});
var b4 = Ext.create('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 = Ext.getCmp('chartCmp');
//设置图标序列的模式
chart.series.first().donut = pressed ? 35 : false;//内弧度
chart.refresh();
}
}],
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 += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': '
+ Math.round(storeItem.get('data')/total*100)
+ '%');
}
},
highlight: {//高亮
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
}); - Bar.js
var columnStore6 = Ext.create('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 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Bar Renderer',
renderTo: Ext.getBody(),
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 = (record.get('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
//Ext.onReady(function () {
var columnStore7 = Ext.create('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 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
renderTo: Ext.getBody(),
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 = Ext.getCmp('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(加)
Ext.require('Ext.chart.*');
Ext.require('Ext.data.*');
Ext.require('Ext.Window');
Ext.require('Ext.layout.container.Fit');
Ext.require('Ext.fx.target.Sprite');
//规划数据
var jsonData = [
{
date: '1/1/2009',
IE: 44.8,
Firefox: 45.5,
Chrome: 3.9,
Safari: 3,
Opera: 2.3,
Other: 0.5
},
{
date: '2/1/2009',
IE: 43.6,
Firefox: 46.4,
Chrome: 4,
Safari: 3,
Opera: 2.2,
Other: 0.8
},
{
date: '3/1/2009',
IE: 43.3,
Firefox: 46.5,
Chrome: 4.2,
Safari: 3.1,
Opera: 2.3,
Other: 0.6
},
{
date: '4/1/2009',
IE: 42.1,
Firefox: 47.1,
Chrome: 4.9,
Safari: 3,
Opera: 2.2,
Other: 0.7
},
{
date: '5/1/2009',
IE: 41,
Firefox: 47.7,
Chrome: 5.5,
Safari: 3,
Opera: 2.2,
Other: 0.6
},
{
date: '6/1/2009',
IE: 40.7,
Firefox: 47.3,
Chrome: 6,
Safari: 3.1,
Opera: 2.1,
Other: 0.8
},
{
date: '7/1/2009',
IE: 39.4,
Firefox: 47.9,
Chrome: 6.5,
Safari: 3.3,
Opera: 2.1,
Other: 0.8
},
{
date: '8/1/2009',
IE: 39.3,
Firefox: 47.4,
Chrome: 7,
Safari: 3.3,
Opera: 2.1,
Other: 0.9
},
{
date: '9/1/2009',
IE: 39.6,
Firefox: 46.6,
Chrome: 7.1,
Safari: 3.6,
Opera: 2.2,
Other: 0.9
},
{
date: '10/1/2009',
IE: 37.5,
Firefox: 47.5,
Chrome: 8,
Safari: 3.8,
Opera: 2.3,
Other: 0.9
},
{
date: '11/1/2009',
IE: 37.7,
Firefox: 47,
Chrome: 8.5,
Safari: 3.8,
Opera: 2.3,
Other: 0.7
},
{
date: '12/1/2009',
IE: 37.2,
Firefox: 46.4,
Chrome: 9.8,
Safari: 3.6,
Opera: 2.3,
Other: 0.7
},
{
date: '1/1/2010',
IE: 36.2,
Firefox: 46.3,
Chrome: 10.8,
Safari: 3.7,
Opera: 2.2,
Other: 0.8
},
{
date: '2/1/2010',
IE: 35.3,
Firefox: 46.5,
Chrome: 11.6,
Safari: 3.8,
Opera: 2.1,
Other: 0.7
},
{
date: '3/1/2010',
IE: 34.9,
Firefox: 46.2,
Chrome: 12.3,
Safari: 3.7,
Opera: 2.2,
Other: 0.7
},
{
date: '4/1/2010',
IE: 33.4,
Firefox: 46.4,
Chrome: 13.6,
Safari: 3.7,
Opera: 2.2,
Other: 0.7
},
{
date: '5/1/2010',
IE: 32.2,
Firefox: 46.9,
Chrome: 14.5,
Safari: 3.5,
Opera: 2.2,
Other: 0.7
},
{
date: '6/1/2010',
IE: 31,
Firefox: 46.6,
Chrome: 15.9,
Safari: 3.6,
Opera: 2.1,
Other: 0.8
},
{
date: '7/1/2010',
IE: 30.4,
Firefox: 46.4,
Chrome: 16.7,
Safari: 3.4,
Opera: 2.3,
Other: 0.8
},
{
date: '8/1/2010',
IE: 30.7,
Firefox: 45.8,
Chrome: 17,
Safari: 3.5,
Opera: 2.3,
Other: 0.7
},
{
date: '9/1/2010',
IE: 31.1,
Firefox: 45.1,
Chrome: 17.3,
Safari: 3.7,
Opera: 2.2,
Other: 0.6
},
{
date: '10/1/2010',
IE: 29.7,
Firefox: 44.1,
Chrome: 19.2,
Safari: 3.9,
Opera: 2.2,
Other: 0.9
},
{
date: '11/1/2010',
IE: 28.6,
Firefox: 44,
Chrome: 20.5,
Safari: 4.0,
Opera: 2.3,
Other: 0.6
},
{
date: '12/1/2010',
IE: 27.5,
Firefox: 43.5,
Chrome: 22.4,
Safari: 3.8,
Opera: 2.2,
Other: 0.6
}
];
//数据fields数据抽取
var fields = ['IE', 'Chrome', 'Firefox', 'Safari', 'Opera', 'Other'];
//创建数据
var browserStore = Ext.create('Ext.data.JsonStore', {
fields: fields,
data: jsonData
}); var colors = ['rgb(47, 162, 223)',
'rgb(60, 133, 46)',
'rgb(234, 102, 17)',
'rgb(154, 176, 213)',
'rgb(186, 10, 25)',
'rgb(40, 40, 40)'];
//扩展原始类[Ext.chart.theme.Base]属性colors
Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colors
}, config));
}
}); var b7 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
shadow: false,
maximizable: false,
title: '浏览器使用分布',
//renderTo: Ext.getBody(),
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
theme: 'Browser:gradients',//皮肤
defaultInsets: 30,
store: browserStore,//数据引用
legend: {
position: 'right'//图例的设置
},
axes: [{//轴
type: 'Numeric',
position: 'left',
fields: fields,
title: '使用率 %',
grid: true,
decimals: 0,//小数进位数值 默认是2
minimum: 0,//设置最小数值,如果没有设置则按章数据的最小数值自动计算
maximum: 100//设置最大数值,如果没有设置则按照数据的最大数值自动计算
}, {
type: 'Category',//类型轴
position: 'bottom',
fields: ['date'],
title: '2011年月度分布',
label: {
renderer: function(v) {
return v.match(/([0-9]*)\/[0-9]*\/[0-9][0-9]([0-9]*)/).slice(1).join('/');
}
}
}],
series: [{
type: 'area',//面积图
axis: 'left',
highlight: true,//高亮
tips: {//提示
trackMouse: true,
width: 170,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(item.storeField + ' - '
+ Ext.Date.format(new Date(storeItem.get('date')), 'M y')
+ ' - ' + storeItem.get(item.storeField) + '%');
}
},
xField: 'name',
yField: fields,
style: {
lineWidth: 1,
stroke: '#666',
opacity: 0.86
}
}]
}
}); - Gauge.js
var s1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:"0~10岁",data:20}
]
});
var s2 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:"0~10岁",data:50}
]
});
var s3 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:"0~10岁",data:30}
]
});
var b8 = Ext.create('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 = Ext.create('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 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
shadow: false,
maximizable: true,
style: 'overflow: hidden;',
title: 'Radar Chart',
renderTo: Ext.getBody(),
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 = Ext.getCmp('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 = chart.axes.get(1),
selectedGroup = groupOp[+group];
axis.dateFormat = selectedGroup.dateFormat;
axis.groupBy = selectedGroup.groupBy;
chart.redraw();
} var store = Ext.create('Ext.data.JsonStore', {
fields: ['date', 'visits', 'views', 'users'],
data: generateData()
});
//关键函数
var intr = setInterval(function() {
var gs = generateData();
var toDate = timeAxis.toDate,
lastDate = gs[gs.length - 1].date,
markerIndex = chart.markerIndex || 0;
if (+toDate < +lastDate) {
markerIndex = 1;
timeAxis.toDate = lastDate;
timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);
chart.markerIndex = markerIndex;
}
store.loadData(gs);
}, 1000); var b10 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Live Animated Chart',
renderTo: Ext.getBody(),
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 = Ext.getCmp('chartCmp');
var timeAxis = chart.axes.get(1); - demo.js(加)
var columnStore11 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:"0~10岁",data:20},
{name:"11~18岁",data:60},
{name:"19~24岁",data:30}
]
});
var b11 = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Pie Renderer Chart',
renderTo: Ext.getBody(),
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 renderer
renderer: function(sprite, record, attr, index, store) {//格式化重要函数
var value = (record.get('data') >> 0) % 9;
var color = [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"][value];
return Ext.apply(attr, {
fill: color
});
}
}]
}
}); - Numeric.js
Ext.onReady(function(){
Ext.get("b1").on("click",function(){
b1.show()
})
Ext.get("b2").on("click",function(){
b2.show()
})
Ext.get("b3").on("click",function(){
b3.show()
})
Ext.get("b4").on("click",function(){
b4.show()
})
Ext.get("b5").on("click",function(){
b5.show()
})
Ext.get("b6").on("click",function(){
b6.show()
})
Ext.get("b7").on("click",function(){
b7.show()
})
Ext.get("b8").on("click",function(){
b8.show()
})
Ext.get("b9").on("click",function(){
b9.show()
})
Ext.get("b10").on("click",function(){
b10.show()
})
Ext.get("b11").on("click",function(){
b11.show()
})
});