Extjs学习与使用随笔

目录

Extjs全局变量的定义：

关于columns表格表头的菜单箭头禁用问题

表格布局的写法

关于grid组件中删除选中行

grid新增数据以后的store刷新

grid中双击或单击实现编辑单元格的方法

grid的行单击事件，让数据在另一个区域中显示

关于conboBox组件获取valueField和displayField的值

点击下拉框选择数据以后，获取修改前和修改后的数据

遮罩层效果设置

表格行的拖拽效果 

Rpc的同步执行写法

获取数据源的store写法

Extjs全局变量的定义：

一、全局this的定义

在Ext.define（）的第一个函数下定义全局this，即在initComponent : function(){}中定义；

全局变量的定义方式如下：

var a = this;

//变量a在其所在函数外是无法调用到的，这是变量作用域问题，即只在本函数有效

b = this；

//变量b会在本函数、其他函数中使用，因为此为全局变量的定义方式

当在init函数中定义全局this时，记得不要加var/let；

二、全局变量的定义：

为了define中的变量在define中任一函数内都可以调用到，所以要定义在define这个大函数中，采用 变量名：变量值 的方式进行定义：

Ext.define("Calculformula.CalculFormula", {
	extend : 'Ext.panel.Panel',
	requires : ['EHR.extWidget.proxy.TransactionProxy'],
	xtype : 'calculformula',
	title : '计算公式',
	layout : 'border',


	comboStore : '',
    //comboStore就是全局变量，任一函数都可以调用到它
}),

三、全局变量的使用

因为comboStore定义在了define中，为了拿到这个变量，不得不使用this.comboStore来调用，但是因为this的作用域是：谁调用它，this就指向谁；所以某一个函数内使用this，注定不会拿到comboStore，为了解决这个问题，第一步就设置了一个全局变量b，通过b.comboStore就可以进行赋值与调用了；

示例如下：

Rpc({
    functionId : 'FM0000001',
	success : function(result) {
        b.comboStore = result
        Ext.create('Ext.window.Window', {
            xtype : "combo",
			id : 'formulaCombo',
			name : 'formulaCombo',
			store : b.comboStore,
        })
    })
})

//交易类中对全局变量进行赋值,然后创建一个下拉框，对store进行赋值

关于columns表格表头的菜单箭头禁用问题

加入属性menuDisabled: true，直接禁用菜单的点击显示问题，避免了隐藏显示列；

hideable : false属性会禁止该列在菜单中被设置为隐藏,sortable : false属性可以设置该列禁止排序；hidden : true属性就是隐藏不显示该列数据；

表格布局的写法

items : [{
		xtype : 'grid',
		id : 'formulaGrid',
		name : 'formulaGrid',
		title : { xtype : 'title',text : '公式列表',height : 10},
		width : 235,height : 380,margin : '5px,10px,5px,5px',
		// grid表格布局
		columns : [{
				text : '编号',
				dataIndex : 'itemid',
				hidden : true
			}, {
				text : '状态',
				dataIndex : 'state',
				width : 56,
				menuDisabled: true		//禁止菜单列下拉
			}],

表格标题使用title组件，表头使用columns组件，xtype写grid即可实现简单表格，而表格的内部数据store可以本地静态数据，也可以后台传过来以后动态赋值：Ext.getCmp('formulaGrid').setStore(store);

关于grid组件中删除选中行

注意：不包括数据库删除，而且是在数据库删除成功的基础上删除store中数据

删除操作分两步：通过点击行下标获取到该条记录record，再去store中remove该条记录；

record获取方法：

第一种的下标是record在store中的行号；

//根据下标 0 获取第一条数据，前提是明确下标
store.getAt(0);

//根据该条数据的id从store中获取该条数据，适用于不知道下标的情况，但是可以通过点击事件来获取到该条
//记录的数据
var id = Ext,getCmp('grid').getSelectionModel().getSelection()[0].id;
var record = store.getById(id);

下一步就是从store中移除record，使用store自带的remove方法；

store.remove(record);

remove()中的参数可以是单条record，也可以是record数组，同时也可以是数字、数组（后两者未实现过）；

Store.getCount()方法可以获取到store中记录的条数，用于循环时的限制条件；

grid新增数据以后的store刷新

注意：同删除，不包括后台操作部分，且是在成功操作数据库后对store的变更

store中没有提供对一条记录record的修改方法，但是有对一条记录的某一类进行修改的方法；

变更操作分三步：通过下标锁定record，获取到变更后的数据，将新数据set进store；还有一种方法是明确record在store中的行号，拿到最新数据后直接进行set即可；

示例使用通过表格数据id的方式锁定record，因为拿不到该条record在store中的行号，所以无法直接进行set操作；

var selectData = Ext.getCmp('Grid').getSelectionModel().getSelection();
var selectId = selectData[0].id;
var values = Ext.getCmp("textfield").getValue();
Store.getById(selectId).set('column',values);

grid中双击或单击实现编辑单元格的方法

plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 2        // 设置双击或单击启用编辑模式
 })]

