Extjs6.0 常用语法-CSDN博客

本文链接：https://blog.csdn.net/SugarNj/article/details/103061733

Extjs6.0 常用语法

extjs6.0常用语法
更新______2021年1月19日

extjs6.0常用语法

由于用到的前端框架extjs6.0比较多，把一些常用，易忘的知识点记下来，已备查看

1 grid某值字符过长的展示方式

text     : '位置',
itemId:'position',
minWidth : 120,
flex     : 1,
align:'center',
sortable : true,
dataIndex: 'position',
 renderer: function(value, meta, record) {
	if(value){
    	var vv=value.replace(/<\/?.+?>/g,"");//替换掉标签，只得文本
	 	var resultValue=vv.replace(/ /g,"");//dds为得到后的内容
		var max = 30; //显示多少个字符
		meta.tdAttr = 'data-qtip="' + resultValue + '"';
		return resultValue.length < max ? resultValue :resultValue.substring(0, max - 3) + '...';
	}
	return value;
	
}

2 grid 日期方式的展示

text     : '创建时间',
minWidth : 160,
flex     : 1,
align:'center',
sortable : true,
hidden:true,
dataIndex: 'createTime',
renderer:function(value) {
    return new Date(value).format("yyyy-MM-dd hh:mm:ss");
}

3 grid 鼠标放到单元格上去有提示以及改变鼠标形状

//1 改变鼠标形状以及单元格背景色以及提示
{
	text     : '|',
	width:5,
	height:5,
	align:'center',
	dataIndex: i+'_'+7,
	renderer: function (value, cell) {
	    if(value){
    		if(value.isEndFlag){
    			cell.style = "background-color:green;cursor: pointer;";
    		} else{
    			cell.style = "background-color:red;cursor: pointer;"; //修饰整个单元格的样式
    		}
    		var val = new Date(value.begintime).format("hh:MM:ss")+"~"+new Date(value.endtime).format("hh:MM:ss");
    		cell.tdAttr = "title=" + val;//提示
    
    	}
    	return ''
	}
}

4 grid 单元格右击事件(右击出现菜单)，单击事件

//右击事件，需要在listeners对象下进行
cellcontextmenu:function ( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) 
{
	e.preventDefault();//阻止浏览器默认行为处理事件。
	var cellName = grid.getColumnManager().columns[cellIndex].dataIndex;
	var selectedCellValue = record.data[cellName];
	new Ext.menu.Menu({
		//控制右键菜单位置
		// width : 10,
		float : true,
		plain : true,
		items:[
			{
				text : "下载该时间段视频",
				vaule:0,
				handler : function(self) {
					//TODO
				},
				listeners:{
					beforerender:function(self){
					}
				}
			}
		]
	}).showAt(e.getXY());//showAt:显示组件在特定XY位置。getXY:获取事件的页面坐标。
}


//单击事件并获取单元格值
cellclick:function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts ){
	var cellName = grid.getColumnManager().columns[cellIndex].dataIndex;
	var selectedCellValue = record.data[cellName];//单元格值
	return;
}

5 grid 单击或双击图片单元格，放大图片

listeners:{
    cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        //单击照片单元格，放大图片
        //celldblclick(grid, td, cellIndex, record, tr, rowIndex, e, eOpts)双击事件亦可
        e.preventDefault();//阻止浏览器默认行为处理事件。
        var cellName = grid.getColumnManager().columns[cellIndex].dataIndex;
        if("empPhotos" == cellName){
            var selectedCellValue = record.data[cellName];
            var win_watch = createImgWin(selectedCellValue,'人员照片')
            win_watch.show();
        }

    }
}

/**
 * 创建查看图片大图
 * @param src
 * @param title
 */
function createImgWin(src,title){
	return Ext.create('Ext.Window', {
		width: 900,
		height: 650,
		minHeight: 400,
		minWidth: 550,
		maximizable: true,
		title: title,
		layout: "fit",                        //窗口布局类型
		modal: true, //是否模态窗口，默认为false
		resizable: false,
		closeAction: 'hide',
		plain: true,
		draggable: true,
		border: false,
		items: [
			Ext.create('Ext.Img', {
				height: 890,
				width: 600,
				src: src
			})
		]
	});

}

