日期:2014-05-16 浏览次数:20376 次
(纯粹自娱自乐,如有帮助,看看即可;如果写的烂,也别扔鸡蛋)
四、Extjs:
1,ExtJs学习系列之 GridPanel:Ext.grid.ColumnModel 列配置属性说明
配置选项名??????? 类型????? 作用
header??????????? String??? 列头文字说明
dataIndex??????? String?? 记录结构中的name属性值
width?????????????? Number 列的宽度
sortable?????????? Boolean 是否排序
fixed??????????????? Boolean 是否固定宽度
resizable????????? Boolean? 是否能改变列的宽度
menuDisabled?? Boolean? 单击类头后是否出现菜单
tooltip????????????? String??? 悬停提示
renderer?????????? Function 自定义单元格内容
align???????????????? String??? 列的对齐方式,有left、center和right
2,GridPanel
1》//在顶部的分页工具栏
//tbar: pagingToolbar,
// 在底部的分页工具栏
bbar: pagingToolbar
2》Ext.data.HttpProxy 创建访问服务端的代理
Ext.data.JsonReader 创建读取器
Ext.data.Store 数据存储器
Ext.grid.ColumnModel gridPanel呈现时,显示的列集合
Ext.PagingToolbar gridPanel分页
Ext.grid.GridPanel 数据呈现
2,1》events' 为空或不是对象
'dom' 为空或不是对象
检查是否renderTo:" " 容器对应的DOM是否存在
2》'bbar' :bbar: new Ext.PagingToolbar未定义,查找函数中的PagingToolbar,分页对象是否定义。
3,消息: 缺少标识符、字符串或数字
行: 23
字符: 4
代码: 0
URI: http://localhost:7001/tmos_2g/test/renderformpanelhtmlbody.jsp
在IE中,JSON最后一项的末尾是不允许有逗号的,在FF等浏览器下则可有可无。
4,extjs 'this.ds' 为空或不是对象:Grid的存储没有指定,先定义store,为grid添加一个数据集
5,Ext.data中常用proxy:
1》MemoryProxy只能从JavaScript对象获得数据,可以直接把数组,或JSON和XML格式的数据交给它处理;
2》HttpProxy使用HTTP协议,通过Ajax去后台取数据,构造它时需要设置url:'xxx.jsp'参数。这里的url可以替换成任何一个合法的网址,这样HttpProxy才知道去哪里获取数据;
3》ScriptTagProxy的用法几乎和HttpProxy一样
6, new Ext.form.DateTimeField({??
? id:'RETURN_TIME',??
? //format:'Y年m月d日 h时m分s秒',//显示日期的格式??
?maxValue :'9100-01-01',//允许选择的最大日期??
?minValue :'2000-01-01',//允许选择的最小日期??
?//disabledDates : ["2008年03月12日"],//禁止选择2008年03月12日??
? //disabledDatesText :'禁止选择该日期',??
? //disabledDays : [0,6],//禁止选择星期日和星期六??
?//disabledDaysText : '禁止选择该日期',??
?width : 200,??
?fieldLabel:'回单时间'
? })
7,当数据库中有大量数据需要显示时,最后返回空白页面,设置时间小所致:
Ext.data.Connection.prototype.timeout='180000';//设置ajax请求时间,默认30秒?
8,在ExtJs库文件及页面内容加载完后,ExtJs会执行Ext.onReady中指定的函数,因此没个用户的ExtJs应用都是从Ext.onReady开始的
9,显示图片:
cm : new Ext.grid.ColumnModel([
{ id: 'DEAL_STATE',? header: "标志", dataIndex: 'DEAL_STATE',
??????????? renderer:function(value){
???????????? if (value == '成功') {
?????????????? return "<span style='color:red;font-weight:bold;'>成功</span><img src='/tmos_2g/share/ext-3.2.0/resources/images/default/window/icon-error.gif' />";
????????????? } else {
?????????????? return "<span style='color:green;font-weight:bold;'>失败</span>";
????????????? }
???????????? },width: 120, align: 'left',? sortable: true
??????????? },
??????????? new Ext.grid.RowNumberer({header : "序号",width : 60,
???? renderer:function(value,store,record,rowIndex){? return record_start + 1 + rowIndex;}
??? }
)
10,Ext.Toolbar内容右对齐,Toolbar里添加new Ext.Toolbar.Fill()即可
11,window.location.reload重新加载。
?