Javascript 无法让JSFIDLE运行Dojo向导

我正在尝试创建一个，但是我无法让代码运行。我已经加载了相关资源，但它不起作用。我正在创建一个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>

---

dgrid库不是Dojo库的一部分。您必须手动添加它，并使用

datadojoconfig

对其进行配置。一定要阅读。正如你所看到的（几乎在文章的顶部），它说：

dgrid是首批发布的新Dojo包之一 独立，而不是作为DojoX命名空间的一部分。这 分布式模型是向分布式组件转变的一部分 Dojo2中的开发模型，由于分布式技术的进步而成为可能 代码服务，比如GitHub

因此，您必须自己添加dgrid。我目前还没有找到一个官方的CDN托管dgrid，所以您必须自己托管它

---

但是你可以自己很容易地验证这一点，就像@epascarello在评论部分所说的，有404个错误，所有这些错误都与dgrid有关。

404吨，这就是原因。CDN真的承载了所有这些文件吗？@epascarello我更新了JSFIDLE。是的，我能够访问CDN@epascarello即使更新了fiddle，我仍然无法运行表单向导我更新了fiddle并托管了dgrid文件，但是我仍然遇到一个无法解决的错误。您可以帮助吗？您缺少一些东西。首先，您必须配置Dojo，使其知道

dgrid

、

put选择器

和

xstyle

包位于不同的位置。如果您这样做，那么您将得到另一个错误，因为您仍然缺少几个文件。您需要的不仅仅是添加的文件，而且它们必须具有正确的层次结构。因此，除非你能公开整个目录结构，否则在Google drive上托管它们不是一个解决方案。哦，我知道我能让它工作的最好方法是什么了？你能帮我看看这个问题吗？如果我试图在这个问题上复制这个问题，请附加到我的问题上，我对dgrid或WizardPane没有经验，所以我很难帮助你。让它在JSFIDLE上工作的最好方法是使用一些免费主机，并将dgrid/xstyle/put选择器放在那里。

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);
});