Extjs3.2 grid简单例子1

最新推荐文章于 2018-09-27 20:43:10 发布

fengoh

最新推荐文章于 2018-09-27 20:43:10 发布

阅读量2k

点赞数

分类专栏： Extjs3

本文链接：https://blog.csdn.net/fengoh/article/details/21237887

版权

Extjs3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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=gbk">
<title>团队列表管理</title>

<script type="text/javascript" src="../js/pub.js"></script>//根据自己的路径修改
<script type="text/javascript">
var addwin, addformPanel, grid1,record2,orgName,team_no,store;
Ext.onReady(function() {
  Ext.QuickTips.init();//启动悬浮提示,默认情况下悬浮提示没有启动
  var url = '/Mobile_Server/admin/teamToEmployee.do';
  var percentage = '95%';//显示百分比
  var pageSize = 4;//当前页显示的信息条数
  var addflag = true;

  var condition1 = new Ext.form.TextField({
   fieldLabel : "团队名称",
   vtype : 'special',
   maxLength : '60',
   anchor : '95%',
   name : 'orgName',
   listeners : {//回车事件
                specialKey : function(field, e) {
                    if (e.getKey() == Ext.EventObject.ENTER) {//响应回车
                    store.baseParams['orgName'] = queryForm.form
      .findField('orgName')
      .getValue();
      store.load({
        params : {
         start : 0,
         limit : pageSize
        }
      });
                    }
                }
            }
  });

  var basisData = new Object;
  basisData.getNewData = function() {
   return Ext.data.Record.create([
       {
    name : 'org_name',
    mapping : 'org_name' //这个跟后台返回的json字段对应
    }, {
    name : 'org_no',
    mapping : 'org_no'
    }, {
    name : 'shouru',
    mapping : 'shouru'
    }, {
    name : 'shangji',
    mapping : 'shangji'
    }, {
    name : 'finish_rate',
    mapping : 'finish_rate'
    },{
    name : 'zhibiao',
    mapping : 'zhibiao'
    }

]);
};

//{"totalsize":"5","result":"888000","analyzes":[{"org_name":"顺义组","finish_rate":"50000","org_no":"2018","zhibiao":"2","shouru//":"10","shangji":"10"},{"org_name":"大兴组","org_no":"2009"},{"org_name":"海淀组","org_no":"2015"},{"org_name":"朝阳组","org_no"://"2012"}],"desc":"查询列表成功"}

   loadMask : true,//store.load()完成之前会一直显示“Loading...”
   buttonAlign : 'center',
   //分页
   bbar : new Ext.PagingToolbar({//bbar是将分页工具条放到底部，tbar是放在顶部
    pageSize : pageSize,
    store : store,
    displayInfo : true
   }),
   viewConfig : {
    forceFit : true,//自动调剂表格宽度
    showPreview : true,//初始显示预览效果,这个是自定义的属性
    columnsText : '显示列',
    sortAscText : '升序',
    sortDescText : '降序'
   },
   emptyMsg : "没有数据",
   frame : true,//Panel是圆角框显示
   height : 250,
   collapsible : true,//伸缩
   animCollapse : false,
   iconCls : 'icon-grid'
  });

  new Ext.Viewport({//VeiwPort表示整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例
   layout : 'border',
   monitorResize : true,
   items : [ queryForm ,grid1]
  });

});
function renderOper(value, metaData, record, rowIndex) {
  team_no = store.getAt(rowIndex).get('org_no');
  var team_name = store.getAt(rowIndex).get('org_name');
  var str = '<a href="/Mobile_Server/pc/employeeList.html?operFlag=employee&team_no='+team_no+'">详细信息</a>  ';// 是空格
  str += '<a href="/Mobile_Server/pc/charts/chart.html?team_no='+team_no+'">图表分析</a>';
  return str;
}

</script>
</head>
<body>
<div id="vipMsg"></div>
</body>
</html>

fengoh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs3.2 grid简单例子1

http://www.w3.org/TR/html4/loose.dtd"> 团队列表管理//根据自己的路径修改 var addwin, addformPanel, grid1,record2,orgName,team_no,store; Ext.onReady(function() { Ext.QuickTips.init();//启动悬
复制链接

扫一扫