`
qaddzzq
  • 浏览: 36655 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

基于Ext的会签页面

阅读更多
翻到以前初学EXT的时候 做的一个基于Ext的界面 效果图如下:

所实现的功能也就如图,但是真正做了起来 才发现不是那么容易附带源码如下: 用的Extjs版本是EXT2.3.0,js源码和html源码如下:
如需查看直接点附件下载 下载解压后点击 index.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源码如下:

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.js位于webRoot的lengyue目录下,Extjs位于WebRoot的
index.html代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs/ext-all.js"></script>
		<script type="text/javascript" src="lengyue/index.js"></script>		
  </head>


  
  <body>
    <br>
    <br>
    <table align="center"  cellspacing= "0"> 
    <tr>
    <td height="400"> 请选择会签部门和会签人:<br>(勾选)<div style="cursor:hand"  align="center" id="left"> </div></td>
    <td height="400"><br><br><div id="main"></div></td>
    <td>&nbsp;&nbsp;</td>
    <td height="400">选中的会签部门和人员:<br>(双击删除)<div id="right"></div></td>
    </tr>
    </table>
    <br>
    <table align="center">
     <tr>
    <td><div id="button1"></div></td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td><div id="button2"></div></td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td><div id="button3"></div></td>
    </tr>
    </table>
    

</body>
</html>

  • 大小: 9.2 KB
分享到:
评论

相关推荐

    国内首个基于Ext开发开源企业级框架Efsform

    页面布局方式、功能强大的组件、优质的页面风格,但是如果直接使用Ext又是 较为复杂的,不仅要从头学习EXT 框架,而且Ext 是通过js 函数创建页面的, 这就不得不为每个页面都编写一个相对应初始化函数,这会使得开发...

    基于EXT2.0.2表格间数据拖拽

    在这个特定的场景中,我们将探讨“基于EXT2.0.2表格间数据拖拽”的实现。 EXT2.0.2中的数据拖拽功能,主要是通过DragDrop(DD)和DragDropGroup(DDG)组件来实现的。DragDrop组件允许用户将元素从一个位置拖动到另...

    基于ext.net导航栏

    基于ext.net的导航栏菜单

    cssjquery仿ext样式页面

    当我们谈论“cssjquery仿ext样式页面”时,意味着在网页设计中,使用CSS和jQuery来模仿EXT.js框架的外观和功能。 EXT.js是一个强大的JavaScript框架,它提供了一套完整的用户界面组件和数据绑定机制,用于构建富...

    ext js 页面自动刷新教程集合

    在Ext JS中,页面的自动刷新功能通常涉及到数据网格(Grid)的实时更新,这在处理动态数据流或者需要实时显示新数据的场景中非常常见。本教程集合将深入探讨如何在Ext JS中实现页面,特别是数据网格的自动刷新。 一...

    基于EXT2.2的下拉复选框

    EXT2.2是一款基于JavaScript的富客户端开发框架,主要用于构建复杂的Web应用程序。它提供了一整套组件,包括表格、窗口、菜单、按钮等,使得开发者能够创建出具有桌面应用般用户体验的网页应用。在EXT2.2中,下拉复...

    基于ext的div拖动

    "基于EXT的div拖动"是指利用EXTJS这一强大的JavaScript框架来实现这种功能。EXTJS是一个用于构建富客户端Web应用的前端框架,它提供了丰富的组件库、数据绑定机制以及强大的布局管理,使得开发者可以方便地创建出...

    基于ExtCore的图片轮播

    【标题】:“基于ExtCore的图片轮播” 在IT领域,图片轮播是一种常见的网页元素,用于展示一组图片,常用于网站的首页、产品展示或相册等场景。本话题聚焦于如何使用ExtCore框架来实现一个高效且功能丰富的图片轮播...

    Ext介绍以及_ext页面布局

    最新提及的版本是Ext2.2,本教程将基于这个版本进行讲解。 使用ExtJS,首先需要引入必要的CSS和JavaScript文件。`ext22/resources/css/ext-all.css`是样式文件,提供了ExtJS的视觉样式。接着,`ext22/adapter/ext/...

    基于EXT框架的JS日历插件.rar

    基于EXT框架的JS日历插件,EXT框架给人的感觉小清新,十分漂亮,很多JS可以和EXT框架结合起来,甚至是动态的WEB开发语言也可以做到。本代码是一个JavaScript结合EXT实现的日历选择器,既漂亮美观的同时,也保证功能...

    基于ext3.3的可多选下拉框js

    基于ext3.3的可多选下拉框js,可以从前台或者后台获取下拉框中数据

    基于EXT | vml的流程图的实现

    EXT 是一个基于 JavaScript 的富客户端应用框架,提供了一系列组件和工具,用于构建交互式的 Web 应用程序。而 VML(Vector Markup Language)是微软提出的一种矢量图形语言,用于在 Internet Explorer 浏览器中呈现...

    一个基于EXT的ASP.NET后台管理框架例子源码程序

    一个基于EXT的ASP.NET后台管理框架例子源码程序

    servlet 的一个例子,在eclipse下基于ext的.

    servlet 的一个例子,在eclipse下基于ext的.servlet 的一个例子,在eclipse下基于ext的.servlet 的一个例子,在eclipse下基于ext的.servlet 的一个例子,在eclipse下基于ext的.servlet 的一个例子,在eclipse下基于ext的....

    基于ext-core的ajax自动保存功能

    ### 基于ext-core的ajax自动保存功能详解 在当今快速发展的互联网世界中,用户体验是产品设计的核心考量之一。特别是在长时间编辑文本的场景下,如撰写博客或邮件,自动保存功能成为提升用户体验的关键特性。本文将...

    html 表头固定,基于ext的

    7. **示例代码**:HTMLPage2.htm可能是实现这个功能的一个示例页面,里面包含了EXT GridPanel的配置和相关的CSS样式。分析这个文件的代码可以帮助我们理解如何在实际项目中实现表头固定。 总的来说,EXT提供了一个...

    基于Ext的单页系统设计与研究.pdf

    【基于Ext的单页系统设计与研究】 这篇文章主要探讨了如何利用Ext框架设计和实现一个单页系统(One Page Application,OPOA),这是一种优化用户体验的Web应用模式,旨在提高响应速度和用户交互性。文章首先介绍了...

    ext技术各种页面设计源代码

    ext技术各页面设计源代码:ext技术各页面设计源代码;ext技术各种页面设计源代码

    EXT样式的页面原型

    EXT样式页面原型是一种基于Web的用户界面设计,它利用了CSS(层叠样式表)、HTML的DIV元素以及JavaScript技术来构建高效、可扩展且交互性强的网页应用。EXT是一个前端框架,尤其在企业级应用中广泛应用,因为它提供...

Global site tag (gtag.js) - Google Analytics