程序博客网 > 阿里云视频 保利威视

Extjs的学习

来源：互联网 发布：阿里云视频 保利威视 编辑：程序博客网 时间：2024/05/02 04:22

                                                      Extjs的学习

         本来我想将我的这个作品进行详细的讲解，以便大家使用参考，但是现在时间不够，所以，就将整片代码发表吧，如果大家感兴趣或是有什么疑问的，欢迎QQ问我。此次是用extjs做一个前台界面

 

 

<%@ Page Language="C#"  %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>江农教务管理</title>
    <link href="Ext3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext3.0/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext3.0/ext-all.js" type="text/javascript"></script> 
</head>
 

 

        <script type="text/javascript">

            Ext.onReady(function () {
                Ext.BLANK_IMAGE_URL = "Ext3.0/resources/images/default/s.gif";
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = "qtip";


//                gridPanel区域
                function renderSex(value) {
                    if (value == 'male') {
                        return "<span style='color:red;font-weight:bold;'>男</span>";
                    }
                    else {
                        return "<span style='color:green;font-weight:bold;'>女</span>";
                    }
                }


                var cm = new Ext.grid.ColumnModel([
                    new Ext.grid.RowNumberer(),
                    new Ext.grid.CheckboxSelectionModel(),
                    { header: '性别', dataIndex: 'sex', width: 200, sortable: true, renderer: renderSex },
                    { header: '姓名', dataIndex: 'name', width: 200, sortable: true },
                    { header: '班级', dataIndex: 'class', width: 200, sortable: true },
                    { header: '学号', dataIndex: 'id', width: 200, sortable: true },
                    { header: '科目编号', dataIndex: 'num', width: 200, sortable: true },
                    { header: '时间', dataIndex: 'time', width: 200, sortable: true },
                    { header: '缴费状态', dataIndex: 'situation', width: 200, sortable: true }
                    ]);


                var data = [['male', '刘达志', '一班', '20122345', '1', '2013-7-20', 'yes'],
                        ['female', '咏梅', '二班', '20122346', '2', '2013-7-21', 'no']];


                var ds = new Ext.data.Store({
                    proxy: new Ext.data.MemoryProxy(data),
                    reader: new Ext.data.ArrayReader({}, [
                       { name: 'sex' },
                       { name: 'name' },
                       { name: 'class' },
                       { name: 'id' },
                       { name: 'num' },
                       { name: 'time' },
                       { name: 'situation' }
                        ])
                });
                ds.load();

                var grid = new Ext.grid.GridPanel({
                    title: '四六级考试报名系统',
                    height: 620,
                    autoWidth: true,
                    ds: ds,
                    cm: cm,
                    bbar: new Ext.PagingToolbar({
                        pageSize: 10,
                        store: ds,
                        displayInfo: true,
                        displayMsg: '显示第{0}条到第{1}条记录，共{2}条',
                        emptyMsg: '没有记录'
                    })
                });
    //    gridPanel结束区域

                var loginForm1 = new Ext.FormPanel({
                    id: "loginForm1",
                    width: 550,
                    height: 435,
                    frame: true,
                    labelAlign: "right",
                    monitorValid: true,
                    items: [
               new Ext.form.TextField({
                   id: "username",
                   name: "username",
                   width: 220,
                   fieldLabel: "用户名",
                   minLength: 3,
                   minLengthText: "用户名长度不能小于{0}",
                   maxLength: 12,
                   maxLengthText: "用户名长度不能大于{0}",
                   allowBlank: false,
                   blankText: "用户名必须输入"
               }),
               new Ext.form.TextField({
                   id: "password",
                   name: "password",
                   width: 220,
                   fieldLabel: "密码",
                   inputType: "password",
                   allowBlank: false,
                   blankText: "密码必须输入"
               }),
               new Ext.form.TextField({
                   id: "randCode",
                   name: "randCode",
                   width: 220,
                   fieldLabel: "验证码",
                   allowBlank: false,
                   blankText: "验证码必须输入"
               }),
                         new Ext.form.TextField({
                             id: "ID",
                             name: "ID",
                             width: 220,
                             fieldLabel: "学号",
                             allowBlank: false,
                             blankText: "学号必须输入"
                         }),
                         new Ext.form.TextField({
                             id: "name",
                             name: "name",
                             width: 220,
                             fieldLabel: "姓名",
                             allowBlank: false,
                             blankText: "姓名必须输入"
                         }),
                          new Ext.form.TextField({
                              id: "course",
                              name: "course",
                              width: 220,
                              fieldLabel: "考试科目",
                              allowBlank: false,
                              blankText: "考试科目必须输入"
                          })
              ]
                });


                      var loginForm2 = new Ext.FormPanel({
                          id: "loginForm1",
                          width: 550,
                          height: 435,
                          frame: true,
                          labelAlign: "right",
                          monitorValid: true,
                          items: [
               new Ext.form.TextField({
                   id: "username",
                   name: "username",
                   width: 220,
                   fieldLabel: "用户名",
                   minLength: 3,
                   minLengthText: "用户名长度不能小于{0}",
                   maxLength: 12,
                   maxLengthText: "用户名长度不能大于{0}",
                   allowBlank: false,
                   blankText: "用户名必须输入"
               }),
               new Ext.form.TextField({
                   id: "password",
                   name: "password",
                   width: 220,
                   fieldLabel: "密码",
                   inputType: "password",
                   allowBlank: false,
                   blankText: "密码必须输入"
               }),
               new Ext.form.TextField({
                   id: "randCode",
                   name: "randCode",
                   width: 220,
                   fieldLabel: "验证码",
                   allowBlank: false,
                   blankText: "验证码必须输入"
               }),
                           new Ext.form.TextField({
                               id: "ID",
                               name: "ID",
                               width: 220,
                               fieldLabel: "学号",
                               allowBlank: false,
                               blankText: "学号必须输入"
                           }),
                         new Ext.form.TextField({
                             id: "name",
                             name: "name",
                             width: 220,
                             fieldLabel: "姓名",
                             allowBlank: false,
                             blankText: "姓名必须输入"
                         }),
                          new Ext.form.TextField({
                              id: "course",
                              name: "course",
                              width: 220,
                              fieldLabel: "考试科目",
                              allowBlank: false,
                              blankText: "考试科目必须输入"
                          })

                 ]
                      });

 

                var win2 = new Ext.Window({
                    title: '我要报名，请填写报名列表',
                    width: 550,
                    height: 400,
                    isTopContainer: true,
                    modal: true,
                    resizable: false,
                    border: true,
                    maximizable: true,
                    draggable: false,
                    AutoScroll: true,
                    buttonAlign: 'left',
                    items:loginForm1,
                    buttons: [{
                        text: '确定',
                        handler: function () {
                            alert("你的信息已经提交！！！");
                                  }
                           },
                           { text: '取消',
                               handler: function () {
                                   alert("你已经取消，请从新填写！！！");
                                   }
                              }]
                       });


                var win3 = new Ext.Window({
                    title: '我要取消报名，请填写取消列表',
                    width: 550,
                    height: 400,
                    isTopContainer: true,
                    modal: true,
                    resizable: false,
                    border: true,
                    maximizable: true,
                    draggable: false,
                    AutoScroll: true,
                    buttonAlign: 'left',
                    items: loginForm2,
                    buttons: [{
                               text: '确定',
                               handler: function () {
                               alert("你的信息已经提交！！！");
                                   }
                              },
                              { text: '取消',
                               handler: function () {
                                   alert("你已经取消，请从新填写！！！");
                                   }
                           }]
                       });


                var win = new Ext.Window({
                    title: '四六级报名',
                    width: 1350,
                    height: 635,
                    isTopContainer: true,
                    modal: true,
                    resizable: false,
                    border: true,
                    maximizable: true,
                    draggable: false,
                    AutoScroll: true,
                    buttonAlign: 'left',
                    items: grid,
                    buttons: [{
                        text: '我要报名',
                        handler: function () {
                            win2.show();
                        }
                    },
                           { text: '取消预约',
                               handler: function () {
                                   win3.show();
                               }
                           }]

                })
                win.show();
            });
            

        </script>
 <body>

 </body>
