具有动态复选框的dojo对话框不起作用

时间:2012-01-13 07:14:21

标签: dynamic dojo scrollbar checkbox dialog

如果我提出基本问题,请原谅我。我是javascript的新手..

我正在尝试创建一个对话框,动态创建一个复选框列表以显示在此对话框中,每个用户请求显示一个复选框。 如果复选框的数量从定义的宽度增加,则对话框应该有一个滚动条以滚动。 我能够创建对话框(虽然不是一个非常优雅的解决方案),但有一个问题......

如果我尝试按住滚动条并移动它,则Windows资源管理器9中出现的对话框有一个不移动的滚动条。在Firefox上工作得很好..

感谢任何帮助..

代码:

function filterLocationDisplay()
{
    destroyElement(FILTER_TABLE_ID);

    var clientPrefs = [
    {"MSISDN":"0", "display":true},
    {"MSISDN":"1", "display":false},
    {"MSISDN":"2", "display":true},
    {"MSISDN":"3", "display":false},        
    {"MSISDN":"4", "display":true},
    {"MSISDN":"5", "display":false},
    {"MSISDN":"6", "display":true},
    {"MSISDN":"7", "display":false},        
    {"MSISDN":"8", "display":false},
    {"MSISDN":"9", "display":false},
    {"MSISDN":"10", "display":true},
    {"MSISDN":"20", "display":false},
    {"MSISDN":"30", "display":false},        
    {"MSISDN":"40", "display":false},
    {"MSISDN":"50", "display":true},
    {"MSISDN":"60", "display":false},
    {"MSISDN":"70", "display":true},
    {"MSISDN":"000", "display":true},
    {"MSISDN":"100", "display":false},
    {"MSISDN":"200", "display":true},
    {"MSISDN":"300", "display":false},        
    {"MSISDN":"400", "display":true},
    {"MSISDN":"500", "display":false},
    {"MSISDN":"600", "display":true},
    {"MSISDN":"700", "display":false},        
    {"MSISDN":"800", "display":false},
    {"MSISDN":"900", "display":false},
    {"MSISDN":"1000", "display":true},
    {"MSISDN":"2000", "display":false},
    {"MSISDN":"3000", "display":false},        
    {"MSISDN":"4000", "display":false},
    {"MSISDN":"5000", "display":true},
    {"MSISDN":"6000", "display":false},
    {"MSISDN":"7000", "display":true},                   
    {"MSISDN":"8000", "display":false}        
    ];

    var cbFilterDivRef;
    var cbDialogRef;
    if(undefined == dojo.byId("filterDivID") || null == dojo.byId("filterDivID"))
    {
        var filterDivSubmitButton = new dijit.form.Button(
                    {
                        type:"submit",
                        label:"Submit",
                        name:"filterPrefsSubmitButton",
                        id:"filterPrefsSubmitButtonId",
                        dojoType: "dijit.form.Button",
                        onClick:function () { onFilterSubmit("submit"); 
                    }});

        var filterDivSelectAllButtonRef = new dijit.form.Button(
                    {
                        type:"button",
                        label:"Select all",
                        name:"filterPrefsSelectAllButton",
                        id:"filterPrefsSelectAllButtonId",
                        dojoType: "dijit.form.Button",
                        onClick:function () { onFilterSubmit("all");
                    }});

        var filterDivSelectNoneButtonRef = new dijit.form.Button(
                    {
                        type:"button",
                        label:"Unselect all",
                        name:"filterPrefsSelectNoneButton",
                        id:"filterPrefsSelectNoneButtonId",
                        dojoType: "dijit.form.Button",
                        onClick:function () { onFilterSubmit("none");
                    }});

        cbFilterDivRef = dojo.create("div",  
                      {
                          id: "filterDivID"  ,
                          style: {"overflow": "scroll", 
                                    "overflow": "scroll",
                                    "width": "350px", 
                                    "height": "400px"},
                      }, dojo.byId("hiddenDiv"), "first");

        filterDivSelectAllButtonRef.placeAt(cbFilterDivRef, "last");
        filterDivSelectNoneButtonRef.placeAt(cbFilterDivRef, "last");              
        filterDivSubmitButton.placeAt(cbFilterDivRef, "last");
    }
    else {
        cbFilterDivRef = dojo.byId("filterDivID");
    }

    if(undefined == dojo.byId("FilterDlgID") || null == dojo.byId("FilterDlgID"))
    {

        cbDialogRef = new dijit.Dialog({
                    title: "Please select the assets to be displayed",
                    id:"FilterDlgID",
                    style:{"border": "3px groove", "overflow": "none"},
                    content:cbFilterDivRef,
                    autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
                    refocus: !dojo.isIE
            });
    }     
    else {
        cbDialogRef = dijit.byId("FilterDlgID");
    }   

    var filterTable = dojo.create("table",
                                 {
                                     id:FILTER_TABLE_ID,
                                     name:FILTER_TABLE_ID,
                                     style:{"position":"relative"}
                                 },
                                 cbFilterDivRef, "first");
    for (var msisdnNo = 0; msisdnNo < clientPrefs.length ; ++msisdnNo)
    {
        var row = filterTable.insertRow(filterTable.rows.length);// create a table to contain the checkbox
        // and Asset ID.
        var assetId = clientPrefs[msisdnNo].MSISDN; 
        var checkBoxCell = row.insertCell(0); checkBoxCell.setAttribute("id", assetId+".cell");
        var assetIdCell = row.insertCell(1);  assetIdCell.innerHTML = assetId;

       var checkBox = dijit.byId(assetId+ID_CB_SUFFIX) ;
        //destroy the checkBox widget .. if its created..
        if (null != checkBox || undefined != checkBox )
        {
            checkBox.destroy();
        }
        checkBox = new dijit.form.CheckBox({
                id:      assetId+ID_CB_SUFFIX,
                name:    assetId,
                value: "true"
              });            
        checkBox.setChecked(clientPrefs[msisdnNo].display);
        checkBox.placeAt(assetId+".cell", "first");
    }
    cbDialogRef.show();

}