grid的行单击事件，让数据在另一个区域中显示

本质还是鼠标的点击监听事件itemclick，通过listens进行事件监听，当鼠标单击以后，执行方法体中的操作；

通过getCmp()方法定位到panel，然后使用getForm()方法定位到panel里边的form表单组件，由此来找到id为formula的field，再对其进行setValue赋值；

listeners : {
       itemclick : function() {
             var selectedData = Ext.getCmp('formulaGrid').getSelectionModel().getSelection();
             var Rexpr = selectedData[0].data.Rexpr;
             Ext.getCmp('formPanel').getForm().findField("formula").setValue(Rexpr);
      }
},

关于conboBox组件获取valueField和displayField的值

Ext.getCmp('reference').value;    //获取到的是valueField
Ext.get('schemaVersion').dom.value;     //获取到的是displayField
formula.lastMutatedValue

点击下拉框选择数据以后，获取修改前和修改后的数据

blur:function(event,opts){

     var lastData = event.lastMutatedValue;     //获取文本框中选择下拉列表的选项后的值

     var firstData = event.originalValue;    //获取文本框中修改前的值

}

遮罩层效果设置

使用mask/unmask来实现遮罩层的添加和去除；还有一个loadMask()也可以达到遮罩层的效果，但目前还未使用过该方法；

//对某个panel添加遮罩层效果，适合于加载数据时作为一个提示动画
Ext.getCmp("rightPanel").getEl().mask("数据正在加载中……");


//对某个加了遮罩层效果的panel进行遮罩去除
Ext.getCmp("rightPanel").getEl().unmask();

表格行的拖拽效果 

Extjs自带了表格行的拖拽插件，使用该插件即可实现界面的拖动效果样式：

viewConfig: {
	plugins: {
		ptype: "gridviewdragdrop",
		dragText: "拖放数据"
}

 dragText即为拖动过程中显示的提示信息；

拖拽的同时修改数据库中的相应字段的写法：

    drop : function(node,data,model,dropPosition,dropHandlers){
		  	var start_itemid=data.records[0].data.itemid;
			var start_sortid = data.records[0].data.sortid;
			var end_itemid=model.get('itemid');
			var end_sortid = model.get('sortid');
			var map = new HashMap();
			map.put("start_itemid",start_itemid);
			map.put("start_sortid",start_sortid);
			map.put("end_itemid",end_itemid);
			map.put("end_sortid",end_sortid);
			map.put("dropPosition",dropPosition);
			console.log(map);
			Rpc({
				functionId:'id',
				success : function(){  },
				scope:this
			},map)
	},

data用来存储拖动行的record，model存储目标行的record，dropPosition是判断放置时是在数据行的前边还是后边（before/after），通过Rpc将相应参数传回后台进行数据处理，操作数据库，完成排序操作。

Rpc的同步执行写法

添加属性   async：false；

    Rpc({
			functionId : 'id',
			async:false,
			success: this.loadSuccess,
			scope : this
		}, map);

获取数据源的store写法

通过Rpc的success方法得到后台的返回值，使用Ext.decode(result.responseText)来获取数据，然后通过for循环将数据进行格式化封装入新的变量中；

创建一个store，fields属性标识列名称，data为上一步封装好的数据，此时得到的store即为表格、下拉框需要的数据源；

    var dataList = [];
	for (var i = 0; i < param.length; i++) {
		var data = param[i];
		dataList.push({ itemid : data.itemid,
			state : '<input type="checkbox" checked/>',
			name : data.name})
	}
    var Store = Ext.create('Ext.data.Store', {
			fields : ['itemid', 'state', 'name'],
			data : dataList
	});