Extjs4带清空功能的ComboBoxTree 下拉树带模糊搜索的示例

最新推荐文章于 2020-12-31 13:10:59 发布

qq_43058760

最新推荐文章于 2020-12-31 13:10:59 发布

阅读量915

点赞数

分类专栏：笔记学习分享 Ext.js教程分享文章标签： ext treeview

本文链接：https://blog.csdn.net/qq_43058760/article/details/109052168

版权

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').getValue

最低0.47元/天解锁文章

qq_43058760

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Extjs4带清空功能的ComboBoxTree 下拉树带模糊搜索的示例

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"&g
复制链接

扫一扫