ExtJs

最新推荐文章于 2024-07-18 16:37:11 发布

lengyue318

最新推荐文章于 2024-07-18 16:37:11 发布

阅读量1.1k

点赞数

文章标签： list function border html layout button

本文链接：https://blog.csdn.net/lengyue318/article/details/6042099

版权

这两天做了个基于Ext的界面效果图如下：

所实现的功能也就如图，但是真正做了起来才发现不是那么容易附带源码如下：用的Extjs版本是EXT2.3.0，js源码和html源码如下：

index.js:

Ext.onReady(function() {
   // 会签部门和人员显示Panel
   var right_panel = new Ext.Panel({
      renderTo : "right",
      width : 190,
      height : 300
     });

   // 会签部门name
   var boxs = new Array("办公厅", "人事部", "军工部", "规划部", "生产经营部", "资产部",
     "科技部", "政工部", "监察部", "财务部");

// 右边10个部门的list
 var right_list = new Array(boxs.length);
 for (var i = 0; i < right_list.length; i++) {
 right_list[i] = new Array();
 }

// 会签部门id
var panel_id;

var left_panel_list = new Array();

// 创建会签部门Panel
 function create_left_panel(val, arr) {
 for (var i = 0; i < boxs.length; i++) {
 panel_id = "panel" + i;
 var flag = false;
 for (var j = 0; j < arr.length; j++) {
 if (i == arr[j]) {
 flag = true;
 break;
 }
 }
 if (i == val) {
 if (flag == true) {
 var panel = new Ext.Panel({
 id : panel_id,
 width : 140,
 height : 30,
 frame : false,
 renderTo : "left",
 layout : "column",
 items : [{
 xtype : "checkbox",
 columnWidth : .2,
 id : "checkbox" + i,
 checked : true,
 listeners : {
 "check" : render_right
 }
 }, {
 xtype : "panel",
 columnWidth : .8,
 height : 20,
 html : boxs[i],
 border : false,
 bodyBorder : false
 }]
 });
 } else {
 var panel = new Ext.Panel({
 id : panel_id,
 width : 140,
 height : 30,
 frame : false,
 renderTo : "left",
 layout : "column",
 items : [{
 xtype : "checkbox",
 columnWidth : .2,
 id : "checkbox" + i,
 listeners : {
 "check" : render_right
 }
 }, {
 xtype : "panel",
 columnWidth : .8,
 height : 20,
 html : boxs[i],
 border : false,
 bodyBorder : false
 }]
 });
 }
 } else {
 if (flag == true) {
 var panel = new Ext.Panel({
 id : panel_id,
 width : 140,
 height : 30,
 frame : true,
 renderTo : "left",
 layout : "column",
 items : [{
 xtype : "checkbox",
 columnWidth : .2,
 id : "checkbox" + i,
 checked : true,
 listeners : {
 "check" : render_right
 }
 }, {
 xtype : "panel",
 columnWidth : .8,
 html : boxs[i]
 }]
 });
 } else {
 var panel = new Ext.Panel({
 id : panel_id,
 width : 140,
 height : 30,
 frame : true,
 renderTo : "left",
 layout : "column",
 items : [{
 xtype : "checkbox",
 columnWidth : .2,
 id : "checkbox" + i,
 listeners : {
 "check" : render_right
 }
 }, {
 xtype : "panel",
 columnWidth : .8,
 html : boxs[i]
 }]
 });
 }
 }
 Ext.get(panel_id).on("click", aa);
 Ext.get(panel_id).on("click", aaaa);
 left_panel_list.push(panel);

}

// 初始化左边panel
create_left_panel(-1, new Array());

// 响应左边panel的摧毁并且重建函数
 function aaaa() {
 var arr = new Array();
 for (var j = 0; j < boxs.length; j++) {
 if (document.getElementById("checkbox" + j).checked == true) {
 arr.push(j);
 }
 }

    for (var i = boxs.length - 1; i >= 0; i--) {
     left_panel_list.pop().destroy();
    }
    create_left_panel(this.id.substring(5, 6), arr);
   }

   var p0 = new Array("张三", "李四", "王五","猫哥","呼呼");
   var p1 = new Array("sfeve", "冷月");
   var p2 = new Array("王五", "赵六", "sfeve", "冷月","僧个","棒棒");
   var p3 = new Array("王五");
   var p4 = new Array("sfeve", "冷月");
   var p5 = new Array("张三");
   var p6 = new Array("张三", "sfeve", "冷月");
   var p7 = new Array("张三", "李四", "王五");
   var p8 = new Array("张三", "李四");
   var p9 = new Array("张三", "李四", "王五");

   // 产生一个空Panel，用于显示选择会签人员界面
   var mainPanel = new Ext.Panel({
      id : "people",
      renderTo : "main",
      layout:"column",
      width : 250,
      height : 300
     });

// 每次点击，更新mainPanel里面的组件
 function bb(a, array) {
 mainPanel.removeAll();
 for (var i = 0; i < array.length; i++) {
 var new_box = new Ext.form.Checkbox({
 columnWidth:.25,
 boxLabel : array[i],
 id : a + i
 });

     // 记忆勾选的项
     var pno;
     var pname;
     if (a == "panel0") {
      pno = 0;
      pname = "办公厅";
     } else if (a == "panel1") {
      pno = 1;
      pname = "人事部";
     } else if (a == "panel2") {
      pno = 2;
      pname = "军工部";
     } else if (a == "panel3") {
      pno = 3;
      pname = "规划部";
     } else if (a == "panel4") {
      pno = 4;
      pname = "生产经营部";
     } else if (a == "panel5") {
      pno = 5;
      pname = "资产部";
     } else if (a == "panel6") {
      pno = 6;
      pname = "科技部";
     } else if (a == "panel7") {
      pno = 7;
      pname = "政工部";
     } else if (a == "panel8") {
      pno = 8;
      pname = "监察部";
     } else if (a == "panel9") {
      pno = 9;
      pname = "财务部";
     }

for (var j = 0; j < right_list[pno].length; j++) {
 if (right_list[pno][j] == pname + " "
 + new_box.boxLabel) {
 new_box.checked = true;
 break;
 }
 }

new_box.on("check", add_to_right);
mainPanel.add(new_box);

     // render_left(a);
    }
   }

   // 点击左边Panel的函数
   function aa() {
    mainPanel.removeAll();
    if (this.id == "panel0") {
     bb("panel0", p0);
    } else if (this.id == "panel1") {
     bb("panel1", p1);
    } else if (this.id == "panel2") {
     bb("panel2", p2);
    } else if (this.id == "panel3") {
     bb("panel3", p3);
    } else if (this.id == "panel4") {
     bb("panel4", p4);
    } else if (this.id == "panel5") {
     bb("panel5", p5);
    } else if (this.id == "panel6") {
     bb("panel6", p6);
    } else if (this.id == "panel7") {
     bb("panel7", p7);
    } else if (this.id == "panel8") {
     bb("panel8", p8);
    } else if (this.id == "panel9") {
     bb("panel9", p9);
    }
    mainPanel.render("main");
   }

   // 选人员后的函数
   function add_to_right() {
    var id = this.id;
    var pid = id.substring(0, 6);
    var pno;
    var pname;
    if (pid == "panel0") {
     pno = 0;
     pname = "办公厅";
    } else if (pid == "panel1") {
     pno = 1;
     pname = "人事部";
    } else if (pid == "panel2") {
     pno = 2;
     pname = "军工部";
    } else if (pid == "panel3") {
     pno = 3;
     pname = "规划部";
    } else if (pid == "panel4") {
     pno = 4;
     pname = "生产经营部";
    } else if (pid == "panel5") {
     pno = 5;
     pname = "资产部";
    } else if (pid == "panel6") {
     pno = 6;
     pname = "科技部";
    } else if (pid == "panel7") {
     pno = 7;
     pname = "政工部";
    } else if (pid == "panel8") {
     pno = 8;
     pname = "监察部";
    } else if (pid == "panel9") {
     pno = 9;
     pname = "财务部";
    }

var name = this.boxLabel;

if (this.checked == true) {
 var flag = false;
 for (var n = 0; n < right_list.length; n++) {
 for (var m = 0; m < right_list[n].length; m++) {
 if (right_list[n][m] == pname + " " + name) {
 flag = true;
 }
 }
 }
 if (flag == false) {
 right_list[pno].push(pname + " " + name);
 }
 }

    else {
     right_list[pno].remove(pname + " " + name);
    }

    // 重新渲染right_panel
    render_right();
   }

   // 重新渲染right_panel
   function render_right() {
    if (this.id.substring(0, 5) == "check") {
     if (this.checked == false) {
      var idddd = this.id.substring(8, 9);
      bb("panel" + idddd, "p" + idddd);
     }
    }

right_panel.removeAll();
 for (var m = 0; m < right_list.length; m++) {
 // alert(document.getElementById("checkbox" + m).checked);
 if (document.getElementById("checkbox" + m).checked == true) {
 var pname;
 if (m == 0) {
 pname = "办公厅";
 } else if (m == 1) {
 pname = "人事部";
 } else if (m == 2) {
 pname = "军工部";
 } else if (m == 3) {
 pname = "规划部";
 } else if (m == 4) {
 pname = "生产经营部";
 } else if (m == 5) {
 pname = "资产部";
 } else if (m == 6) {
 pname = "科技部";
 } else if (m == 7) {
 pname = "政工部";
 } else if (m == 8) {
 pname = "监察部";
 } else if (m == 9) {
 pname = "财务部";
 }
 // 如果部门人员为空，只显示部门名称
 if (right_list[m].length == 0) {
 var empty_panel = new Ext.Panel({
 html : pname,
 border : false,
 width : 100,
 height : 20
 });
 right_panel.add(empty_panel);
 right_panel.render("right");
 } else {
 // 不为空则显示人员
 for (var n = 0; n < right_list[m].length; n++) {
 var ah_panel = new Ext.Panel({
 // html : right_list[m][n],
 width : 180,
 height : 20,
 border : false,
 frame : false,
 id : "" + m + n,
 layout : "column"
 });
 if(n == 0) {
 var ah_panel_left = new Ext.Panel({
 html : pname,
 border : false,
 columnWidth : .5
 });
 } else {
 var ah_panel_left = new Ext.Panel({
 html : "",
 border : false,
 columnWidth : .5
 });
 }

 var people = right_list[m][n].split(" ")[1];
 var ah_panel_right = new Ext.Panel({
 html : people,
 border : false,
 columnWidth : .5
 });
 ah_panel.add(ah_panel_left);

        ah_panel.add(ah_panel_right);
        right_panel.add(ah_panel);
        right_panel.render("right");
        Ext.get("" + m + n)
          .addListener("dblclick", fff);
       }
      }
     } else {
      if (m == this.id.substring(8, 9)) {
       if (this.id.substring(0, 5) == "check") {
        // 取消部门时弹确认框
        Ext.Msg.confirm("注意", "确认取消您所选的部门吗？", function(
            id) {
           p_cancel(this.id, id);
          }, this);
       }
      }

     }
    }
   }

   // 双击删除响应函数
   function fff() {
    var m = this.id.substring(0, 1);
    var n = this.id.substring(1, 2);
    right_list[m].remove(right_list[m][n]);
    render_right();
   }

   // 响应取消部门时弹出提示函数
   function p_cancel(id, res) {
    // res:选中的按钮
    // id:选中的checkbox的id
    if (res == "yes") {
     var index = id.substring(8, 9);
     while (right_list[index].length != 0) {
      right_list[index].pop();
     }
    } else {
     var cb = document.getElementById(id);
     cb.checked = true;
     render_right();

// 重新渲染左边Panel，使领导确实取消失败了
 var arr = new Array();
 for (var j = 0; j < boxs.length; j++) {
 if (document.getElementById("checkbox" + j).checked == true) {
 arr.push(j);
 }
 }

     for (var i = boxs.length - 1; i >= 0; i--) {
      left_panel_list.pop().destroy();
     }
     create_left_panel(id.substring(8, 9), arr);
    }
   }
   new Ext.Button({
   renderTo:"button1",
   minWidth:70,
   text:"确定"
   });
   new Ext.Button({
   renderTo:"button2",
   minWidth:70,
   text:"执行会签"
   });
   new Ext.Button({
   renderTo:"button3",
   minWidth:70,
   text:"取消"
   });
  });

index.html源码如下：