1 var grid = new Ext.grid.GridPanel([{
2 cm: new Ext.grid.ColumnModel({
3 header: '',
4 dataIndex: '',
5 //设置列显示值
6 //v:当前列的值
7 //params:当前列的参数
8 //record:当前记录集
9 renderer: function(v, params, record){}
10 }])，
11 form: new Ext.form.FormPanel({
12 }
13 })
14 })
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/public.js"></script>
<script type="text/javascript">
var grid,grid1,grid2
var store,store2,store1
var myData = []
var myData1 = []
var fp,fp1,fp2
var win1,win2,win3
var cm,cm1,cm2
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel()
function getColumnModel(){
var cols=[]
cols[cols.length]=new Ext.grid.RowNumberer()
cols[cols.length]={id:'intID',header: "ID",align: 'center',width: 50,dataIndex: 'intID',hidden: true}
cols[cols.length]={id:'day_date',header: "时间1",align: 'center',width: 150,dataIndex: 'day_date'}
cols[cols.length]={id:'Model',header: "MODEL",align: 'center',width: 80,dataIndex: 'Model'}
cols[cols.length]={id:'Item',header: "ITEM",align: 'center',width: 80,dataIndex: 'Item'}
cols[cols.length]={id:'Line',header: "线别",align: 'center' ,width: 80,dataIndex: 'Line'}
cols[cols.length]={id:'classother',header: "班别",align: 'center',width: 80,dataIndex: 'classother'}
cols[cols.length]={id:'Sect',header: "段别",align: 'center',width: 80,dataIndex: 'Sect'}
cols[cols.length]={id:'Ng_Qty',header: "不良数量",align: 'center',width: 120,dataIndex: 'Ng_Qty',listeners: {rowselect: function(cm, row, rec) {alert(row)} }}
cols[cols.length]={id:'Fae_Qty',header: "维修数量",align: 'center',width: 80,dataIndex: 'Fae_Qty'}
cols[cols.length]={id:'Wait_For_Qty',header: "待修数量",align: 'center',width: 120,dataIndex: 'Wait_For_Qty'}
cols[cols.length]={id:'Rate',header: "比率",align: 'center',width: 100,dataIndex: 'Rate'}
cols[cols.length]=sm
cm = new Ext.grid.ColumnModel(cols)
return cm
}
var Plant = Ext.data.Record.create([/*数据工厂*/
//start_pn,end_pn,model,item,ver,buyer,rom_ver,DISTRIBUTE_qty,work_user
{name: 'intID', type: 'int'},
{name: 'day_date', type: 'string'},
{name: 'Model', type: 'string'},
{name: 'Item', type: 'string'},
{name: 'Line', type: 'string'},
{name: 'classother', type: 'string'},
{name: 'Sect', type: 'string'},
{name: 'Ng_Qty', type: 'string'},
{name: 'Fae_Qty', type: 'string'},
{name: 'Wait_For_Qty', type: 'string'},
{name: 'Rate', type: 'string'},
sm,
])
store = new Ext.data.Store({/*数据仓库，装载在数据工厂里面*/
proxy: new Ext.data.HttpProxy({url:'../SfcStateServlet'}),
reader: new Ext.data.JsonReader({root: 'root', totalProperty : 'totalProperty',id: 'intID'}, Plant)
})
store.load()
cm=getColumnModel()
grid = new Ext.grid.GridPanel({
id:'mygrid',
frame: false,
store: store,
cm:cm,
sm:sm,
width: window.document.body.clientWidth * 1.00,
height: 150,
collapsible: false,
collapsed : false,
border:false,
autoScroll:true,
stripeRows: true
})
var pp=new Ext.Panel({
title:document.title,
width: window.document.body.clientWidth * 1.00,
height: window.document.body.clientHeight * 1.00,
renderTo:"gridbasic",
items:[{
title:"维修比例",
closable:true,
items:grid
} ]
})
})
</script>
</head>
<body style="margin:0pxbackground-color:#EAEEF7overflow:hidden">
<input disabled='false' name='Rate' value='999' style='width:35%height: 20px' align="bottom" >
<form name="mainform" action="">
<div id="gridbasic"></div>
</form>
<div id="panelbasic"></div>
</body>
</html>
简单！viewport可以指定fit布局放置formPanel，至于四行五列，formPanel下可以指定其他布局，什么column布局、table布局、绝对布局都可的，但是这么做会导致不再是form布局了，而fieldLabel只能在form布局下使用，这里可以变通下，可以单独使用label控件，或者在其他布局下再套一层form布局，这些都是可以实现的，我们自己开发经常这么干
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）