extJs自学笔记
Ext.define自定义按钮
自定义按钮并添加初始化方法和监听，注意define（‘js文件路径’），只有这样的命名才能被extjs加载
Eclipse运行参数
导师配置
-Xms2048m -Xmx2048m -XX:MaxPermSize=1024m
老潘配置
Xms512m -Xmx512m -XX:MaxPermSize=1024m
-DWORKING_PATH="c:\work\dev\workspace\xParPlus\src\main
Ext.grid
获取选中的元素信息
获取单行数据
var selectedDatas=me.dataGridPanel.getSelectionModel().selected;
if(selectedDatas.length>1){
Ext.MessageBox.alert('提示','一次只能对一行数据进行操作');
return;
}
alert(selectedDatas.items[0]https://www.sodocs.net/doc/0d3514585.html,);
json数据中包含name属性
获取多行数据
var _selections = me.gridVar.getSelectionModel().selected;
var codeArray = new Array();
for ( var i = 0; i < _selections.length; i++) {
var _data = _selections.items[i].data;
codeArray.push(_data.code);
}
https://www.sodocs.net/doc/0d3514585.html,mon.Util.ajaxRequest({
url : "varMaintain/deleteVar.action",
params : {
"codes" : codeArray.join(",")
},
});
向后台传递参数codes,值为code数组
Ajax
http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.Ajax
Ext.Ajax.request({
url:'page.php',
params:{
id:1
},
success:function(response){
var text = response.responseText;
// process server response here
}
});
通过修改Ext.Ajax类的属性，可以设置所有请求的默认配置:
Ext.Ajax.timeout=60000;// 60秒
所有在Ajax请求request方法中设置的选项都会覆盖Ext.Ajax类上对应的默认选项。在以下示例代码中，请求的超时时间将会是60秒。
Ext.Ajax.timeout=120000;// 120秒
Ext.Ajax.request({
url:'page.aspx',
timeout:60000
});
一般来说，在你的应用中，所有Ajax请求都会使用该类。单独创建
Ext.data.Connection实例的主要原因是，
存在一系列请求，它们共享相同的配置，但是这些配置跟应用中的所有其它请求都不相同。
Ext.Json
http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.JSON
解析decode( String json, Boolean safe ) : Object
解码（解析）JSON字符串对象。如果JSON是无效的，这个函数抛出一个SyntaxError，除非设置了安全选项。Parametersjson : String safe : Boolean （可选）如果JSON是无效的，是否返回null或抛出一个异常。
代码示例：
分页
//每次输入换页前端传递参数 limit page start
limit=20,_dc=1457784450612,page=1,start=0
后台传递json格式
{total:’10’,items : [{},{}]}
Java.util.List的subList(start,end)方法截取从start到end-1的元素
向前端传递数据时必须传递数据总数，totalProperty 指定的就是后台传递的属性名，root 指定数据属性名
鼠标移至column 弹出提示显示内容
initComponent()方法第一句初始化quicktips
Ext.QuickTips.init();
需要tip 的column 添加如下代码
例子：
效果：
可编辑表格
1
添加行编辑插件
2给想要编辑的column添加editor
Textfield编辑editor: { textfield相关配置，如allowBlank: false}
下拉框编辑editor: 已经定义好的combo
3给grid添加edit事件监听
新方法探索
reconfigure( Ext.data.Store store, Object[] columns )
使用一个新的store/columns配置项进行重新配置生成grid。如果你不想改变store或者columns，他们任意一项均可以省略。
Parameters：store : Ext.data.Store(可选) 新的store。columns :
Object[](可选) columns配置对象数组
Ext.form.Panel
默认表单项
defaultType : 'textfield'
fieldset
{
xtype:'fieldset',
title: '联系信息',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[me.tf_name, me.tf_email, me.tf_phone]
}
显示如下效果
底部按钮对齐方式
buttonAlign : 'center'
底部按钮及提交方法：
前台要显示成功信息后台返回的json格式必须包含success
{
"success":true, // note this is Boolean, not string
"msg":"Consignment updated"
}
buttons : [{
text : '重置',
handler : function() {
this.up('form').getForm().reset();
}
}, {
text : '提交',
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url : '/zhangliang-test-ext/getjson.action',
params : {
type : 'update'
},
success : function(form, action) {
Ext.Msg.alert('完成',
'修改数据成功');
},
failure : function(form, action) {
Ext.Msg.alert('失败',
'修改数据失败');
}
});
}
}
}]
文档解释
myFormPanel.getForm().submit({
clientValidation: true,
url: 'updateConsignment.php',
params: {
newStatus: 'delivered'
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
以下将会处理成功提交的服务器响应：
{
"success":true, // note this is Boolean, not string
"msg":"Consignment updated"
}
并且以下是失败提交的服务端相应：
{
"success":false, // note this is Boolean, not string
"msg":"You do not have permission to perform this operation"
}
ExtJS获取父子、兄弟容器元素方法
1.当前对象的父对象(上级对象)
this.ownerCt:
2.当前对象的下一个相邻的对象
this.nextSibling();
3.当前对象的上一个相邻的对象
this.previousSibling();
4.当前容器中的第一个子对象
this.get(0);
this.items.first();
5.当前容器的最后一个子对象
https://www.sodocs.net/doc/0d3514585.html,st();
6.查找当前对象的所有上级匹配的容器
this.findParentByType(String xtype)
7.查找当前对象的所有下级匹配的组件
this.findByType(String xtype)
关闭折叠展开方法
http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.window.Window-method-expand
show() hide()
close( )
关闭Panel。默认情况下这个方法会将其自身的DOM对象在浏览器中移除，destroy s 销毁Panel对象并且销毁该Panel中的子组件。在关闭Panel动作发生之前beforeclose事件被触发，如果要取消关闭动作则在其事件的处理函数中返回false即可。
collapse( String direction, [Boolean animate] ) : Ext.panel.Panel
折叠 Panel 体以便将其隐藏。挂靠组与边界平行折叠之后保持其依然可见。触发beforecollapse事件，如果取消折叠动作在该事件的处理函数中返回false。Parameters
direction : String
折叠的方向，必须从下面当中选一个
https://www.sodocs.net/doc/0d3514585.html,ponent.DIRECTION_TOP
https://www.sodocs.net/doc/0d3514585.html,ponent.DIRECTION_RIGHT
https://www.sodocs.net/doc/0d3514585.html,ponent.DIRECTION_BOTTOM
https://www.sodocs.net/doc/0d3514585.html,ponent.DIRECTION_LEFT
animate : Boolean (optional)
True 折叠的时候动态的过度，否则没有动态效果 (默认参照Panel的
animCollapse属性配置)
expand( Boolean animate ) : Ext.panel.Panel
展开 Panel 使之状态变为可见.触发beforeexpand事件,当处理函数中返回false则展开操作被取消.
Parameters
animate : Boolean
设为true开启动画过度效果, false 则没有动画效果(默认值依照Panel 中属性animCollapse的配置)
Returns Ext.panel.Panel
两个js文件的交互
显示页面gridPageMain.js，修改界面formPage.js
显示界面要传递数据给修改界面，修改界面修改成功之后要通知显示界面关闭修改界面
解决方法：config熟悉中添加空方法，主界面创建修改界面时实现方法，然后修改界面就可以调用此方法执行关闭操作
布局
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.VBox-cfg-pack
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Form
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Anchor
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.HBox
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Fit
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Accordion
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Border
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Column
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Table
http://extjs-doc-cn.github.io/ext4api/#!/api/https://www.sodocs.net/doc/0d3514585.html,yout.container.Card
漂亮的表单
https://www.sodocs.net/doc/0d3514585.html,/thread-1094487-1.html
Ext.LoadMask
一个模态的,悬浮的组件, 比如当某个组件加载数据时, 在其上方显示. 当此组件显示时, 附属组件将被一个模态遮罩覆盖, 同时LoadMask的msg中的内容将会随着一个旋转的图片显示在中间位置.
如果指定了store参数, 那么在Store进行加载处理时, 遮罩会自动同步的显示和隐藏.
// 基本的mask:
var myMask =new Ext.LoadMask(myPanel,{msg:"Please wait..."}); myMask.show();
图表
https://www.sodocs.net/doc/0d3514585.html,/blog/1320109
图表的轴(axes)
position设置轴的位置。可用的选项有left, bottom, right, top. 默认为bottom.
grid表格的配置项可以是你能够设置一个轴的背景表格. 如果你将纵轴设置成true, 垂直的线将会显示出来. 如果你将横轴设置成true, 水平的线将会显示出来. 如果都设置了, 水平线和垂直线都会被显示出来.
(1) 数值轴Ext.chart.axis.Numeric
处理数值的轴。这个轴用于定量的数据而不是类别轴。你可以设置最大值和最小值使它
的值绑定到该轴。如果未设置值，那么其规模将自动调整值。
{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2' ,'data3', 'data4', 'data5'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}
(2) 时间轴Ext.chart.axis.Time
单位是时间值的计量的轴。使用这个轴可以列出你想要以组的形式或者动态变化的日期。如果你只是想显示时间类别，你可以使用Category类代替.
axes: [{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
//坐标轴开始时间
fromDate: new Date(2011, 1, 1, 8),
//坐标轴结束时间
toDate: new Date(2011, 1, 1, 12),
//坐标轴间隔，‘h’是Ext.Date.HOUR的值，意义坐标轴间隔为1小时
step: ['h', 1],
//坐标轴标签日期格式化
//参考：http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.Date
dateFormat: 'ga'
}]
(3) 分类轴Ext.chart.axis.Category
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
(4) 仪表轴Ext.chart.axis.Gauge
{
type: 'gauge',
position: 'gauge',
minimum: 0,//最小值
maximum: 100,//最大值
steps: 20,//分为100/20格
margin: 10
}
图表的类型series
（1）折线图Ext.chart.series.Line
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
(2) 柱形图Ext.chart.series.Column
{
type: 'column',
axis: 'bottom',
//是否把不同的field折叠起来
stacked: true,
xPadding: 0,
//大组间的距离，bar宽度的百分比
gutter: 10,
//组内的距离，bar宽度的百分比
groupGutter: 0,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(item.yField + ': ' + item.value[1] + ' $');
}
},
label: {
display: 'insideEnd',
field: ['data1', 'data2', 'data3', 'data4', 'data5'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal'
//color: '#fff'
},
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5']
}
(3) 饼状图Ext.chart.series.Pie
{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.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'
}
}
(4) 条形图Ext.chart.series.Bar
(5) 面积图Ext.chart.series.Area
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4',
'data5'
],
style: {
opacity: 0.93
}
}
(6) 雷达图Ext.chart.series.Radar
{
type: 'radar',
xField: 'name',
yField: 'data1',
showInLegend: true,
showMarkers: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
fill: 'none'
}
}
(7) 散点图Ext.chart.series.Scatter
{
type: 'scatter',
markerConfig: {
radius: 5,
size: 5
},
axis: 'left',
xField: 'name',
yField: 'data2'
}
(8) 仪表图Ext.chart.series.Gauge
{
type: 'gauge',
field: 'value',//被映射的store的属性
highlight: true,
needle: true,//显示指针
donut: 30,//显示仪表盘的面积0-100之间，会从半圆中挖去一部分colorSet: ['gray', '#DBEAF9']//第一个颜色是仪表盘的颜色
}
常用属性
highlight高亮，label标题，tips提示，renderer格式化
常用属性
collapsible 是否允许折叠
frame是否渲染为窗口模式，有圆角
titleCollapse标题栏是否可折叠
bodyPadding 主体内边距
afterLabelTextTpl表单项标签后方提示
afterLabelTextTpl:' data-qtip="Required">*
显示红色星号在表单项标签后
textfield相关属性
Ext.widget('textfield', {
labelWidth: 100,
shadow: 'drop',
margin: '20 10',
labelAlign: 'right',
fieldLabel: 'number',
inputType: 'password',
//校验及对应校验失败时显示的信息
regex: new RegExp('^-?\d+$'),
regexText: '只能输入整数',
allowBlank: false,
blankText: '不允许为空',
minLength: '10',
minLengthText: '输入不能少于10个字符',
maxLength: '15',
maxLength: '输入不能多于15个字符',
invalidText : ‘出错而没有找到对应的错误信息，显示的文字内容’msgTarget: 'side',
renderTo: Ext.getBody()
});
datefield相关属性
Ext.create("Ext.form.DateField", {
fieldLabel : '起始日期',
labelWidth : 100,
name : 'beginDate',
afterLabelTextTpl : https://www.sodocs.net/doc/0d3514585.html,mon.Util.required,
format : 'Y-m-d',
margin : '5 20 0 0',
tabIndex : 104,
labelAlign : "right",
validator : function(value) {
var df_endDateValue = Ext.util.Format.date(
me.df_endDate.getValue(), 'Y-m-d');
var df_beginDateValue = Ext.util.Format.date(
me.df_beginDate.getValue(), 'Y-m-d');
if (df_endDateValue != null&& df_endDateValue != '') { if (df_endDateValue < df_beginDateValue) {
return '起始日期不能超过结束日期';
}
}
returntrue;
}
});
comboBox常用属性
获取值
获取对象的属性值
objectname.property
获取数组
简单类型数组arrayname[index]
对象类型数组arrayname[index].property
ExtJS正则表达式
https://www.sodocs.net/doc/0d3514585.html,/azai/archive/2010/12/31/1923140.html
margin
/ 上右下左 /
margin : '50 0 0 200'
/ 上下左右 /
margin : '50 20'
Ext
getDoc( )
将当前的HTML的document对象作为Ext.Element返回。
getDom( String/HTMLElement/Ext.Element el )
返回dom对象，参数可以是string(id)，dom节点，或Ext.Element。
getHead( )
将当前document的head对象当作Ext.Element返回。
getBody( )
将当前document的body对象当作Ext.Element返回。
get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element
检索Ext.dom.Element对象。get是Ext.dom.Element.get的别名。
getCmp( String id )
https://www.sodocs.net/doc/0d3514585.html,ponentManager.get方法的简写。通过id查找现有的Component
decode( String json, Boolean safe ) : Object
Ext.JSON.decode的简写形式
解码（解析）JSON字符串对象。如果JSON是无效的，这个函数抛出一个SyntaxError，除
非设置了安全选项。
iterate( Object/Array object, Function fn, [Object scope] )
迭代一个数组或一个对象。如果给定的值可迭代他的方法将委派给 Ext.Array.each，否则为Ext.Object.each。
var person = {
name: 'Jacky'
hairColor: 'black'
loves: ['food', 'sleeping', 'wife']
};
Ext.Object.each(person, function(key, value, myself) {
//利用此方法可以遍历对象的属性和值
console.log(key + ":" + value);
if (key === 'hairColor') {
return false; // 停止迭代
}
});
each( Array/NodeList/Object iterable, Function fn, [Object scope], [Boolean reverse] ) : Boolean
迭代一个数组或是可迭代的值，在每个元素上调用给定的回调函数
在回调函数中返回false，即可停止迭代过程。
Ext.Array.each(countries, function(name, index, countriesItSelf) {
if (name === 'Singapore') {
return false; // 此处中止
}
});
Ext.each是Ext.Array.each的别名
typeOf( Object value ) : String
var a; Ext.typeOf(a); //return undefined;
以字符串格式返回给定变量的类型。可能值的列表:
undefined: 如果给定的值是undefined
null: 如果给定的值是null
string: 如果给定的值是一个字符串
number: 如果给定的值是一个数值
boolean: 如果给定的值是一个布尔值
date: 如果给定的值是一个Date 对象
function: 如果给定的值是function的引用
object: 如果给定的值是一个对象
array: 如果给定的值是一个数组
regexp: 如果给定的值是一个正则表达式