EXT实用笔记(一)
近期开发一个项目要使用到EXTJS,从完全不懂摸索着进行,到将项目完成,过程中发现很多问题,因为是新手,我根据我的学习方式将我的问题记录下来了,方便遇到相同问题的人们,里面部分是网上收集的,大部分是自己总结的,转载请注明出处(http://echoetang.iteye.com/admin/blogs/510499 By:Gxmis-alextang)
//Combobox动态加载数据的方法
//子系统版本的数据(多个地方共用)
var updateversionstore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'findsystemversion.action'}),
reader:new Ext.data.ArrayReader({},[{name:'value'},{name:'text'}])
});
///////////////////////////////////////////////////////////////////////////////////////// {
xtype:'combo',
fieldLabel:'当前版本',
width:300,
name:'sysversion.currentversion',
id :'veraddsubcurrentversion',
allowBlank:false,
editable:false,
store:updateversionstore,
//emptyText:'请选择子系统版本',
//表示需要的数据已经读取到本地,不需要到后台去读取
mode:'remote',
triggerAction:'all',
valueField:'value',
displayField:'text',
listeners:{
//展开的时候就加载数据
"expand":function(){
//为右边的系统版本号的combox加载数据
updateversionstore.removeAll(); updateversionstore.load({params:{subSysName:selectedSunSystemName}});
}
}
}
//为Datefield控件设置值的方法
Ext.getCmp('saveversiondate').setValue(new Date())
Ext.getCmp('saveversionvalidate').setValue(new Date(oneRecord.data.versionvalidate));
-àoneRecord.data.versionvalidate是一个字符串:格式为2007/08/07 或者 2007-08-/07都可以
//关于日期控件(DateField)在FireFox3下过长的解决办法
FireFox 3.x 出来了一段时间了，很多用户依然使用的是EXTJS 2.02的版本。（很多原因......）,日期控件在FireFox 3.x 下会被拉得很长很长。
这一个问题官方已经解决了。解决办法：
你必须在CSS中明确设置它的宽度。
在文件引用的css文件中加上这个css样式就可以了
.x-date-middle {
padding-top:2px;padding-bottom:2px;
width:130px; /* FF3 */
}
另一种解决办法：
（来自lonelyblue的解决方法）
[*]Ext.override(Ext.menu.DateMenu,{
[*] render : function (){
[*] Ext.menu.DateMenu.superclass.render.call(this );
if (Ext.isGecko){
[*] this .picker.el.dom.childNodes.style.width = '178px' ;
[*] this .picker.el.dom.style.width = '178px' ;
[*] }
[*] }
[*]});
还有一种方法是:
搜索ext-all.css，找到这一行：
Java代码
[*].x-date-picker{border:1px solid #1b376c;border-top:0 none;background:#fff;position:relative;}
.x-date-picker{border:1px solid #1b376c;border-top:0 none;background:#fff;position:relative;}
替换为:
Java代码
[*].x-date-picker{border:1px solid #1b376c;border-top:0 none;background:#fff;position:relative;width:10px;}
.x-date-picker{border:1px solid #1b376c;border-top:0 none;background:#fff;position:relative;width:10px;}
(测试通过)
//store和grid绑定不了的问题
一般要考虑传回来的数据格式是否正确,少了个逗号还是少了些什么
Json的格式是:[{},{},{}]
//reader,store,proxy,record的作用与关系
Record:数据以record(相当于行)的类型的数据进行存储
Store:数据存储器,保存与管理数据
Reader:数据解析器,用来解析读取数据
Proxy:数据代理,代理各种数据源
关系:store通过reader来解析proxy提供的数据源的数据,每个store都有两个比较关键的参数reader和proxy
例如:
var cm = new Ext.grid.ColumnModel([
//设置显示行号
new Ext.grid.RowNumberer(),
{header:'',width:200,dataIndex:'warninginfo',sortable:true},
{header:'系统编号',width:100,dataIndex:'termianlid',sortable:true},
{header:'当前软件版本',width:100,dataIndex:'currentversion',sortable:true},
{header:'计划升级版本',width:100,dataIndex:'planversion',sortable:true},
{header:'备注',width:100,dataIndex:'remark',sortable:true}
//上面的dataIndex就是列对应记录集的字段,这些字段对应在下面的reader中定义,若下面的reader中没有定义,而上面这里使用了某个字段,则该字段的数据是没有的,因为数据是通过reader从proxy中读取的,若reader没有定义某个字段就表示没有解析出该字段的数据,相反,reader解析(定义)的字段不一定都要在上面使用,上面只是使用了部分的字段
]);
var reader = new Ext.data.JsonReader({//这里没有参数也要空出来,是用来放root : 'list',
totalProperty : 'totalCount'默认参数的}, [
{name: 'warninginfo'},
{name: 'termianlid'},
{name: 'currentversion'},
{name: 'planversion'} ,
{name: 'remark'}
]);
//上面的字段可以和返回的json数据字段一致,也可以不一致,不一致的是有要用映射进行对应,否则也无法读取到数据,例如读取的后台返回的json数据为: [{'warninginfo':'！警告,版本不一致！','termianlid':'106','currentversion':'2.2','planversion':'3.3','remark':'123123'},{'warninginfo':'！警告,版本不一致！','termianlid':'108','currentversion':'1.1','planversion':'3.3','remark':'asd123'},{'warninginfo':'！警告,版本不一致！','termianlid':'110','currentversion':'2.2','planversion':'3.3','remark':'123'}]可看见上面的字段(reader中的字段)和返回数据的key是一致的,当采用不一致的方法的时候就要这样:{name: 'tt',mapping: 'warninginfo'},
//这里映射的是json数据中的key,数组类型的时候还可以使用索引: mapping:0
{name: 'termianlid'},
{name: 'currentversion'},
{name: 'planversion'} ,
{name: 'remark'}
var urlPath = 'findbysubsystem.action';//请求的页面
var requestProxy=new Ext.data.HttpProxy({url:urlPath}); //设置的一个代理
var store = new Ext.data.Store({//关联代理和reader
reader: reader,
proxy: requestProxy
});
//Json数据的格式是:
[{‘name1’:’value1’,’name2’:’value2’},{‘name3’:’value3’,’name4’:’value4},{‘name5’:’value5’,’name6’:’value6}]
那样将这个字符串解析成json对象就有多个值,即可以这样访问
obj 拿到的是第1对{}中的值(注意obj是转换后的json对象)
要获取第一个{}的数据(即json对象obj的第一个数据)就可以这样: obj.name1 , obj.name2
//设置表格有排序的功能和设置标题显示方式的方法
var cmWest = new Ext.grid.ColumnModel([
{header:'编码',width:85,dataIndex:'code',sortable:true},
{header:'软件名称',width:100,dataIndex:'content',sortable:true}
]);
var systemGrid = new Ext.grid.GridPanel({
//title:'软件类型',
//layout:'form',
border:true,
width:190,
region:'west',
store:storeWest,
loadMask:true,
columnLines:true,
cm:cmWest,
sm:smWest,
//设置表格标题的显示属性
viewConfig:{
columnsText:'表格样式',
//scrollOffset:20,
sortAscText:'升序排列',
sortDescText:'降序排列',
forceFit:true
}
});
//ext中字符串转换成数组
//Combo获取显示的值
getRawValue()
//操作json格式的字符串变成json对象,并操作它内部的属性
var obj = Ext.decode(response.responseText);
for(var i=0; i<obj.length;i++)
{
var rec = new sysVersionRecord({sysversions:obj.sysversion});
updateversionstore.insert();
}
//添加事件监听和获取树节点的文本
listeners:{
"click":function(_node,_event){alert(_node.text)}
}
// 定义的一个函数
var searchCompany = function() {
// 传参数一定要用这种方式,否则翻页的时候不会根据这些参数查询
ds_company.baseParams.conditions = text_search_company.getValue();
ds_company.load({
params : {
start : 0,
limit : 20
}
});
}
//获取record的数据,和添加事件的另一种方法
systemGrid.on('rowClick',function(grid,rowIndex,event){
alert(grid.getStore().getAt(rowIndex).data['code']);
javascript:goto('showdata.html','软件版本记录') ;
});
//获取record中的数据方法
var record = dataGridPanel.getSelectionModel().getSelected();
if (record) {
addWindow.setTitle('修改数据');
alert(record.data.systemversion);
页:
[1]