6 extjs整合html,html对象与extjs对象相互调用

//1 创建iframe对象
 {
    region: 'center',
    xtype: 'panel',
    layout: 'border',
    collapsible: false,
    items:[
		{
        	region : 'center',
        	xtype:'uxiframe',
			itemId : 'videoMonitor',
			border:false,
			padding:0,
			margin:0,
			authHeight:true,
			src:'/common/html/videoSurveil/html/videoIndex.html',
			listeners:{
				"afterrender":function(self){
					var videoMonitorWin = self.getWin();//返回iframe的窗口对象 即(window)
					window["videoMonitor"] = window["videoMonitor"] || {};
					window["videoMonitor"]["video"] = videoMonitorWin;//iframe对象赋值
				}
			}
		}
    ]

}

//2 调用iframe对象，并使用其方法或属性
var videoHtml=window["videoMonitor"]["video"];
var postionDivFunc = videoHtml["postionDiv"];
var isPositionFunc = postionDivFunc && typeof postionDivFunc === "function";
if(isPositionFunc){
	DEVICE_CHANNEL = postionDivFunc(CHECKED_CHANNEL_ARR);
}
//3 ifram对象调用extjs的方法---html执行extjs中的方法
var parentWin = window.parent;
if (parentWin){
    var func = parentWin["editDownVideo"];
    if (func && typeof func === "function"){
        func();
    }
}

更新______2021年1月19日

5 调用controller中的事件

 //调用query
var playBackControllers = getController(g_application,'Admin.controller.SafetyManager.Monior.PlayBackManager.PlayBackController');
playBackControllers.beforerender(playback);
playBackControllers.query(button,null,selectedData);

6 单击或双击单元格，方法图片

listeners:{
    cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        //单击照片单元格，放大图片
        //celldblclick(grid, td, cellIndex, record, tr, rowIndex, e, eOpts)双击事件亦可
        e.preventDefault();//阻止浏览器默认行为处理事件。
        var cellName = grid.getColumnManager().columns[cellIndex].dataIndex;
        if("empPhotos" == cellName){
            var selectedCellValue = record.data[cellName];
            var win_watch = createImgWin(selectedCellValue,'人员照片')
            win_watch.show();
        }

    }
}

/**
 * 创建查看图片大图
 * @param src
 * @param title
 */
function createImgWin(src,title){
	return Ext.create('Ext.Window', {
		width: 900,
		height: 650,
		minHeight: 400,
		minWidth: 550,
		maximizable: true,
		title: title,
		layout: "fit",                        //窗口布局类型
		modal: true, //是否模态窗口，默认为false
		resizable: false,
		closeAction: 'hide',
		plain: true,
		draggable: true,
		border: false,
		items: [
			Ext.create('Ext.Img', {
				height: 890,
				width: 600,
				src: src
			})
		]
	});

}

7 为grid动态新增columns

建时间条，分24个大单元格，一个大单元格分60个小单元格，即1个单元格代表1分钟，
一个大单元格代表一小时,并且在页面加载时动态新增到grid中

/**
 * 获取时间刻度表头
 * @returns {*[]}
 */
function getScaleColmns(){
	var scaleCol =[
		{
			xtype: 'rownumberer',
			header: "序号",
			align: 'center',
			style: {
				borderWidth:"0 1px 0 0"
			},
			width    : 80
		},
		{
			text: "通道号",
			itemId:'channel',
			width    : 100,
			align:'center',
			sortable : true,
			style: {
				borderWidth:"0 1px 0 0"
			},
			dataIndex: 'channel'
		}
	];

	for(var i = 0;i<=24;i++){
		var columnsArr=[];
		for(var j =0;j<60;j++){
			columnsArr.push({
				text     : '|',
				width:1,
				height:5,
				align:'center',
				dataIndex: i+'_'+j,
				renderer: function (value, cell) {
					return getValue(value,cell);
				}

			});
		}
		var scal = {
			text     : '0a',
			align:'center',
			menuDisabled:true,
			columns:columnsArr
		};
		var time = 'a';
		if(i>=12){
			time = 'p';
		}
		if(i==24){
			scal.text=0+time;
		}else{
			scal.text=i+time;
		}
		scaleCol.push(scal);
	}
	return scaleCol;
}

