Ext.define自定义按钮
自定义按钮并添加初始化方法和监听，注意define（‘js文件路径’），只有这样的命名才能被extjs加载 //文件路径 js/define.js //文件路径 js/test-define.js Ext.define('js.define', { Ext.require(['js.define']); require : ['Ext.util.*'], Ext.onReady(function(){ extend: 'Ext.button.Button', Ext.create('myButton'); alias : 'myButton',//定义别名 }); text : '自定义按钮', //初始化组件方法，在组件加载时调用 initComponent: function() { 在JSP文件中首先引用ext必须的文件 //this.text = new Date(); 然后引用test-define.js Ext.MessageBox.alert('title','init'); console.log('init'); 结果：在执行到require方法时会自动this.renderTo = Ext.getBody(); 加载define.js文件，执行create方法时//调用父类的构造方法 会调用initComponent方法显示自定义this.callParent(); 按钮 }, listeners: { click : function(){ Ext.MessageBox.alert('title', 'onclick'); console.log('onclick'); } } });
Eclipse运行参数
导师配置
-Xms2048m -Xmx2048m -XX:MaxPermSize=1024m 老潘配置
Xms512m -Xmx512m -XX:MaxPermSize=1024m
-DWORKING_PATH=\
Ext.grid
获取选中的元素信息
获取单行数据
var selectedDatas=me.dataGridPanel.getSelectionModel().selected;
if(selectedDatas.length>1){ }
Ext.MessageBox.alert('提示','一次只能对一行数据进行操作'); return;
alert(selectedDatas.items[0].data.name); 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); }
XIRJS.common.Util.ajaxRequest({
url : \ params : {
\ }, });
向后台传递参数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 : Stringsafe : Boolean（可选） 如果JSON是无效的，是否返回null或抛出一个异常。
代码示例： Ext.Ajax.request({ url : '/zhangliang-test-ext/getjson.action', params : { type : 'delete', names : namesArray.join(',') }, success : function(response) { var text = response.responseText; var data=Ext.JSON.decode(text); Ext.MessageBox.alert('提示',data.msg); } }); 分页
//每次输入换页前端传递参数 limit page start limit=20,_dc=1457784450612,page=1,start=0 后台传递json格式
{total:’10’,items : [{},{}]}
Java.util.List的subList(start,end)方法截取从start到end-1的元素 me.storeData = Ext.create('Ext.data.Store', { model : 'User', proxy : { type : 'ajax', url : '/zhangliang-test-ext/getjson.action', reader : { type : 'json', root : 'items', totalProperty : 'total' } }); }, autoLoad : true
向前端传递数据时必须传递数据总数，totalProperty指定的就是后台传递的属性名，root指定数据属性名
鼠标移至column弹出提示显示内容
initComponent()方法第一句初始化quicktips
Ext.QuickTips.init(); 需要tip的column添加如下代码
renderer: function(value,metaData,record,rowidx,colldx,store){ metaData.tdAttr = \ +Ext.String.htmlEncode(value)+\; returnvalue; } 例子：
效果：
可编辑表格
1添加行编辑插件
plugins: [ Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit : 2, autoCancel : false, errorSummary : false, saveBtnText : \确定\, cancelBtnText : \取消\ }) ],
2给想要编辑的column添加editor Textfield编辑 editor: { textfield相关配置，如allowBlank: false} 下拉框编辑 editor: 已经定义好的combo 3给grid添加edit事件监听
edit: function(editor,e,eOpts){ vardata=e.record.data; varparams={ id: data.id, text: data.text, jsName: data.jsName, leaf: data.leaf }; //获取修改后的数据并处理 }
新方法探索
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] }
显示如下效果
