利用JS viewer 自定义部件

最新推荐文章于 2025-06-08 09:11:07 发布

lowkeyway

最新推荐文章于 2025-06-08 09:11:07 发布

阅读量9.2k

点赞数

CC 4.0 BY-SA版权

文章标签： dojo function constructor class div html

本文链接：https://blog.youkuaiyun.com/lowkeyway/article/details/7370723

本文介绍了如何使用JS Viewer来创建自定义Dojo部件。重点在于HTML文件中dojo部件的正确书写，强调了部件标签的对称性和name属性的唯一性，以避免解析错误。同时，JS文件用于解析HTML并赋予部件方法和属性。

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

首先见效果

IntakesManageWidget.html文件如下

<div class="widgetContent">
    <div class="widgetPanel" buttonicon="assets/images/small_icons/i_phone.png" buttontext="污染源信息查询">      
            <p>请选择下面选择工厂过滤条件并点击查询按钮。</p>
                  <label for="cboRiverbasin" >取水口名称： </label>
                <select name="intakname" id="cboRiverbasin" dojotype="dijit.form.FilteringSelect" style="width: 95px">
                 <option>Apples</option>
                    <option selected>Oranges</option>
                 <option>Pears</option>
                    </select><button name="btnSearch" type="button" dojoType="dijit.form.Button">查询</button>        
    </div>
    <div class="widgetPanel"
        buttonIcon="assets/images/small_icons/i_table.png"
        buttonText="Panel 2">
        <p>This is panel 2</p> 
         <select name="cboRiverbasin" dojotype="dijit.form.FilteringSelect" style="width: 95px"></select>
        <p>因为这个面板有更多的内容，所以比第一个面板要大一些。</p> 
    </div>
   </div>

注意写dojo部件的时候一定要对称写，例如写 <select name="cboRiverbasin" dojotype="dijit.form.FilteringSelect" style="width: 95px"></select>

不要 <select name="cboRiverbasin" dojotype="dijit.form.FilteringSelect" style="width: 95px"/> 否则，会出现解析错误，使之后的部件无法被解析,所有元素的name 的名字必须唯一

IntakesManageWidget.js文件如下。本质是为了解析以上的HTML文件赋予一定的方法属性

dojo.provide("com.esri.solutions.jsviewer.widgets.IntakesManageWidget");
dojo.require("dijit.form.FilteringSelect");//
dojo.declare(
    "com.esri.solutions.jsviewer.widgets.IntakesManageWidget",
    com.esri.solutions.jsviewer._BaseWidget,
    {
        _module: "com.esri.solutions.jsviewer.widgets",
        templatePath: dojo.moduleUrl("com.esri.solutions.jsviewer.widgets", "templates/IntakesManageWidget.html"),//模板文件的路径
        widgetsInTemplate: true,//如果自定义的部件中含有dojo原来的子部件，要设为ture 加载使自动解析
        constructor: function (/*Object*/params) {


        },
        postCreate: function () {
            try {
                this.inherited(arguments);


                dojo.parser.parse(this.domNode);
            }
            catch (err) { console.error(err); }
        },
        startup: function () {
            this.inherited(arguments);
            if (this._initialized) { return; }
            this.getAllNamedChildDijits();//继承于父类，必须要写将所有的dojo部件填充到this.widgets中
this.connects.push(dojo.connect(this.widgets.btnSearch, "onClick", dojo.hitch(this, function (evt) { alert(this.widgets.intakname.value); })));//通过this.widgets.btnSearch访问子部件，并且绑定onClick部件事件，而不是HTML标签的事件，注意大小写，其中connects 继承而来)

        }
    }
);