`

formpanel表单与json数据绑定

    博客分类:
  • ext
阅读更多
场景:
当我们修改数据库记录时,需要先查询出该条记录,然后set到form表单字段中,然后提交修改到后台。

this.fsf = new Ext.FormPanel({

reader:new Ext.data.JsonReader({
					    root: 'data',
					    fields:[
					       {name: 'id', mapping: 'id'},
					       {name: 'userName', mapping: 'userName'},
					       {name: 'Email', mapping: 'email'},
					       {name: 'phoneNo', mapping: 'phoneNo'},
					       {name: 'status', mapping: 'status'},
					    ]
				    })
});


在载数据:
this.fsf.getForm().load({url:'sys/queryUserInfo?id=123', waitMsg:'Loading'});


json数据格式

{
    results: 1,
    rows: [
        { id: 1, userName: 'Bill', phoneNo: 'Gardener' }
    ]
}

分享到:
评论

相关推荐

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    Ext 动态加载表单数据

    在动态加载数据时,我们可以创建一个Store,然后将JSON数据加载到Store中,再将Store绑定到表单。 6. **Ext.form.Basic**:每个表单都包含一个Basic对象,它负责表单的验证。当接收到新数据时,可以调用`basic....

    sencha的ajax+formpanel+google地图

    在“sencha的ajax+formpanel+google地图”这个主题中,我们将深入探讨如何使用Sencha Touch与Ajax、FormPanel以及Google Maps API集成,来创建一个具有数据提交和地图展示功能的应用。 首先,`app.html`是应用的...

    EXT提交表单,ASP.NET

    当我们讨论EXT提交表单与ASP.NET的结合时,主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件(FormPanel)来创建和处理用户输入,而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...

    ext增删查改demo

    8. 数据绑定(Data Binding):EXTJS支持双向数据绑定,这意味着UI组件的值可以直接与数据模型关联,当模型数据改变时,UI会自动更新,反之亦然。这在CRUD操作中提高了用户体验,简化了代码逻辑。 通过这个"ext增删...

    EXT异步提交FORM表单

    2. **设置提交事件**:为了处理异步提交后的成功或失败情况,可以为表单绑定`submit`事件处理器。 ```javascript form.getForm().submit({ success: function(form, action) { console.log('表单提交成功:', ...

    SSH+ExtJs实现表单的增删改查CRUD

    在CRUD场景中,ExtJS的Grid组件常用于显示数据,FormPanel用于编辑,TreePanel用于展现层次结构,同时支持异步刷新和远程数据绑定,通过Ajax与后端进行通信。 在描述中提到的JSON格式,是一种轻量级的数据交换格式...

    Ext 例子 JSP版本

    2. **数据绑定**:ExtJS 的数据模型(Model)和数据存储(Store)能够与UI组件进行双向绑定,实现数据的实时更新。这在增删改查操作中非常关键,可以确保界面与后端数据的一致性。 3. **JSP动作和脚本元素**:在JSP...

    ExtAsp.net经典文档

    - **表单交互**:利用ExtJS的FormPanel与ASP.NET的表单验证结合,进行用户输入验证和数据提交。 - **图表展示**:结合ASP.NET的图表控件和ExtJS的图表组件,实现动态数据可视化。 **5. 开发环境与工具** 在本实例中...

    Ext 3.0 中文API

    3. **数据绑定**:框架支持双向数据绑定,使得UI与后台数据之间可以自动同步,减少了手动更新UI的工作量,提高了代码的可维护性。 4. **Store和Model**:Store是存储数据的容器,它可以与服务器进行异步通信,加载...

    ajax框架之extjs2.0

    ExtJS 2.0引入了数据绑定的概念,允许开发者将UI组件与数据源直接关联。当数据发生变化时,UI会自动更新,反之亦然,简化了数据管理和界面同步的工作。 **3. Model和Store** 在ExtJS 2.0中,Model用于定义数据结构...

    EXTJS - struts2 查询

    它提供了丰富的UI组件库、数据绑定能力以及与服务器端交互的功能。EXTJS能够帮助开发者快速开发出功能强大且用户体验优秀的Web应用。 ### 2. 关键代码解读 #### 2.1 数据存储(Store) 首先,我们关注到代码中...

    Extjs+ssh 增删改查

    ExtJS 提供了丰富的组件库,如表格、表单、树形结构等,以及灵活的数据绑定机制,使得开发者能够轻松构建复杂的用户界面。在“增删改查”场景下,我们通常会用到GridPanel(表格)和FormPanel(表单)。 - **...

    ExtJS+2.2实现及应用连载.rar

    2. 表单系统:FormPanel组件提供了丰富的表单元素,如文本框、下拉框、复选框等,可轻松构建复杂表单,结合数据绑定,实现动态表单验证和提交。 3. 图标和工具栏:提供了一系列图标资源和Toolbar组件,可以创建各种...

    ext精典例子(增删改查)

    文件名“JsonExt”表明例子可能涉及到EXT与JSON数据格式的交互。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,非常适合在JavaScript和服务器之间传输数据。EXT支持直接处理JSON数据,因为它们...

    ExtJs的服务器端控件实现

    服务器端控件需要能够生成和解析JSON,以便与ExtJS组件进行数据绑定。 3. **服务器端API设计**:为了支持ExtJS,服务器端需要提供一套RESTful API或者自定义的API接口,这些接口应能处理ExtJS发出的请求,执行相应...

    extjs 3.3 API文档与源文件

    ExtJS 3.3支持数据绑定,可以将模型(Model)的数据与视图(View)进行双向绑定,使得数据的修改能够实时反映在界面上。同时,数据存储(Store)组件可以连接到各种数据源,如JSON、XML或Ajax服务,实现数据的异步...

    EXT和JAVA例子

    EXT JS提供了丰富的UI组件,如GridPanel(表格),FormPanel(表单),Window(弹出窗口),TabPanel(选项卡)等,这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性,如大小、颜色、样式等,并...

    ext-3.0.0开发包

    3. **数据绑定**:EXT的数据模型和数据视图机制允许组件与后端数据进行双向绑定,实现数据实时更新。数据源可以是XML、JSON或者其他格式,通过Store进行管理。 4. **Ajax通信**:EXT的Ajax API简化了与服务器的异步...

Global site tag (gtag.js) - Google Analytics