Extjs3.2 grid简单例子1
2014-03-14 15:12
232 查看
<!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 queryForm = new Ext.FormPanel({
region : 'north',
labelAlign : 'right',
labelWidth : 150,
frame : true,
bodyStyle : 'padding:0px 0px 0',
buttonAlign : 'center',
height : 180,
items : [ {
columnWidth : 0.6,
rowHeight : 0.6,
xtype : 'fieldset',
title : '团队列表管理',
collapsible : false,
autoHeight : true,
layout : 'column',
defaults : {
width : 200
},
defaultType : 'textfield',
style : {
"margin-top" : "0%",
"margin-left" : "0%",
"margin-right" : "0%"
},
items : [
{
columnWidth : 0.25,
rowHeight : 0.1,
xtype : 'fieldset',
defaultType : 'textfield',
bodyStyle : Ext.isIE ? 'padding:0 0 0px 0px;'
: 'padding:10px 15px;',
border : false,
style : {
"margin-left" : "0%", // when you add custom
"margin-right" : "0%" // you have to adjust for it
},
labelAlign : 'right',
items : [ condition1 ]
}
]
} ],
buttons : [
{
text : '查询',
handler : function() {
store.baseParams['orgName'] = queryForm.form
.findField('orgName')
.getValue();
store.load({
params : {//传参数
start : 0,
limit : pageSize
}
});
}
}, {
text : '重置',
handler : function() {
queryForm.form.reset();
}
},{
text : '显示全部',
handler : function() {
alert("not yet!");
}
}
]
});
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":"查询列表成功"}var reader = new Ext.data.JsonReader({
id : 'id',
totalProperty : 'totalsize',//后台返回的json字段，表示信息总条数
root : "analyzes",//后台返回的json数据
remoteSort : true//是否支持远程排序
}, basisData.getNewData());
store = new Ext.data.Store({
baseParams : {
operFlag : 'team'
},
proxy : new Ext.data.HttpProxy({
url : url,
method : 'POST'//这个好像是必写的,要不写后台拿不到limt和start
}),
reader : reader
});
store.load({
params : {
start : 0,
limit : pageSize
}
});
grid1 = new Ext.grid.EditorGridPanel({//以下是显示数据
region : 'center',
store : store,
stripeRows : true,//斑马线
cm : new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
header : "团队名称",
width : 15,
sortable : true,
dataIndex : 'org_name',//与上面的name要对应
}, {
header : "团队id",
width : 15,
sortable : true,
dataIndex : 'org_no',
}, {
header : "商机数量",
width : 15,
sortable : true,
dataIndex : 'shangji',
}, {
header : "收入",
width : 15,
sortable : true,
dataIndex : 'shouru'
},{
header : "指标",
width : 15,
sortable : true,
dataIndex : 'zhibiao'
}, {
header : "完成率",
width : 15,
sortable : true,
dataIndex : 'finish_rate',
renderer : function(value){
if (value == 0){
return "<span style='color: red; font-weight: bold;'>0%</span>";
}else if(value == 100){
return "<span style='color: green; font-weight: bold;'>100%</span>";
}
else{
return value/100+"<span>%</span>";
}
}
}, {
header : "操作",
width : 15,
sortable : true,
dataIndex : 'operate',
renderer : renderOper
} ]),
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs3.2+Json lib动态树与GridPanel简单展现
- extjs 下拉框 combobox 简单例子
- Coolite一个简单例子-GridPanel列表增删改预览
- ExtJs、Struts2、Hibernate3.2的Grid后台分页
- [转]ExtJS Grid 分页时保持选中的简单实现方法
- 用ExtJs+Linq+Wcf打造简单grid
- Extjs中加载异步树的最简单例子实现
- extjs简单分页grid的总结
- ExtJs、Struts2、Hibernate3.2登录页面的简单实现
- Extjs4--简单的Grid表格
- 网上的NineGridlayout的简单例子和一些坑
- Coolite一个简单例子-GridPanel列表增删改预览
- GridSplitter的一个简单例子
- Grid与Store的最简单的例子
- Coolite一个简单例子-GridPanel列表增删改预览
- 初学JavaScript_03(ExtJs Grid的简单使用)
- Extjs GridPanel使用攻略简单教程
- 一个完整的extjs的GridPanel例子
- Extjs4.2 线图和柱图的融合图的简单例子1