// 动态加载列
 beforerender:function(self, eOpts){
	var col = getScaleColmns();
 	var scaleGrid = self.down('timescale');
	scaleGrid.reconfigure(null, scaleGrid);
},

8 为下拉框新增全选参数

/**
 * 向下拉列表中插入全部选项.
 */
function loadFull(store,param) {
    store.on('load', function (store) {
        store.insert(0,param);
    });
};

 //基础管理-人员管理
    global_employeeStore = Ext.create('Admin.store.BasicInfo.Employees');
    global_employeeStore.load();
    //新增全选按钮
    loadFull(global_employeeStore,{
        name: '全部',
        empCode: null
    })

9 gridpanel 细粒度的编辑单元格，有textfield,numberfield,combox等编辑组件

{
					region : 'center',
					xtype:'gridpanel',
					itemId : 'paramPGrid',
					border:false,
					authHeight : true,
					requires: [
						'Ext.grid.plugin.CellEditing'
					],
					plugins: {
						ptype: 'cellediting',
						clicksToEdit: 1
					},
					columns:[
						{
							xtype: 'rownumberer',
							header: "序号",
							align: 'center',
							width    : 80
						},
						{
							text     : '参数名',
							minWidth : 160,
							flex     : 1,
							align:'center',
							sortable : true,
							dataIndex: 'paramName',
							renderer:function(value){
								var va = transCodeToName("itemCode","itemName",DEVICE_PARAMETER,value,true);
								if(va){
									return va;
								}
								return value;
							}
						},
						{
							text     : '参数值',
							width     : 240,
							sortable : true,
							align: 'center',
							dataIndex: 'paramValue',
							editor:{
								xtype:'textfield'
							}
						},{
							text     : '备注',
							width     : 240,
							sortable : true,
							align: 'center',
							dataIndex: 'paramDesc'
						},
						{
							text     : '创建日期',
							itemId   : 'createTime',
							minWidth : 120,
							hidden:true,
							flex     : 1,
							align    : 'center',
							sortable : true,
							dataIndex: 'createTime',
							renderer:function(value) {
								if(value){
									return new Date(value).format("yyyy-MM-dd");
								}
								return value;
							}

						}

					],
					listeners:{
						beforeedit:function(editor, e, eOpts) {
							var record = e.record.data;
							//默认设置成textfield格式
							//进行条件判断，符合设置editor,细粒度到单元格
							if( e.column.dataIndex == "paramValue"){
								if(!record.paramType || record.paramType==1){
									e.column.setEditor({
										xtype: 'textfield'
									})
								}
								if(record.paramType==2){
									e.column.setEditor({
										xtype: 'numberfield',
										minValue:0
									})
								}
								if(record.paramType==3){
									var genderStore = Ext.create("Ext.data.Store", {
										fields: ["key", "value"],
										data: JSON.parse(record.paramValue)
									});
									e.column.setEditor({
										xtype: 'combobox',
										displayField: 'value',
										valueField: 'key',
										editable: false,
										store: genderStore
									});
								}
								if(record.paramType== 4 ){
									//不允许编辑
									return false;
								}
							}
						},
						cellclick:function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
							//单击参数值单元格
							// 多选框内容
							var checkedArr = JSON.parse(record.data.paramPropertyValue);
							createMoreCheck(grid, td, cellIndex, record,rowIndex,checkedArr,0);
						}
					
					}
				}

10 动态设置grid选中状态,取消状态

取消选中：
grid.getSelectionModel().deselect(records);
其中参数 records , 可以是想取消选中的记录的数组 , 也可以是想取消选中的记录的 排序数


初始化时，grid加载时，设置哪些行是选中状态
gridstore.load({
scope: this,
callback: function(records, operation, success) {
     //设置选中项
    var arr=[];//选中项
    $.each(records,function(index,item){
        if(item.data.isRequired==1){
            arr.push(item);
        }
    })
    if(arr.length>0){
        self.getSelectionModel().select(arr);
    }
}
});

