Extjs6.0 常用语法
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:[...]
}