java web ext 例子（jsonstore ，gridpanel，formpanel）

最新推荐文章于 2016-12-08 12:15:28 发布

yklfxy

最新推荐文章于 2016-12-08 12:15:28 发布

阅读量719

点赞数

分类专栏： java web 文章标签： java ext web function button layout

本文链接：https://blog.csdn.net/yklfxy/article/details/6650358

版权

java web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>账户管理</title>
<meta name="keywords" content="电子商务账户管理">
<meta name="description" content="账户管理">
<link type="text/css" rel="stylesheet"
   href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css">

</head>
<body>
   <div id="formdiv"></div>
   <div id="griddiv"></div>
   <script src="<%=request.getContextPath()%>/ext/js/ext-base.js"
       type="text/javascript"></script>
   <script src="<%=request.getContextPath()%>/ext/js/ext-all-debug.js"
       type="text/javascript"></script>
   <script language="javascript">
   Ext.onReady(function(){
       //动态返回所属部门Json下拉框数据
       var dataforsex=new Ext.data.JsonStore({
           //autoLoad : true,
           url:'../accountinfo/getdep',//请求获取部门信息
           fields:["id","val"]
           });

       var formdiv=new Ext.form.FormPanel({
           id:'query',
           name:'query',
           renderTo:"formdiv",
           items:[{
               xtype:"fieldset",
               title:"帐号查询",
               layout: 'column',

               collapsible:true,
               autoHeight:true,
               labelAlign:"right",
               buttonAlign:"center",
               items:[{
                   layout : 'form',
                    border : false,
                    items : [{
                       xtype:"textfield",
                       id:"accountinfoname",
                       columnWidth : .3,
                       layout:"form",
                       fieldLabel:"账号"
               }]},{
                   layout : 'form',
                    border : false,
                    items : [{
                       xtype:"textfield",
                       id:"role",
                       columnWidth : .3,
                       layout:"form",
                       fieldLabel:"角色"
               }]
               },{
                   layout : 'form',
                    border : false,
                    items : [{
                        xtype:"combo",
                        id: "department",
                        store: dataforsex,
                        hiddenName: "id",   //隐式值，form获取该组件时使用此值，
                        displayField: "val",   //显示值，用于在页面表示的值
                        mode: 'remote',   //数据获取来源方式，这里表示远程下载
                        forceSelection: true,
                        blankText: '',   //设置空白默认值
                        emptyText: '请选择类型',   //设置默认值
                        editable: false,
                        triggerAction: 'all',
                        allowBlank: true,
                        fieldLabel: '所属部门'

               }]
               }],
               buttons:[{
                   xtype:"button",
                   //点击事件处理
                   handler: send,
                   text:"查询"
               },
                   {xtype:"button",
                   handler:reset,//点击事件处理
                   text:"重置"
                   }]
           }]
           });
       //重置事件处理
   function reset(){
       formdiv.getForm().reset();
       }
   //网格数据grid
   //网格数据缓存

   var dataforgrid=new Ext.data.JsonStore({
       //autoLoad :true,
       root:"data",
       totalProperty:"all",
       fields:["id","accountinfoname","password","role","department_"],//数据格式，对映grid中dataindex的值
       url:"../accountinfo/accountlist_0"   //向服务器请求数据
       });

   var cm=new Ext.grid.CheckboxSelectionModel({
       singleSelect:true//grid数据行的单多选属性

   });
   //查询事件处理
   function send(){
       Ext.Msg.alert("title",Ext.getDom("department").hiddenValue
               );

   dataforgrid.load({params:{
       start:0,
       limit:5,
       accountinfoname:Ext.getDom("accountinfoname").value,
       role:Ext.getDom("role").value,
       department_:Ext.getDom("department").value
   }});
       }
   var grid = new Ext.grid.GridPanel({

       //grid面板前端工具条
       tbar:new Ext.PagingToolbar({

           pageSize:5,
           displayInfo : true,
            displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条记录',
            emptyMsg : '没有记录',
           store:dataforgrid,
           items:[{
               xtype:"button",
               width:"50",
               //点击事件处理
               handler: function add(){
                   window.location.href ='../accountinfo/add';

                   },
               text:"新增"
           },{
               xtype:"button",
               width:"50",
               //点击事件处理
               handler: function edit(){

                   if(grid.getSelectionModel().getCount()==0){
                       Ext.Msg.alert("提示","请选择一项修改");
                   }
                   else{
                       window.location.href ='../accountinfo/edit_'+grid.getSelectionModel().getSelected().id;
                       //请求服务器处理edit事件
                   }

                   },
               text:"修改"
           },{xtype: 'tbseparator'},

               {xtype:"button",
               width:"50",
               handler:function dele(){
                   if(grid.getSelectionModel().getCount()==0){
                       Ext.Msg.alert("提示","请选择一项修改");
                   }
                   else{
                       var url='../accountinfo/delete_'+grid.getSelectionModel().getSelected().id;
                       Ext.Ajax.request({
                               url: url,
                               success: function(response){
                                  dataforgrid.remove(grid.getSelectionModel().getSelected());
                               },
                               failure: function(){
                                   Ext.Msg.alert("错误","删除出错，请重试。");
                               }
                           });
                       //请求服务器处理edit事件
                   }

               },//点击事件处理
               text:"删除"
           }]
   }),
       renderTo:"griddiv",//渲染到页面div标签id="griddiv"的地方
       store: dataforgrid,   //加载数据
       columns: [
           new Ext.grid.RowNumberer(),
           cm,
           //注意dataindex 对载入的store数据字段名。
           {id:"id", width: 200, hidden :true, dataIndex: 'id'},
           { header: "账号", width: 200, sortable: true, dataIndex: 'accountinfoname'},
           { header: "密码", width: 200, sortable: true, dataIndex: 'password'},
           { header: "角色", width: 200, sortable: true, dataIndex: 'role'},
           { header: "所属部门", width: 200, sortable: true, dataIndex: 'department_'}
           ],
       sm: cm,
       height:300

   });
   dataforgrid.load({params : {start:0,limit:5}});
   });

   </script>

</body>
</html>

yklfxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java web ext 例子（jsonstore ，gridpanel，formpanel）

pageEncoding="UTF-8"%>账户管理 href="/ext/resources/css/ext-all.css"> /ext/js/ext-base.js"
复制链接

扫一扫