/**
 * 
 */
function onFilterSubmit(option)
{
    var filterTable = dojo.byId(FILTER_TABLE_ID); //document.getElementById(FILTER_TABLE_ID);
    if(null == filterTable || undefined == filterTable)
    {
        return false;
    }
    // get the list of checkboxes xhc
    var checkBoxesList = null;
    if("submit" != option) {
    checkBoxesList = dojo.query('input[type="checkbox"]', FILTER_TABLE_ID);
    }
    else {
        checkBoxesList = dojo.query('input:checked', FILTER_TABLE_ID);
    }
    alert(checkBoxesList.length);
    var returnObject = new Array();
    var assetCount = 0;
    for(var assetCount =0 ; assetCount < checkBoxesList.length; assetCount++)
    {
        var assetDisplayPrefCb = dijit.getEnclosingWidget(checkBoxesList[assetCount]);
        var assetId = assetDisplayPrefCb.get("name");
        switch (option) {
            case "all":
            {
                assetDisplayPrefCb.setChecked(true);
                break;
            }
            case "none":
            {
                assetDisplayPrefCb.setChecked(false);
                break;                    
            }
            case "submit":
            default:
            {
                returnObject[assetCount] = new Object();
                returnObject[assetCount].assetId = assetId;
                returnObject[assetCount].display = assetDisplayPrefCb.getValue("checked");//checked;
            }
        } 
    }
alert("returnObject.length == " + returnObject.length);
return returnObject;
}// onSubmit(option)

1 个答案:

答案 0 :(得分:0)

我在这个代码片段中发现了一些语法错误(参见注释)。我不是说它会解决滚动问题,但它们应该被修复了......

cbFilterDivRef = dojo.create("div",{
                      id: "filterDivID",
                      style: {"overflow": "scroll", 
                              "overflow": "scroll",  //remove duplicate
                              "width": "350px",     
                              "height": "400px"     
                      },   //remove comma after bracket
                  }, 
                 dojo.byId("hiddenDiv"), "first");