近期开发一个项目要使用到EXTJS,从完全不懂摸索着进行,到将项目完成,过程中发现很多问题,因为是新手,我根据我的学习方式将我的问题记录下来了,方便遇到相同问题的人们,里面部分是网上收集的,大部分是自己总结的,
转载请注明出处(http://echoetang.iteye.com/admin/blogs/510499 By:Gxmis-alextang)
-
-
//[注 意]先xjjlEditWindow.show(); 再 xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解决之前的页面加载完成以后,第一 次点击[编辑]按钮时无法加载数据到form的问题了。
-
xjjlEditForm.getForm().loadRecord(record); //关键是这里用当前选中的grid中的record填充form
- }
//--编辑按钮调用的函数(弹出编辑窗体)
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('
分享到:
相关推荐
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....
这份“EXT_JS实用开发指南_个人整理笔记”可能是开发者在深入学习EXT_JS时的宝贵参考资料,涵盖了EXT_JS的主要概念、组件使用、事件处理以及实际项目中的实践经验。 在EXT_JS开发中,首先要理解其基本架构和组件...
EXT_JS实用开发指南_个人整理笔记,代码、注释、图片描述浅显易懂,详细描述了ext框架的各个组件的样式和使用
EXT_JS实用开发指南主要涵盖了EXT_JS框架的基础使用和核心组件,这是基于JavaScript的富客户端应用开发库,特别适合构建桌面级的Web应用。以下是对EXT_JS开发的一些关键知识点的详细解释: 1. **引入EXT_JS库**: ...
- **实用工具(Utils)**:包含各种便利的工具函数,如数据格式化、JSON处理、日期管理等。 5. **EXT2.0组件体系**:EXT2.0引入了清晰的组件层次结构,组件由`Component`类定义,每个组件有一个特定的`xtype`属性...
2. EXT_JS实用开发指南_个人整理笔记.docx:这是一份个人整理的学习笔记,可能包含了一些实战经验,对于学习EXT JS的实际应用和解决常见问题很有帮助。 3. ExtJS实用开发指南.pdf:同名但格式不同的文档,可能提供了...
通过`.setTitle()`方法,可以轻松修改组件的标题属性,这在界面设计和动态更新中非常实用。 当涉及到表单时,`Ext.getCmp("formId").getForm()`返回一个`Ext.form.FormPanel`实例,这允许开发者进一步操作表单,...
"新建 文本文档.txt"可能包含一些笔记或说明,"docs"和"ext源代码"则分别代表额外的文档资料和源代码,进一步加深学习和理解。 通过这些资源,开发者不仅可以学习到ExtJS的基本概念和组件使用,还可以看到实际项目...
1. Ext.onReady函数:在EXTJS库文件及页面内容加载完后,EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用:使用EXTJS提供的控件,如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...
EXT_JS实用开发指南_个人整理笔记.docx可能包含了作者在学习EXT JS过程中的总结和实践经验,可能涵盖了组件的创建、数据管理、事件处理、性能优化等方面的内容。文档可能会对EXT JS的API有详尽的解释,同时可能包含...
14. **extJs 2.0 学习笔记(Ext.data序论篇)** 这部分介绍了Ext.data模块的基础,包括DataModel、Reader和Writer,是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是...
7. **EXT_JS实用开发指南**:`EXT_JS实用开发指南_个人整理笔记.docx`可能是作者的个人学习心得,其中包含了实践中遇到的问题和解决方案,对于初学者来说,这样的经验分享非常有价值。 8. **PDF和TXT文档**:`extjs...
这篇笔记不仅适合初学者,也对有经验的Linux工程师有价值,它提供了实用的命令行操作示例和系统管理技巧,有助于提高日常运维效率。同时,笔记中提到的QQ群可以作为学习交流的平台,鼓励成员相互帮助,共同进步。
VxWorks 支持多种文件系统,如VFAT、EXT2等,允许存储和管理数据文件,满足不同环境下的数据存储需求。 5. **虚拟内存(VxVMI)与共享内存(VxMP)** VxVMI 提供了虚拟内存管理,允许多个任务高效地共享内存资源...
理解Ext Core是深入学习ExtJS的关键,因为它是整个库的基础,包含了许多核心的实用函数和类。 `轻松搞定Extjs.pdf` 很可能是一份详细的教程或指南,它可能涵盖了ExtJS的基本概念、组件使用、布局管理、数据绑定、...