我们可以使用谷歌闭包创建一个带有复选框和组合框的对话框

时间:2013-09-08 18:02:28

标签: javascript google-closure google-closure-library

我正在尝试创建一个对话框,其中包含复选框,用户名和角色组合框,仅在选中复选框时才会启用。我有一个在jsp页面上运行的基本代码但是如何让它在对话框中运行?所有组件都使用谷歌闭包呈现。

我的js文件

function combox ()
    {
    goog.events.listen((goog.dom.getElement('switch')), goog.events.EventType.CLICK,
            function(e) {
            var request = new goog.net.XhrIo();
            var cb = new Array();
       goog.events.listen(request, "complete", function(e){
        var xhr = /** @type {goog.net.XhrIo} */ (e.target);
        res = xhr.getResponseJson();
        var mycount = count(res.myrole);
        var content = new Array();
            var userlist = new Array();
            for(var k=0;k<mycount;k++)
            {
                content[k] = res.myrole[k].role;
            }
            var mycount1 = count(res.myusers);
            for(var l=0;l<mycount;l++)
            {
                userlist[l] = res.myusers[l].user;
            }
            var child = new Array();
            var container = goog.dom.getElement('c'); 
            for(var m=0;m<userlist.length;m++)
            {
              child[m] = goog.dom.createDom('div',{'id':'user'+(m+1)},userlist[m]);
              cb[m] = new goog.ui.ComboBox();
              cb[m].setUseDropdownArrow(true);
            for(var n=0;n<content.length;n++)
            {
              cb[m].addItem(new goog.ui.ComboBoxItem(content[n]));;
            }
            cb[m].render();
            goog.dom.append(container, child[m]);
    });
    });
}
function count(obj) {
   var count=0;
   for(var user in obj) {
      if (obj.hasOwnProperty(user)) {
         ++count;
      }
   }
   return count;
}

我从servlet得到了正确的响应,但我希望这些组件位于一个对话框中(即从我的servlet中检索到的每个用户的复选框,用户名和组合框。)

1 个答案:

答案 0 :(得分:2)

你应该考虑使用goog.ui.Dialog - http://docs.closure-library.googlecode.com/git/class_goog_ui_Dialog.html

以下是如何使用一个的演示:http://closure-library.googlecode.com/git/closure/goog/demos/dialog.html

在实例化之后,您将使用setContent方法将表单作为对话框的内容html。

您还可以扩展goog.ui.editor.AbstractDialog类(http://docs.closure-library.googlecode.com/git/class_goog_ui_editor_AbstractDialog.html),这有助于管理对goog.ui.Dialog的内部引用,而不是直接创建一个并提供方便的hideshow方法。

__

作为旁注,它通常被视为Javascript中的反模式,使用“new Array()”语法而不是var userList = [];出于指定here和其他地方的原因。