`
laitaogood
  • 浏览: 106311 次
  • 性别: Icon_minigender_1
  • 来自: 豫章郡→紫禁城
社区版块
存档分类
最新评论

Ext中Form加载数据

阅读更多
关于在Ext的Form中加载数据的问题。
一般关于表格数据进行操作的时候,我们的一般操作是分为两种:
1、 选中所需修改的行,然后点击对应的操作按钮进行操作。
2、 双击所需修改的行,弹出一个修改的对话框,进行操作。
于是就出现了一个问题,我们该如何在弹出的Form里加载需要修改的那些数据呢?
解决方案:
以下是一个按钮,及其对应的操作。
{text:'修改2',
handler : function(){
        var item = body.getSelectionModel().getSelected();
        if(!item){
            	Ext.Msg.alert("Please Select The Row");
        }else{
            	myFormWin();
            	loadForm1.form.load({
                	url : 'updateGridAction.action?Name='+item.get('Name'),
                	waitMsg : '正在载入数据...',
                	success : function(form,action) {
                    	Ext.example.msg('编辑', '载入成功!');
                	},
                	failure : function(form,action) {
                    	Ext.example.msg('编辑', '载入失败');
                	}
            	});
            }
          }}


然后找到对应的myFormWin函数。
var loadForm1;
var myFormWin = function() {
if (!loadWindow) {
        loadForm1 = new Ext.FormPanel( {
        // collapsible : true,// 是否可以展开
        //url : 'updateGrid.action',
        //frame : true,
        //title : '修改',
        bodyStyle : 'padding:5px 5px 0',
        width : 350,
        waitMsgTarget : true,
        //这个属性决定了load和submit中对数据的处理,list必须是一个集合类型,json格式应该是[]包含的一个数组
        //reader: new Ext.data.JsonReader({root:'list'},
        reader: new Ext.data.JsonReader({root:'rows'},
[{name: 'Name',mapping:'Name',type:'string'},
                         {name: 'Sex',mapping:'Sex',type:'boolean'},
                         {name: 'Phone',mapping:'Phone',type:'string'},
                         {name: 'Email',mapping:'Email',type:'string'}
                        ]),
        defaults : {
            width : 230
        },
        baseCls: 'x-plain',
        labelWidth: 55,
        defaultType: 'textfield',
        items: [{
            		fieldLabel: 'Name',
            		name: 'Name',
            		anchor:'100%'  
        		},{
            		fieldLabel: 'Sex',
            		name: 'Sex',
            		anchor: '100%'  
        		},{
            		fieldLabel: 'Phone',
            		name: 'Phone',
            		anchor: '100%'  
        		},{
            		fieldLabel: 'Email',
            		name: 'Email',
            		anchor: '100%'  
        	}]
/**
        buttons : [ {
            text : '保存',
            disabled : false,
            handler : function() {
                if (loadForm1.form.isValid()) {
                    loadForm1.form.submit( {
                        url : 'AddLevel.action',
                        success : function(from, action) {
                            Ext.example.msg('保存成功', '添加级别成功!');
                            ds.load( {
                                params : {
                                    start : 0,
                                    limit : 30,
                                    forumId : 4
                                }
                            });
                        },
                        failure : function(form, action) {
                            Ext.example.msg('保存失败', '添加级别失败!');
                        },
                        waitMsg : '正在保存数据,稍后...'
                    });
                    dialog.hide();
                } else {
                    Ext.Msg.alert('信息', '请填写完成再提交!');
                }
            }
        }, {
            text : '取消',
            handler : function() {
                newFormWin.hide();
            }
        }]*/
    });
            var loadWindow = new Ext.Window({
        		iconCls:'btn-save',
        		title: '修改用户',
        		width: 500,
        		height:300,
        		minWidth: 300,
        		minHeight: 200,
        		layout: 'fit',
        		plain:true,
       		bodyStyle:'padding:5px;',
        		buttonAlign:'center',
        		items: loadForm1,
        		buttons: [{	text: '确定'
        			},{	text: '取消'}]
    		});
    		loadWindow.show();
        }
    };


原理是这样的:
当选中一行的时候,再点击修改按钮,这个时候就执行了一些操作,首先是获取被选中行的value,然后是调用函数去创建加载数据的Form,这个Form又通过我们提供的URL去加载JSON格式的数据,这里可以从XML文件中读取或者是从数据库中读取。可以使用JSON的jar包,使得把对象转换成JSON格式的数据更加方便。保存成功后,重新加载一次dataStore。
  • 大小: 27.2 KB
分享到:
评论

相关推荐

    Ext 动态加载表单数据

    使用 json 动态加载 Ext 表单数据。

    ExtJs实现数据加载和提交经典代码

    FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,...

    EXT2.0中文教程

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者列表 ...

    Ext深入浅出 数据传输

    10.4.5 加载及显示数据.......................237 10.4.6 其他功能...................................238 10.5 常用proxy.............................................239 10.5.1 MemoryProxy....................

    Ext+JS高级程序设计.rar

    6.3.4 在form中使用Ext.Direct加载数据 185 6.3.5 在form中使用Ext.Direct提交数据 187 6.3.6 使用polling方式进行轮询 189 6.4 本章小结 191 第7章 Store 192 7.1 Store的结构 192 7.2 Ext.data.Field 197 7.3 Ext....

    Ext 开发指南 学习资料

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 A.9. 有关grid的一些小问题 A.9.1. 如何让grid总所有的列都支持排序 A.9.2. 修改一个grid的ColumnModel和Store A.9.3. 动态为ds添加参数baseParams A.10. 有关...

    Ext Js权威指南(.zip.001

    7.5.5 ext.data.treestore加载数据的方法 / 354 7.5.6 store的配置项 / 358 7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360 7.5.9 store的过滤:ext.util.filter / 363...

    ext combobox动态加载数据库数据(附前后台)

    前台: 代码如下: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + “/stationManage/station... //选择省市 var provinceIDadd = new Ext.form.ComboBox({ anchor : ‘98%

    ExtJSWeb应用程序开发指南(第2版)

    4.1.7 Ext.form.field.Checkbox复选框和Ext.form.field.Radio单选框 4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 4.1.9 Ext.form.field.Trigger触发字段 4.1.10 Ext.form.field.Spinner微调字段 4.1.11 ...

    ext表格布局小例子

    extjs表格布局小例子,涉及到数据的存储,如何删除数据和添加数据

    ExtJs 实现动态加载grid完整示例

    Ext3.3完整包 Ext3.3中文文档 数据表的结构是:数据表table > 记录record > 字段 store的结构是: Ext.data.Store > Ext.data.Record>Ext.dataDataField store 首先驱动 DataProxy 加载数据 ,DataProxy加载完成会...

    使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能

    使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能

    .net EXT学习资料与源码

     业务逻辑层在体系架构中的位置很关键,它处于数据访问层与表示层中间,起到了数据交换中承上启下的作用。由于层是一种弱耦合结构,层与层之间的依赖是向下的,底层对于上层而言是“无知”的,改变上层的设计对于其...

    EXT教程EXT用大量的实例演示Ext实例

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者...

    EXT4 自己整理的一些常用方法

    自己使用ext4做项目的一点小积累 基本都是一些常用的方法,如form提交 数据加载等

    精通JS脚本之ExtJS框架.part1.rar

    7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 ...

    Extjs3.0 checkboxGroup 动态添加item实现思路

    虽然它继承了Ext.form.Field,但是却类似于容器。 CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态添加。如需要数据动态创建,试着创建整个CheckboxGroup...

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...

    精通JS脚本之ExtJS框架.part2.rar

    7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 ...

    extjs中form与grid交互数据(record)的方法

    首先在grid的tbar中定义编辑按钮:Js代码 代码如下:id:’...然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window): Js代码 代码如下://–编辑按钮调用的函数(弹出编辑窗体) functio

Global site tag (gtag.js) - Google Analytics