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的解决方法）

 

1. Ext.override(Ext.menu.DateMenu,{     
2.     render : function (){     
3.         Ext.menu.DateMenu.superclass.render.call(this );     

       if (Ext.isGecko){     

1.             this .picker.el.dom.childNodes[0].style.width =  '178px' ;     
2.             this .picker.el.dom.style.width =  '178px' ;     
3.         }     
4.     }     
5. });   

还有一种方法是:

搜索ext-all.css，找到这一行：

Java代码

1. .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代码

1. .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[0] 拿到的是第1对{}中的值(注意obj是转换后的json对象)

 

要获取第一个{}的数据(即json对象obj的第一个数据)就可以这样: obj[0].name1 , obj[0].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[i].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);