js，真是祸害不浅。

Question

公司一个项目，就三个.JSP页面，剩下的全是.js文件，看的我蛋疼// 查看今天考试信息
function searchInfo(){
Ext.QuickTips.init();
// 设定内部数据类型对象
// lsh  zkzmbh  xm  xb  yyrq  ykrq  kscs  kscx ykbz  ksdd  ksrq           ksxm
var si = Ext.data.Record.create([
{ name :'lsh',    mapping :'lsh',     type :'string' },
{ name :'zkzmbh', mapping : 'zkzmbh', type :'string'},
{ name :'xm',     mapping :'xm',      type :'string' },
{ name :'xb',     mapping :'xb',      type :'string' },
{ name :'yyrq',   mapping :'yyrq',    type :'String' },
{ name :'ykrq',   mapping :'ykrq',    type :'string' },
{ name :'kscs',   mapping :'kscs',    type :'string' },
{ name :'kscx',   mapping :'kscx',    type :'string' },
{ name :'ykbz',   mapping :'ykbz',    type :'string' },
{ name :'ksdd',   mapping :'ksdd',    type :'string' },
{ name :'ksrq',   mapping :'ksrq',    type :'string' },
{ name :'ksxm',   mapping :'ksxm',    type :'string' }
]);
var siProxy = new Ext.data.HttpProxy( 
{ url :"/KM3/gtgh/searchRecordInfo.action" }
);
var jReader = new Ext.data.JsonReader( 
{ root :'searchInfoList' }, si
);
var searchStore = new Ext.data.Store( 
{ proxy :siProxy, reader :jReader, baseParams: {name:''} }
);
var grid = new Ext.grid.GridPanel( {
loadMask  :true, 
id        : 'rsGrid',
viewConfig: {forceFit: true},// 设置每一列的宽度
columns   : [ 
{ header :"流水号", dataIndex :"lsh", width :100  },
{ header :"桩考证明编号", dataIndex :"zkzmbh", width :150 },
{ header :"姓名", dataIndex :"xm", width :100 },
{ header :"性别", dataIndex :"xb", width :100 },
{ header :"预约日期", dataIndex :"yyrq", width :150 },
{ header :"约考日期", dataIndex :"ykrq", width :100 },
  { header :"考试次数",dataIndex :"kscs", width :100 }, 
{ header :"考试车型",dataIndex :"kscx", width :100 }, 
{ header :"考试地点", dataIndex :"ksdd", width :150 },
{ header :"是否夜考",dataIndex :"ykbz", width :100 }, 
{ header :"考试日期",dataIndex :"ksrq", width :100 }, 
{ header :"考生姓名",dataIndex :"ksxm", width :100 }
],
store             :searchStore,
bbar:new Ext.PagingToolbar({
pageSize       :15,
store          :searchStore,
displayInfo    :true,
beforePageText : "第",
afterPageText  : "页,共{0}页",
firstText      : "第一页",
prevText       : "前一页",
nextText       : "下一页",
lastText       : "最后页",
displayMsg     :'显示第{0}条到{1}条记录，一共{2}条',
emptyMsg       :"没有记录"
})
});
searchStore.load({ params:{ start:0, limit:15 }
});
var myform=new Ext.FormPanel({
frame         :true,
title         :"查看当天考试信息",
collapsible   :false,
defaults      : {width: 180},
width         :1059,
minButtonWidth:60,
labelAlign    :"left",
defaultType   :"textfield",
buttonAlign   :'left',
layout        :'column'
    });
if (tab.getComponent('selInfo')){
tab.remove('selInfo',true);
}
tab.add( {
id            :'selInfo',
title         :"查看当天考试信息",
bodyStyle     :'overflow-x:visible;overflow-y:scroll;width:100%', //隐藏水平滚动条 
items         : [myform,grid],
closable      :true
}).show();
grid.on("rowdblclick", function(grid) {
showWin(grid);
});
   
// 弹出查看窗口
function showWin(grid) {
    var _record = grid.getSelectionModel().getSelected();
    var win = new Ext.Window({
width         : 400,
height        : 300,
closeAction   : 'hide',
plain         : true,
title         : '当天考试信息',
animateTarget :'rsGrid',
items         : new Ext.FormPanel(
{
title       : '查看当天考试信息',
id          : 'selNowInfo',
defaultType : 'textfield',
frame       : true,
items       : [
{ fieldLabel : '流水号', name : 'id', width : 150, value : _record.data.id, readOnly : true },
 
{ fieldLabel : '姓名', name : 'xm', width : 150, value : _record.data.creatTime, readOnly : true },
{ fieldLabel : '考试科目', name : 'kskm', width : 150, value : _record.data.roleName, readOnly : true },
{ fieldLabel : '预约日期', name : 'yyrq', width : 150, value : _record.data.creatTime, readOnly : true },
{ fieldLabel : '约考日期', name : 'ykrq', width : 150, value : _record.data.id, readOnly : true },
{ fieldLabel : '考试车型', name : 'kscx', width : 150, value : _record.data.roleName, readOnly : true },
{ fieldLabel : '考试地点', name : 'ksdd', width : 150, value : _record.data.roleName, readOnly : true },
{ fieldLabel : '考试日期', name : 'ksrq', width : 150, value : _record.data.id, readOnly : true },
{ fieldLabel : '考试日期', name : 'ksrq', width : 150, value : _record.data.id, readOnly : true }
 
],
buttons : [ { text : '关闭', handler : function() { win.hide(); } } ]
})
});
win.show();
}谁会EXT 给指教一下？？？？？？？？

Answer 1

我也正在学ext啊，我同事写的比这要复杂的多，写的是工程画图工具，全身extjs代码，恶心的一比啊

Answer 2

这个算什么，那个EXT3.2版本6万行源代码，我全部打印出来了700多页。并且看了一遍了！其实我学JS也才几个月时间!

Answer 3

我也和LZ一样晕咯，不过大概能看明白一点点哦。只能看懂这部分
// 设定内部数据类型对象
// lsh zkzmbh xm xb yyrq ykrq kscs kscx ykbz ksdd ksrq ksxm
var si = Ext.data.Record.create([
{ name :'lsh', mapping :'lsh', type :'string' },
{ name :'zkzmbh', mapping : 'zkzmbh', type :'string'},
{ name :'xm', mapping :'xm', type :'string' }, 
{ name :'xb', mapping :'xb', type :'string' },
{ name :'yyrq', mapping :'yyrq', type :'String' },
{ name :'ykrq', mapping :'ykrq', type :'string' },
{ name :'kscs', mapping :'kscs', type :'string' },
{ name :'kscx', mapping :'kscx', type :'string' },
{ name :'ykbz', mapping :'ykbz', type :'string' },
{ name :'ksdd', mapping :'ksdd', type :'string' },
{ name :'ksrq', mapping :'ksrq', type :'string' },
{ name :'ksxm', mapping :'ksxm', type :'string' }
]);和这部分
columns : [  
{ header :"流水号", dataIndex :"lsh", width :100 },
{ header :"桩考证明编号", dataIndex :"zkzmbh", width :150 },
{ header :"姓名", dataIndex :"xm", width :100 },
{ header :"性别", dataIndex :"xb", width :100 },
{ header :"预约日期", dataIndex :"yyrq", width :150 },
{ header :"约考日期", dataIndex :"ykrq", width :100 },
{ header :"考试次数",dataIndex :"kscs", width :100 },  
{ header :"考试车型",dataIndex :"kscx", width :100 },  
{ header :"考试地点", dataIndex :"ksdd", width :150 },
{ header :"是否夜考",dataIndex :"ykbz", width :100 },  
{ header :"考试日期",dataIndex :"ksrq", width :100 },  
{ header :"考生姓名",dataIndex :"ksxm", width :100 }
],是相对应的，就是注释里面的内部数据设置。
下面这部分是一个弹出窗口
// 弹出查看窗口
function showWin(grid) {
  var _record = grid.getSelectionModel().getSelected();
  var win = new Ext.Window({
width : 400,
height : 300,
closeAction : 'hide',
plain : true,
title : '当天考试信息',
animateTarget :'rsGrid',
items : new Ext.FormPanel(
{
title : '查看当天考试信息',
id : 'selNowInfo',
defaultType : 'textfield',
frame : true,
items : [
{ fieldLabel : '流水号', name : 'id', width : 150, value : _record.data.id, readOnly : true },
  
{ fieldLabel : '姓名', name : 'xm', width : 150, value : _record.data.creatTime, readOnly : true },
{ fieldLabel : '考试科目', name : 'kskm', width : 150, value : _record.data.roleName, readOnly : true },
{ fieldLabel : '预约日期', name : 'yyrq', width : 150, value : _record.data.creatTime, readOnly : true },
{ fieldLabel : '约考日期', name : 'ykrq', width : 150, value : _record.data.id, readOnly : true },
{ fieldLabel : '考试车型', name : 'kscx', width : 150, value : _record.data.roleName, readOnly : true },
{ fieldLabel : '考试地点', name : 'ksdd', width : 150, value : _record.data.roleName, readOnly : true },
{ fieldLabel : '考试日期', name : 'ksrq', width : 150, value : _record.data.id, readOnly : true },
{ fieldLabel : '考试日期', name : 'ksrq', width : 150, value : _record.data.id, readOnly : true }
  
],
buttons : [ { text : '关闭', handler : function() { win.hide(); } } ]
})
});
win.show();
}下面这部分，我也想知道是干嘛用的，还请高人指点.var siProxy = new Ext.data.HttpProxy(  
{ url :"/KM3/gtgh/searchRecordInfo.action" }
);
var jReader = new Ext.data.JsonReader(  
{ root :'searchInfoList' }, si
);
var searchStore = new Ext.data.Store(  
{ proxy :siProxy, reader :jReader, baseParams: {name:''} }
);
var grid = new Ext.grid.GridPanel( {
loadMask :true,  
id : 'rsGrid', 

Answer 4

其实就是json罢了,自从大家对xml逐步淡化,现在json已经是ajax的首选搭档了,
尤其是大型的网站,后台基本上就是提取一下数据生成json然后丢给前台,让客户端的js来做处理,籍此分担服务器的压力
不过这也苦了那些电脑配置很低的用户了.

Answer 5

var siProxy = new Ext.data.HttpProxy(  
{ url :"/KM3/gtgh/searchRecordInfo.action" }
);
var jReader = new Ext.data.JsonReader(  
{ root :'searchInfoList' }, si
);
var searchStore = new Ext.data.Store(  
{ proxy :siProxy, reader :jReader, baseParams: {name:''} }
);
var grid = new Ext.grid.GridPanel( {
loadMask :true,  
id : 'rsGrid', 创建grid以及grid的数据源,从"/KM3/gtgh/searchRecordInfo.action"请求数据
你用FF的firebug调试一下就清楚了

Answer 6

页面上的体现当然是JS用得多。
 HTML5普及之后就会更多

Answer 7

Q群 153211234 DEDE、uchome技术交流，海兄弟期待你的加入