Extjs4的例子较少,我自己碰到这个问题后花了些时间研究,现在记录下来做一个分享。有不对的希望大神指导学习,下面上代码
1.首先Html代码结构
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉框树效果</title>
<link rel="stylesheet" href="./resources/css/ext-all.css">
<script src="./jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="./ext-base.js" type="text/javascript"></script>
<script src="./ux/ext-all.js" type="text/javascript"></script>
<script src="./locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script src="./ux/ComboBoxTree.js" type="text/javascript"></script>
<script src="./ux/healthQueryMZ.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
2.页面引入Ext.js4.2官方的配置,这里主要是两个js文件ComboBoxTree.js和healthQueryMZ.js 其他js都是网上下载的
页面排版组件js
var yljgdm;
var startTime;
var endTime;
var name;
var idCard;
function getUrlParam(param) {
var params = Ext.urlDecode(location.search.substring(1));
return param ? params[param] : params;
}
var param_yljgdm = getUrlParam('yljgdm');
var param_checkTime = getUrlParam('checkTime');
function init() {
if (Ext.LoadMask) {
//自定义loading的提示语 add by zhangwenkai
Ext.LoadMask.prototype.msg = "读取中...";
}
var yljgdmStore = Ext.create('Ext.data.TreeStore', {
fields: [{
name: 'id',
type: 'id'
}, {
name: 'text',
type: 'text'
}],
proxy: {
type: 'ajax',
// url: 'http://localhost:8080/HealthPlatform/userMgr/getUserOrganization?_dc=1602318175693&node=root'
url: 'http://127.0.0.1:8020/demo/Ext.js/Ext.4.2-%E6%A8%A1%E6%8B%9F%E7%89%88%E6%9C%AC/tree.json'
},
autoLoad: true
});
console.log(yljgdmStore)
var tbar1 = [{
xtype: 'comboboxtree',
id: 'yljgdm',
name: 'yljgdm',
fieldLabel: '医疗机构<font color=red>*</font>',
valueField: 'id',
editable: false,
allowBlank: false,
displayField: 'text',
multiSelect: false, //是否可以多选
multiCascade: false, //是否级联选择
rootVisible: false, //是否显示根节点
selectNodeModel: 'all',
minPickerHeight: 250, //默认最小高度
width: 450,
store: yljgdmStore,
trigger1Cls: 'x-form-clear-trigger',
trigger2Cls: 'x-form-arrow-trigger',
onTrigger1Click: function () {
this.clearValue();
},
onTrigger2Click: function () {
this.onTriggerClick()
},
},
'-',
{
name: 'start_time',
id: 'start_time_id',
mode: 'local',
fieldLabel: '开始时间',
xtype: 'datefield',
format: 'Y-m-d',
width: 250,
value: param_checkTime != undefined ? new Date(param_checkTime) : new Date(new Date() - 24 * 60 * 60 * 1000),
listeners: {
'select': function () {
var start = Ext.getCmp('start_time_id').getValue();
Ext.getCmp('end_time_id').setMinValue(start);
var endDate = Ext.getCmp('end_time_id').getValue();
if (start > endDate) {
Ext.getCmp('end_time_id').setValue(start);
}
}
}
}, '-', {
name: 'end_time',
id: 'end_time_id',
mode: 'local',
fieldLabel: '截止时间',
xtype: 'datefield',
format: 'Y-m-d',
width: 250,
value: param_checkTime != undefined ? new Date(param_checkTime) : new Date(new Date() - 24 * 60 * 60 * 1000),
listeners: {
select: function () {
var start = Ext.getCmp('start_time_id').getValue();
var endDate = Ext.getCmp('end_time_id').