</html>

 

阿里云视频 保利威视 阿里云视频 保利威视
原创粉丝点击
热门IT博客
淘宝分销平台在哪里淘宝分销平台在哪里
raphael.js绘制流程图raphael.js绘制流程图
db2远程连接数据库
linux系统好用吗
windows live账号注册
mac pro 15寸掉电速度
油罐容积计算软件
大数据 徐子沛
淘宝店铺的主营在哪里
帅图之滨兵营升级数据
奇幻咔咔软件
export java options
淘宝聚划算提前购物车
手机弹奏音乐软件
淘宝能返钱的软件
手机广告制作软件
重庆行知学校招聘
阿里云国际版paypal
淘宝的网站设计特色
windows多线程注意什么
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 弗兰德减速机选型手册 寻找弗兰肯斯坦 弗兰肯斯坦之恋 我,弗兰肯斯坦 弗兰茨约瑟夫真的很帅 弗利欧葡萄酒 弗利沙 龙珠之超级弗利沙 弗利萨 弗利萨各种形态图 弗利萨战斗力 弗利萨 涅茧利 复活的弗利萨 弗利萨为什么怕沙鲁 弗利萨为什么会怕魔人 黄金弗利萨 弗吉亚 无远弗届什么意思 自愧弗如的意思 弗在古文中的意思 强而弗抑是什么意思 为是其智弗若与的意思 其人弗能应也的意思 弗拉德三世 fgo弗拉德三世 弗拉德三世fgo 弗拉德 弗朗兹的故事 弗朗哥 爱德华弗朗 弗朗花 弗朗茨 弗朗顿破壁机 弗朗顿破壁机怎么样 弗林特 gogobike自行车怎么样 镁电池 折叠变速自行车 阿米尼自行车 折叠自行车价格 gogobike

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里