11 针对于gridpanel-动态设置某单元格

{
text     : '字段名称',
itemId:'fieldNames',
minWidth : 120,
flex     : 1,
align:'center',
dataIndex: 'fieldNames',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    //动态设置某单元格的值，this===gridpanel
    this.store.getAt(rowIndex).set('xtype',"男")
}
},

12 改变某个单元格的值另一个单元格随之变化

//另一单元格增加tooltip&style
 {
    text     : '条件匹配',
    minWidth : 120,
    flex     : 1,
    align: 'center',
    dataIndex: 'compare',
    editor:{
        xtype: 'combo',
        mode: 'local',
        displayField : 'itemName',
        valueField : 'itemCode',
        editable: false,
        store: g_mapStore[CONST_COMMON_OPRATOR]
    },
    renderer:function(value, metaData, record, rowIndex, colIndex, store, view) {
        if(value!=undefined && value.trim().length>0){
            if(value=="between"){
                metaData.tdCls = 'between'
            } else if(value=="in"){
                metaData.tdCls =  'in'
            }
        }
        return transCodeToName("itemCode","itemName",CONST_COMMON_OPRATOR,value,true)
    }
},
{
    text     : '参数值',
    minWidth : 120,
    itemId:'value',
    flex     : 2,
    align: 'center',
    dataIndex: 'value',
    editor:{
        xtype:'textfield'
    },
    renderer: function (value, cell) {
        if(cell.classes.indexOf('between') > -1 ){
            cell.style = "cursor: pointer;";
            cell.tdAttr = "title=只需填写介于的2个值，且用英文逗号分隔" ;//提示
        }
        else if(cell.classes.indexOf('in') > -1 ){
            cell.style = "cursor: pointer;";
            cell.tdAttr = "title=可填写多值，且用英文逗号分隔";
        }
        return value
    }
}

13 grid 更新某行信息

$.each(GpsStore.data.items,function(index,item){
    ...
    ...
    GpsStore.insert(index,[value]);//更新记录
})

14 grid 为某列默认前端排序

//只需要在store中添加如下属性即可
 sortable:true,
 sorters:[{property:"busCode",direction:"DESC"}],
 
 //例子：
 Ext.define('Admin.store.SaefetyMonior.Monior.RealTimeGpsStore', {
    extend: 'Ext.data.Store',
    storeId: 'RealTimeGpsStore',
    alias: 'store.realtimegpsstore',
    model: 'Admin.model.SaefetyMonior.Monior.RealTimeGpsModel',
    autoLoad: false,
    totalProperty:'total',
     sortable:true,
     sorters:[{property:"busCode",direction:"DESC"}], 
    ...
    ...
});

15 grid 修改行颜色

1 首先css文件定义class

.gridSelectColor{
	background:#ffefbb;
}

2 gridpanel组件添加viewConfig

{
        region : 'south',
        xtype:'gridpanel',
        itemId : 'tableByTblName',
        header:false,
        scrollable: 'y',
        height:300,
        requires: [
            'Ext.grid.plugin.CellEditing'
        ],
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1
        },
        viewConfig:{getRowClass:changeRowClass},
        columns:[...]
}

//为某行改变背景色
function changeRowClass(record, rowIndex, rowParams, store){
	if(record.get('indoor')){
		return "gridSelectColor";
	}
}

16 gridpanel,列头与内容错乱解决方案

 bodyStyle : "width:100%",
    viewConfig : {
        scrollOffset:30       //为右侧下拉滚动条设置预留宽度30像素
    },

17 form编辑页，固定高度，可设置滚动条

 items:[
{
    xtype: 'form',
    padding: '5 5 5 5',
    border: false,
    anchor: '100%',
    layout:'column',
    //设置滚动条start----
    autoScroll : true,
    bodyStyle : 'overflow-x:visible; overflow-y:scroll',
     //设置滚动条end----
    fieldDefaults: {
        anchor: '95%',
        columnWidth: .33,
        labelAlign: 'left',
        labelWidth:110,
        combineErrors: true,
        msgTarget: 'qtip',
        padding: '3 3 3 3'
    },
    items:[...]
}