`
echoetang
  • 浏览: 40354 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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();

其中ttpanel里面某个组件的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('

分享到:
评论

相关推荐

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    Gwt-ext学习笔记之基础篇

    ### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....

    EXT_JS实用开发指南_个人整理笔记.rar

    这份“EXT_JS实用开发指南_个人整理笔记”可能是开发者在深入学习EXT_JS时的宝贵参考资料,涵盖了EXT_JS的主要概念、组件使用、事件处理以及实际项目中的实践经验。 在EXT_JS开发中,首先要理解其基本架构和组件...

    EXT_JS实用开发指南_个人整理笔记.doc

    EXT_JS实用开发指南_个人整理笔记,代码、注释、图片描述浅显易懂,详细描述了ext框架的各个组件的样式和使用

    EXT_JS实用开发指南_个人整理笔记

    EXT_JS实用开发指南主要涵盖了EXT_JS框架的基础使用和核心组件,这是基于JavaScript的富客户端应用开发库,特别适合构建桌面级的Web应用。以下是对EXT_JS开发的一些关键知识点的详细解释: 1. **引入EXT_JS库**: ...

    EXT_JS实用开发指南_个人整理笔记.docx

    - **实用工具(Utils)**:包含各种便利的工具函数,如数据格式化、JSON处理、日期管理等。 5. **EXT2.0组件体系**:EXT2.0引入了清晰的组件层次结构,组件由`Component`类定义,每个组件有一个特定的`xtype`属性...

    ext JS 源码和学习资料

    2. EXT_JS实用开发指南_个人整理笔记.docx:这是一份个人整理的学习笔记,可能包含了一些实战经验,对于学习EXT JS的实际应用和解决常见问题很有帮助。 3. ExtJS实用开发指南.pdf:同名但格式不同的文档,可能提供了...

    ext 学习笔记

    通过`.setTitle()`方法,可以轻松修改组件的标题属性,这在界面设计和动态更新中非常实用。 当涉及到表单时,`Ext.getCmp("formId").getForm()`返回一个`Ext.form.FormPanel`实例,这允许开发者进一步操作表单,...

    网上流行的js的UI设计框架ext

    "新建 文本文档.txt"可能包含一些笔记或说明,"docs"和"ext源代码"则分别代表额外的文档资料和源代码,进一步加深学习和理解。 通过这些资源,开发者不仅可以学习到ExtJS的基本概念和组件使用,还可以看到实际项目...

    EXTJS实用开发指南_个人整理笔记.pdf

    1. Ext.onReady函数:在EXTJS库文件及页面内容加载完后,EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用:使用EXTJS提供的控件,如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...

    ext教程

    EXT_JS实用开发指南_个人整理笔记.docx可能包含了作者在学习EXT JS过程中的总结和实践经验,可能涵盖了组件的创建、数据管理、事件处理、性能优化等方面的内容。文档可能会对EXT JS的API有详尽的解释,同时可能包含...

    extJs+2.1学习笔记.pdf

    14. **extJs 2.0 学习笔记(Ext.data序论篇)** 这部分介绍了Ext.data模块的基础,包括DataModel、Reader和Writer,是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是...

    Ext 资料snow

    7. **EXT_JS实用开发指南**:`EXT_JS实用开发指南_个人整理笔记.docx`可能是作者的个人学习心得,其中包含了实践中遇到的问题和解决方案,对于初学者来说,这样的经验分享非常有价值。 8. **PDF和TXT文档**:`extjs...

    Linux实战工程师笔记

    这篇笔记不仅适合初学者,也对有经验的Linux工程师有价值,它提供了实用的命令行操作示例和系统管理技巧,有助于提高日常运维效率。同时,笔记中提到的QQ群可以作为学习交流的平台,鼓励成员相互帮助,共同进步。

    vxworks读书笔记

    VxWorks 支持多种文件系统,如VFAT、EXT2等,允许存储和管理数据文件,满足不同环境下的数据存储需求。 5. **虚拟内存(VxVMI)与共享内存(VxMP)** VxVMI 提供了虚拟内存管理,允许多个任务高效地共享内存资源...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    理解Ext Core是深入学习ExtJS的关键,因为它是整个库的基础,包含了许多核心的实用函数和类。 `轻松搞定Extjs.pdf` 很可能是一份详细的教程或指南,它可能涵盖了ExtJS的基本概念、组件使用、布局管理、数据绑定、...

Global site tag (gtag.js) - Google Analytics