EXT实用笔记(三)

近期开发一个项目要使用到EXTJS,从完全不懂摸索着进行,到将项目完成,过程中发现很多问题,因为是新手,我根据我的学习方式将我的问题记录下来了,方便遇到相同问题的人们,里面部分是网上收集的,大部分是自己总结的,

转载请注明出处(http://echoetang.iteye.com/admin/blogs/510499 By:Gxmis-alextang)

1.         
2.        //[注 意]先xjjlEditWindow.show(); 再 xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解决之前的页面加载完成以后,第一 次点击[编辑]按钮时无法加载数据到form的问题了。  
3.         xjjlEditForm.getForm().loadRecord(record); //关键是这里用当前选中的grid中的record填充form  
4.     }  

//--编辑按钮调用的函数（弹出编辑窗体）

function showeditPanel()

{       //直接取得选中的行对应的record

    var record = grid.getSelectionModel().getSelected()

    if(!record){

      Ext.Msg.alert('信息','请选择要编辑的数据');

      return;

  }

 

  //--定义编辑窗体

  if(!xjjlEditWindow)

  {

   xjjlEditWindow = new Ext.Window({

       el: 'edit_win',  //前端放置当前js文件的页面中的div名称

       title:'编辑记录',

       width: 650,

       height: 360,

       closable: false,

       closeAction: 'hide',

      resizable: false,

       items: xjjlEditForm //在window中加载编辑的form

   });  

  

    }

    xjjlEditWindow.show(Ext.get('editDataButton'));//显示编辑窗口

   

   //[注意]先xjjlEditWindow.show(); 再xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解决之前的页面加载完成以后,第一次点击[编辑]按钮时无法加载数据到form的问题了。

    xjjlEditForm.getForm().loadRecord(record); //关键是这里用当前选中的grid中的record填充form

    }

 这样就可以在新窗口中对选中的数据进行编辑了;

 

//获取HTML文件的body

var bd = Ext.getBody();

 

 

//获取某个容器里的某个组件(控件的方法)

panel.getComponent('tt').getValue();

其中tt是panel里面某个组件的id

//获取上层容器是使用ownerCt

 

//获取自己(Returns the Ext.Element which encapsulates this Component.)

例如: alert(panel.getEl().id);等价于alert(panel.id);

一般可用来:  new Ext.Panel({

    title: 'The Clickable Panel',

    listeners: {

        render: function(p) {

            // Append the Panel to the click handler's argument list.

            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));

        },

        single: true  // Remove the listener after first invocation

    }

});

    

 

//要解决问题

 

1.   如何在一个js文件调用另外一个js文件的组件/对象/方法(直接调用名字)

在html文件中按顺序引入js文件,后一个js文件时可以访问前一个文件的内容(方法、对象、变量等等),但是前面的js文件的方法、对象、变量不能放在Ext.OnReady方法里面,否则无法加载

举例实现:

ndnd.js文件中直接实例一个panel,注意不要用Ext.OnReady方法

代码: //查询按钮

var pp = new Ext.Panel({

   

    region:'south',

    title : 'asdasdasd',

     height:100,

     width:300,

     id:'pann',

     name:'panelll',

     items:[{

     xtype:'textfield',

     id:'tt',

     name:'ttt'

     }]

});

 

Frame.js文件就直接可以使用pp对象(前提是在加载这些js文件的html文件中要注意这两个文件的引入顺序,应该如下顺序:

<script type="text/javascript" src="pages/ndnd.js"></script>  <-先引入

<script type="text/javascript" src="pages/frame.js"></script> <-后引入

)

代码: //主界面是一个viewport

   var viewport = new Ext.Viewport({

                     layout:'border',

                     items:[pNorth, pWest, pCenter,pp]

               });

 

2.   树的加载问题

和grid一样,设置好store就可以

 

3.   表格数据的绑定问题(绑定的过程和绑定不了的问题)

绑定过程:

// 设置Grid的选择模式,以下的方式是表示有checkbox的选择方式

var sm = new Ext.grid.CheckboxSelectionModel();

// jsonReader读取数据

           var reader = new Ext.data.JsonReader({}, [{

                            name : 'systemversion'

                         }, {

                            name : 'versiontype'

                         }, {

                            name : 'versiondate'

                         }, {

                            name : 'versionvalidate'

                         }, {

                            name : 'invilidatetime'

                         }, {

                            name : 'remark'

                         }]);

var urlPath = 'versionfind.action';// 提交数据,请求的页面

var requestProxy = new Ext.data.HttpProxy({

                      url : urlPath

                  }); // 设置的一个代理去提交请求,注意不同类型数据有不同的提交方法,HttpProxy是提交各http服务器

            //定义一个存储数据的store,相当于C#中的table

           var gridStore = new Ext.data.Store({// 关联代理和reader

              reader : reader,

              proxy : requestProxy

           });

//加载数据

           gridStore.load();

 

// 创建一个Gridpanel

var gridData = new Ext.grid.GridPanel({

                     contentEl : 'grid',

                     id : 'grid',

                     stripeRows : true,

//绑定选择模式

                     sm : sm,

                     bodyStyle : 'width:100%',

                     height : 100,

//绑定数据

                     store : gridStore,

                     cm : new Ext.grid.ColumnModel([sm, {

                                header : "软件版本",

                                width : 100,

                                dataIndex : 'systemversion'

                            }, {

                                header : "版本类型",

                                width : 100,

                                dataIndex : 'versiontype'

                            }, {

                                header : "生成时间",

                                width : 100,

                                dataIndex : 'versiondate'

                            }, {

                                header : "生效日期",

                                width : 100,

                                dataIndex : 'versionvalidate'

                            }, {

                                header : "失效日期",

                                width : 100,

                                dataIndex : 'invilidatetime'

                            }, {

                                header : "版本说明",

                                width : 150,

                                dataIndex : 'remark'

                            }]),

                     viewConfig : {

           // forceFit:true

                     }

                  });

 

4.   store的数据修改问题

//提交数据往store中加数据

frm.submit({

                     waitTitle : '请稍候',

                     waitMsg : '正在提交表单数据,请稍候...',

                      success : function(form, action) {

//先获得store

                         var store = grid_company.getStore();

//当store的数据小于20条的时候就将数据加到最前面

                         if (store.data.length <= 20) {

//用从界面获得的数据构建一个Record -- company

                            var company = new Company({

companyId : action.result.companyId,

//cnfield获取到的公司名称输入框

companyName : cnfield.getValue(),

address : form.findField('company.address').getValue(),

tellPhone : form.findField('company.tellPhone').getValue(),

leader : form.findField('