extJs 常用语法1

最新推荐文章于 2023-03-18 17:31:43 发布

fainily

最新推荐文章于 2023-03-18 17:31:43 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏： extJs

本文链接：https://blog.youkuaiyun.com/fainily/article/details/84360502

extJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于ExtJS框架的应用案例，包括生成树形结构并进行过滤操作、获取Grid组件的值以及创建ComboBox下拉列表等内容。特别展示了如何通过ExtJS进行DOM元素的操作和事件监听，适用于前端开发人员学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[*]生成树，并进行过滤，并且最后去掉监听器


var ctree = initDeployRelationTree(treeLoader);

var f = function(n) {
console.log(n.text);
if (n.hasChildNodes() == false) {
  if (n.getUI().checkbox != null) {
  n.getUI().show();
   filter(n);
   } else {
  n.getUI().hide();
  }
} else {
n.getUI().hide();

}
};

ctree.on('expandnode', f);
ctree.on('collapsenode', function() {
ctree.removeListener('expandnode', f);
});
ctree.expandAll();

[*]拿到grid组件,取值


var rec = Ext.getCmp('roleCreateGridId');
var personName = rec.get('personName');

[*]combobox使用
创建下拉列表



Ext.define('State', {
	extend : 'Ext.data.Model',
	fields : [ {
		type : 'string',
		name : 'id'
	}, {
		type : 'string',
		name : 'name'
	} ]
});

// 图表下拉列表定义
var chartStates = [{
	"id" : "line",
	"name" : "折线图"
},              
{
	"id" : "column",
	"name" : "柱状图"
}, {
	"id" : "pie",
	"name" : "饼图"
}];

// 图表下拉列表公共store
function initStore(state, data) {
	var store = Ext.create('Ext.data.Store', {
		autoDestroy : true,
		model : state,
		data : data
	});
	return store;
}

// 生成图表下拉列表
function initChartComboBox() {
	var store = initStore('State', chartStates);
	var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
		id : 'chartComboBoxId',
		fieldLabel : '图表类型',
		displayField : 'name',
		valueField : 'id',
		width : 120,
		labelWidth : 60,
		store : store,
		queryMode : 'local',
		typeAhead : true,
		columnWidth : .33,

	});
	return simpleCombo;
}

控制combobox


var yBox = Ext.getCmp('displayYBoxId');
var yvalues = [];
yBox.setValue(yvalues);  //更换类型后，清空下拉列表

select监听事件


listeners : {
			'select' : function(combo, records, eOpts) {
				var yBox = Ext.getCmp('displayYBoxId');
				 var record = records[0];
				 chartType = record.get('id');
				 var yvalues = [];
				 yBox.setValue(yvalues);  //更换类型后，清空纵轴
				if(record.get('id')=='pie'){
				     yBox.multiSelect=false;
				     yBox.setFieldLabel("展示字段");
				}else{
					 yBox.multiSelect=true;
					 yBox.setFieldLabel("纵轴字段");
				}
			}
		}