Question

我正在尝试创建JSFiddle但是我无法运行代码。我已经加载了相关资源，但它不起作用。我正在创建一个Dojo表单向导。

代码：

HTML

 <div dojoType="dojox.widget.WizardPane" id="EmployeeNameWizPane">

                <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
                    id="EmployeeNameContainer">

                    <label>1. What Is Your Name ?</label>

                    <s:textfield type="text" required="true" name="surname"
                        id="surname" placeholder="Your SurName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Surname!" title="(a). Surname :" 
                        style="width: 25em;" />


                    <s:textfield type="text" required="true" name="firstname"
                        id="firstname" placeholder="Your FirstName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your FirstName!"
                        title="(b). FirstName :" 
                        style="width: 25em;" />

                    <s:textfield type="text" required="false" name="other_names"
                        id="other_names" placeholder="Other Names"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        title="(c). Other Names :" 
                        style="width: 25em;" />

                </div>
            </div> 



            <div dojoType="dojox.widget.WizardPane" id="EmployeeBirthNameWizPane">

                <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
                    id="EmployeeBirthNameContainer">
                    <label>2. Is you name on your Birth Certificate is
                        different from (1) above ?(e.g. Changed by Deed Poll / Marriage)</label>

                    <s:textfield type="text" required="true" name="birth_surname"
                        id="birth_surname" placeholder="Your SurName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Surname On Your Birth Certificate!"
                        title="(a). Surname :"
                        style="width: 25em;" />

                    <s:textfield type="text" required="true" name="birth_firstname"
                        id="birth_firstname" placeholder="Your FirstName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your FirstName On Your Birth Certificate!"
                        title="(b). FirstName :" 
                        style="width: 25em;"/>

                    <s:textfield type="text" required="false" name="birth_other_names"
                        id="birth_other_names" placeholder="Other Names"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        title="(c). Other Names :"
                        style="width: 25em;" />


                </div>

            </div> 




            <div dojoType="dojox.widget.WizardPane" id= "EmployeeIdWizPane">

                <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:2,customClass:'employee_labels', labelWidth:250"
                    id="EmployeeIdentificationContainer">

                    <label>3. Please Enter At Least Two Forms Of Identification</label> 

                    <s:select data-dojo-type="dijit/form/FilteringSelect" id="id"
                        name="id" title= "Identification Type"
                        list="#{'':'Select Your I.D Type','1':'Passport','2':'Drivers Permit','3':'Electoral Identification'}"/>

                    <s:textfield type="text" required="true" name="idNumber"
                        id="idNumber" placeholder="Your Identification Number"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Identification Number"
                        title="(a). Identification Number :"
                        style="width: 25em;" />         

                </div>
                    <div id="grid" class="grid"></div>

              </div>    

            </div>

的Javascript

require([

    "dijit/form/CheckBox",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form",

]);

require([
    "dojox/validate/us",
    "dojox/validate/web",
    "dojox/layout/TableContainer",
    "dojox/layout/GridContainer",
    "dojox/widget/Wizard",
    "dojox/widget/WizardPane",
    "dojox/grid/_CheckBoxSelector"

]);

require([
    "dojo/parser",
    "dojo/_base/declare",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",
    "dgrid/ColumnSet",
    "dgrid/Selection",
    "dgrid/selector",
    "dgrid/Keyboard",
    "dgrid/extensions/DijitRegistry",
    "dgrid/editor",
    "dgrid/extensions/ColumnHider",


    "dojo/domReady!"

], function (parser, declare, MemoryStore, OnDemandGrid, ColumnSet, Selection, selector, Keyboard, DijitRegistry, editor, ColumnHider) {
    parser.parse();


    var data = [{
        id: "1",
        idType: "Passport",
        idNumber: "12121545WWW"
    }, {
        id: "2",
        idType: "Drivers Permit",
        idNumber: "11212154515 FF"
    }, {
        id: "3",
        idType: "Electoral Identification",
        idNumber: "425123123121"
    }];
    var store = new MemoryStore({
        data: data
    });
    var columns = [
        [
            [{
                label: "Id",
                field: "Id"
            },
            editor({
                label: "",
                field: "select",
                sortable: false,
                autoSave: true
            }, "checkbox"), {
                field: "idType",
                label: "Identification Type"
            }, {
                field: "idNumber",
                label: "Identification Number"
            }]
        ]
    ];

    var CustomGrid = declare([OnDemandGrid, selector, Selection, Keyboard, editor, DijitRegistry, ColumnHider]);




    var grid = new CustomGrid({
        store: store,
        columns: {
            col1: {
                label: "Id",
                field: "Id",
                hidden: true
            },

            selector: selector({
                selectorType: "checkbox"
            }),

            col3: {
                label: "ID Type",
                field: "idType"
            },

            col4: {
                label: "ID Number",
                field: "idNumber"
            }

        },
        SelectionMode: "none",
        allowSelectAll: true
    }, "grid");



    //grid.styleColumn("Id","display:none;");

    grid.renderArray(data);
});

Answer 1

dgrid 库不是Dojo库的一部分。您必须手动添加并使用data-dojo-config对其进行配置。请务必阅读this article。你可以看到（几乎在文章的顶部）它说：

dgrid是第一个要分发的新Dojo包之一独立而不是作为DojoX名称空间的一部分。这个分布模型是向分布式组件转变的一部分 Dojo 2中的开发模型，通过分布式的进步实现代码服务，如GitHub。

所以你必须自己添加dgrid。我目前没有找到正式的CDN托管dgrid，所以你必须自己主持。

但你可以自己轻松验证这一点，比如@epascarello在评论部分说，有404错误，所有这些都与dgrid有关。

无法让JSFiddle运行Dojo向导

1 个答案: