EXT JS

最新推荐文章于 2023-03-12 21:59:24 发布
最新推荐文章于 2023-03-12 21:59:24 发布
阅读量447 收藏
点赞数
分类专栏： java 文章标签： ext function header stylesheet class url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winkey521/article/details/6758573
版权
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri=" http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>EXTJS分页DEMO</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <link type="text/css" rel="stylesheet" href="<%=basePath%>plug-in/ext-2.2/resources/css/ext-all.css" />
 <script type="text/javascript" src="<%=basePath%>plug-in/ext-2.2/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="<%=basePath%>plug-in/ext-2.2/ext-all.js"></script>
 <style type="text/css">
  .testCss{
   font-size: 12px;
   font-family:宋体;
   font-weight:bold;
   color: #000066;
  }
  .add .x-btn-text{
   background-image:url("<%=basePath%>images/add.gif");
  }
  .del .x-btn-text{
   background-image:url("<%=basePath%>images/forbidden.gif");
  }
  .update .x-btn-text{
   background-image:url("<%=basePath%>images/save.gif");
  }
 </style>
 <script type="text/javascript">
  Ext.onReady(function(){
  
  });
  function createInfoTab(){
   var win;
   var modWin;
   var modForm;
   // checkbox选中模式
   var sm = new Ext.grid.CheckboxSelectionModel();
   // sm.on('rowdeselect',delRec(sm));
   // sm.on('rowselect',function(sm){delRec(sm);});
   sm.handleMouseDown = Ext.emptyFn;
   // sm.addListener("click",delRec,null,null);
   // 列模型
   var cm = new Ext.grid.ColumnModel([
    // 列数字
   //    new Ext.grid.RowNumberer(),
       // checkbox
       sm,
       // 表头
       {header:'<b class="testCss">编号</b>',dataIndex:'userid',sortable:true,css:'font-size:12px;color:black;font-family:宋体;',hidden:true},
          {header:'<b class="testCss">工号</b>',dataIndex:'usercode',sortable:true,css:'font-size:12px;color:black;font-family:宋体;'},
          {header:'<b class="testCss">姓名</b>',dataIndex:'username',sortable:true,css:'font-size:12px;color:black;font-family:宋体;'},
          {header:'<b class="testCss">班</b>',dataIndex:'classname',sortable:true,css:'font-size:12px;color:black;font-family:宋体;'},
          {header:'<b class="testCss">组</b>',dataIndex:'groupname',sortable:true,css:'font-size:12px;color:black;font-family:宋体;'}
    ]);
   // 默认排序
      cm.defaultSortable = true;
    var ds = new Ext.data.Store({
          proxy: new Ext.data.HttpProxy({url:'<%=basePath%>splitpage.do'}),
          reader: new Ext.data.JsonReader({
                  totalProperty: 'totalProperty',
                  root: 'root'
      },
      [
       {name: 'userid',mapping:'userid'},
          {name: 'usercode',mapping:'usercode'},
          {name: 'username',mapping:'username'},
          {name: 'classname',mapping:'classname'},
          {name: 'groupname',mapping:'groupname'}
      ])
      // 不排序
      // remoteSort:true
      });
     var grid = new Ext.grid.GridPanel({
       el: 'grid1',
       draggable: false,
       title:'<b style="font-family:宋体;font-size:14px;">班组列表</b>',
       width:720,
       height:540,
       trackMouseOver:false,
       loadMask: {msg:'正在加载数据，请稍侯……'},
       store:ds,
       cm: cm,
       disabled:false,
       sm:sm,
       bbar: new Ext.PagingToolbar({
               pageSize: 20,
               store: ds,
               displayInfo: true,
               emptyMsg:'没有记录',
               displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
               emptyMsg: "No topics to display"
           }),
      tbar: [
        {text:'<p style="font-family:宋体;font-size:12px;">添加</p>',cls:'x-btn-text-icon add',tooltip:'Add a new row',
         handler:function(){
       if(!win){
        var simple = new Ext.form.FormPanel({
         labelWidth: 35, // label settings here cascade unless overridden
          url:'<%=basePath%>addUsers.do?method=add',
         method:'POST',
         frame:true, 
         bodyStyle:'padding:5px 5px 0',
         width: 300,
         defaults: {width:200},
         defaultType: 'textfield',
         // /实现非AJAX提交表单一定要加下面的两行！
         // onSubmit:function(){alert("sdf");},
         //submit: function() {
          //有疑问的地方
          //this.getEl().dom.action='<%=basePath%>addUsers.do';
          //this.getEl().dom.submit();
         //},
         items: [{
          fieldLabel: '工号',
          id: 'usercode',
          allowBlank:false
         },{
          fieldLabel: '姓名',
          id: 'username',
          allowBlank:false
         }
         ],
         buttons: [{
          text: '<p style="font-family:宋体;font-size:12px;">添加</p>',
          type:'button',
          id:'login',
          handler: function(){
            simple.getForm().submit({
             method:'POST',
             waitMsg:'正在保存数据...',
             success:function(form,action){
              this.disabled=false;
              form.reset();
              alert('保存成功!');  
                                         win.hide();
              ds.load({params:{start:0, limit:20}});
              grid.getView().refresh();
             },
             failure:function(){
              alert('保存失败!');
             }
            });
           }
          },{
          text: '<p style="font-family:宋体;font-size:12px;">重置</p>',
          type:'reset',
          id:'clear',
          handler: function(){simple.getForm().reset();}
          }
          ]
        });
        win = new Ext.Window({
         layout:'fit',
         width:300,
         title:'<p style="font-family:宋体;font-size:12px;">添加坐席</p>',
         height:150,
         closeAction:'hide',
         plain:true,
         buttonAlign:'center'
        }); 
        win.add(simple);     
       }
       win.show(this);
      }
        },
        {text:'<p style="font-family:宋体;font-size:12px;">修改</p>',cls:'x-btn-text-icon update',tooltip:'Add a new row',
         handler:function(){
          var rec = grid.getSelections();
          if(rec.length>1){
           alert("一次只能选择一跳要修改的记录");
           return;
          }
          if(rec.length<1){
           alert("请选择一跳您要修改改的记录");
           return;
          }
          var userid = rec[0].get("userid");
          var usercode = rec[0].get("usercode");
          var username = rec[0].get("username");
          if(!modForm){
           modForm = new Ext.form.FormPanel({
            labelWidth: 35, // label settings here cascade unless overridden
          url:',
         method:'POST',
         frame:true, 
         disabled:false,
         bodyStyle:'padding:5px 5px 0',
         width: 300,
         defaults: {width:200},
         defaultType: 'textfield',
         reader:new Ext.data.JsonReader({  
                            root: 'rows',  
    //                      totalProperty: 'total',  
                            success:true,  
                           fields: [  
                                 'userid','usercode','username' 
                                ]  
                            }  
                         ),  
         items: [{
          fieldLabel: '编号',
          id: 'userid',
          allowBlank:false
         },{
          fieldLabel: '工号',
          id: 'usercode1',
          allowBlank:false
         },{
          fieldLabel: '姓名',
          id: 'username1',
          allowBlank:false
         }],
         buttons: [{
          text: '<p style="font-family:宋体;font-size:12px;">修改</p>',
          type:'button',
          id:'modify',
          handler: function(){
            modForm.getForm().submit({
             method:'POST',
             waitMsg:'正在保存数据...',
             success:function(form,action){
              form.reset();
              modWin.hide();
              alert('修改成功!');  
              ds.reload();
              grid.getView().refresh();
             },
             failure:function(){
              alert('修改失败!');
             }
            });
           }
          },{
          text: '<p style="font-family:宋体;font-size:12px;">重置</p>',
          type:'reset',
          id:'clear',
          handler: function(){modForm.getForm().reset();}
          }
         ]
           });
          }
          if(!modWin){
           modWin = new Ext.Window({
            layout:'fit',
         width:300,
         title:'<p style="font-family:宋体;font-size:12px;">修改坐席</p>',
         height:170,
         closeAction:'hide',
         plain:true,
         buttonAlign:'center'
           });
           modWin.add(modForm);
          }
          modWin.show(this);
          // 只有form被显示后才有值
          modForm.getForm().findField("userid").setValue(userid);
          modForm.getForm().findField("usercode1").setValue(usercode);
          modForm.getForm().findField("username1").setValue(username);
         }
        },
        {text:'<p style="font-family:宋体;font-size:12px;">删除</p>',cls:'x-btn-text-icon del',tooltip:'Add a new row',
         handler:function(){
          var ids = "";
          var rec = grid.getSelections();
          for(var i = 0 ; i < rec.length ; i ++ ){
        ids += rec[i].get("userid")+",";
       }
       if(ids.indexOf(",")!=-1){
        ids = ids.substring(0,ids.length-1);
       }
       if(ids==""){
        alert("请选择您要删除的记录");
        return;
       }
          if(window.confirm("您确定要删除吗？")){
           Ext.Ajax.request({
          url:',
         method:'POST',
         params: {ids:ids,method:'del'},  
            callback: function(options, success, response) {  
                alert("删除成功");
                ds.reload();
                grid.getView().refresh();
                // Ext.Msg.alert("提示","删除成功");
                // 回调函数
            }  
        });
          }
         }
        }
        ]  
      }); 
     ds.load({params:{start:0, limit:20}});
     grid.render();
  }
  window.onload = function(){
   createInfoTab();
  }
 </script>
  </head>
  <body>
  <div id="grid1"></div>
  </body>
</html>
很久之前就开始了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Ext JS]图片显示方式
oscar999的专栏
08-17 574
在上面的场景中， 就需要导入图片进行显示了。 而在Ext JS应用中， 要实现图片的显示，可以使用的方式有以下四种： 1. 最原生的方式： 使用HTML的img 标签 2. 使用Ext JS的Container 类型组件，设置的html 中使用HTML的img 标签 3. 使用Ext JS的image 组件 4. 在Ext JS 样式中设置背景图...
[Ext JS]3.2.3 下拉选项框 Combobox
oscar999的专栏
04-05 1887
Combobox 的介绍 Combobox ， 翻译过来是组合框， 也称为下拉框。 该组件类用于创建下拉单选项组件进行选值。对应的类是：Ext.form.field.ComboBox。 Combobox除了可以在下拉单选值，还支持自动完成（输入值时自动匹配下拉单中的选项），远程加载和其他的一些功能。 Ext JS 的Combobox 类似HTML的 <input>标签和<select>标签的组合。 支持在字段中自由输入，也可以从下拉单列表中选值。不在下拉单选项的值也可以输入； 但
ext js的讲解<一>
疯狂的扣子
01-26 347
不好意思老兄:收下人的文章，好难找呀: 原文[url]http://www.cnitblog.com/yemoo/archive/2007/12/18/37850.html[/url] Ext.util.Observable:一个抽象基类，为事件机制的管理提供一个公共接口,如果你希望的类可以有事件，就继承它吧 Ext.apply:如果只传入两个参数，则将C继承D的所有方法属性，如果定义了B则...
ExtJS中动态设置TextField的readOnly属性
小宝
04-28 361
假设 textField, 它的 id = 'textField' 则代码如下：Ext.getCmp("textField").getEl().dom.readOnly = true
Extjs getEl() 功能
自己的收藏请勿评论
01-14 878
Ext.Element API比较多，大伙用的时候也难以在短时间把住它的脉络，主要功能。这个给个总结，而不是一个API说明。说到API说明，网上早有大侠做得蛮不错的了。 位置设置： getX() 取得相对于页面的x坐标 getY() 取得相对于页面的y坐标 getXY()　取得相对于页面的x,y坐标，用法：ele.getXY()[0]/[1] getOffsetsTo(el) ...
初试Ext JS 6.6的NPM版（二）
黄灯桥的专栏
08-03 3266
NPM版的Ext JS，在文件解构上与使用Cmd版的区别不大，最大的改变是样式文件（scss文件）不再要求放在sass文件夹，而是可以与视图文件放在一起，如下图所示。 下面尝试把快速模版的东西迁移过来试试。先把app\desktop\src\view文件夹下的文件和文件夹删除。然后将快速模版中的app\view中的文件复制过来。把NavigationTree.js文件复制到app\deskt...
Sencha Ext JS 7.4.0.39 Crack
控件与插件之大全
09-22 899
Sencha Ext JS 7.4.0.39，使用 JavaScript 创建数据密集型 HTML5 应用程序，Sencha Ext JS 是最全面的 JavaScript 框架，用于为任何现代设备构建数据密集型、跨平台的 Web 和移动应用程序。Ext JS 包括 140 多个预先集成和测试的高性能 UI 组件。创建令人惊叹的 Web 应用程序所需的一切，Ext JS 包括 140 多个 UI 组件，例如 HTML5 日历、网格、透视网格、D3 适配器、树、列表、表单
3.2.8 Ext JS之字段集合(fieldset)
oscar999的专栏
03-12 443
Field Set，字段集合， 就是将一组字段放在一个容器中， Ext JS提供的组件类是 ：Ext.form.FieldSet ，xtype 是fieldset。
3.15 Ext JS 之 Tooltip 的基本使用
oscar999的专栏
09-27 534
Ext JS 创建 Tooltip 的类型 根据类创建实例。 Ext.tip.ToolTip 单例， 全局 。Ext.tip.QuickTip 直接设置HTML或是DOM的属性 1. 创建 Ext.tip.ToolTip的实例 var tip = Ext.create('Ext.tip.ToolTip', { target: 'myButton', html: 'My Button' }); target 属性的值可以是： Ext JS 的组件id Ext.dom.Element
ext JS 源码和学习资料
01-31
EXT JS 是一种基于JavaScript的富客户端应用框架，主要用于构建交互性强、用户体验良好的Web应用程序。它提供了大量的组件和功能，使得开发者能够轻松创建复杂的用户界面。本压缩包包含EXT JS的多个版本源码，如ext-...
javascript Ext JS 状态默认存储时间
10-30
在描述中提到的"javascript Ext JS 状态默认存储时间"，是指ExtJS如何处理这些状态信息的存储期限。 默认情况下，ExtJS使用`CookieProvider`类来存储状态信息。`CookieProvider`是ExtJS状态管理的一部分，它将状态...
Ext js in action
12-10
Bad Data is data that gets in the way. There are so many ways to get there, from cranky storage, to poor representation, to misguided policy. If you stick with this data science bit long enough, you’...
Ext JS 6.2.0
05-14
好东西就应该给大家分享，别嫌贵，也别嫌麻烦，觉得好你就点个赞鼓励鼓励
Ext js 4.1
10-31
这是Ext js 4，对于现在开发者来说，版本有点低了，但是对于初学者来说，是不错的版本。在Ext JS官网上有很好用的API，大家可以参考
3.11 Ext JS 下拉框（Combobox）使用
oscar999的专栏
07-26 2445
Combobox ， 翻译过来是组合框， 也称为下拉框。 该组件类用于创建下拉单选项组件进行选值。对应的类是：Ext.form.field.ComboBox。 基本用法 最简单的用法如下： { xtype:'combobox', fieldLabel:'My Combobox', store:['a','b','c'] } xtype 类型的别名 fieldLabel 字段的标签 store ： 下拉单的值来源。 其他常用的配置项还有： width 整
Ext ComboBox 分页功能
记住空间
09-16 621
// 创建下拉菜单 var createCombo = function() { var store = new Ext.data.JsonStore( { url: url, totalProperty: "tota
ext js portal源码
最新发布
01-29
Ext JS Portal源码是一个基于Ext JS框架开发的开源项目，它提供了一个灵活的、可定制的门户网站解决方案。该项目的源代码包含了门户网站所需的各种组件、插件和布局，用户可以根据自己的需求对其进行定制和扩展。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值