`
endual
  • 浏览: 3560810 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

EXTJS 4 form population with JSON read

 
阅读更多

I am new to EXTJS and am using EXTJS-4.1 for now. I have a basic form, to which I need to populate data on page load. server url will return a JSON.

[{"countryid":1,"countrycode":"US","countryname":"United States"}]

my form code is

Ext.require([
    'Ext.form.*'
    //'Ext.layout.container.Column',
    //'Ext.tab.Panel'
    //'*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
   {name: 'countryid'},
   {name: 'countrycode'},
   {name: 'countryname'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
    type: 'ajax',
    url : 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
    reader:{ 
        type:'json'                     
    }
},
autoLoad:true,
    listeners: {
        load: function() {
            var form = Ext.getCmp('formJobSummary'); 
            form.loadRecord(myStore.data.first());
        }
    }
});


var testForm = Ext.create('Ext.form.Panel', {
                    width: 500,
                    renderTo: Ext.getBody(),
                    title: 'Country Form',
                    waitMsgTarget: true,
                    fieldDefaults: {
                        labelAlign: 'right',
                        labelWidth: 85,
                        msgTarget: 'side'
                    },
                    items: [{
                        xtype: 'fieldset',
                        items: [{
                                xtype:'textfield',
                                fieldLabel: 'ID',
                                name: 'countryid'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'CODE',
                                name: 'countrycode'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'COUNTRY',
                                name: 'countryname'
                        }]
                    }]

            });


    this.testForm.getForm().loadRecord(app.formStore);
});

I was able to populate the same JSON to a grid. Can you please help me through... I got a lot of examples over net and tried but still no luck. The above given is also a modified code snippet which I got while browsing.

share|improve this question
 
Was this post useful to you?     

3 Answers

load() function is asynchronous. So you did a right thing - creating a handler for load event and putting logic there. However you did couple mistakes:

  1. In the load handler you will have some parameters to the function. First parameter will be store - so you don't need to use global variable.

  2. You don't need to have this.testForm.getForm().loadRecord(app.formStore); - because it's not a valid command and at that moment you have no idea whether your store is actually loaded or not. Remove it. You already have loadRecords in the store handler.

  3. Form rendering and store auto loading are two different events and you don't have control over their timing. So I would recommend to disable autoLoad for the store and manually callstore.load() after you know that form is ready.

share|improve this answer
 
feedback

var form = Ext.getCmp('formJobSummary');console.log(form) will probably returnundefined. Assign a name to the form and off you go. Or better yet...

// Ext.require([
// 'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
// ]); // you dont need ext.require for ext integrated stuff

Ext.onReady(function () {
    Ext.QuickTips.init();

    //var bd = Ext.getBody(); 

    /*
     * ================  Simple form  =======================
     */
    //bd.createChild({
    //  tag: 'h2',
    //  html: 'Form 1 - Very Simple'
    //}); // over written by the form anyway

    // var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; // never used

    Ext.define('app.formStore', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'countryid'
        }, {
            name: 'countrycode'
        }, {
            name: 'countryname'
        }]
    });

    var myStore = Ext.create('Ext.data.Store', {
        model: 'app.formStore',
        proxy: {
            type: 'ajax',
            url: 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true,
        listeners: {
            load: function (store,record,e) {
                form.loadRecord(store.first());
            }
        }
    });


    var testForm = Ext.create('Ext.form.Panel', {
        width: 500,
        renderTo: Ext.getBody(),
        name:'formJobSummary', //why your orignal bit wasn't working
        title: 'Country Form',
        waitMsgTarget: true,
        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'fieldset',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'ID',
                name: 'countryid'
            }, {
                xtype: 'textfield',
                fieldLabel: 'CODE',
                name: 'countrycode'
            }, {
                xtype: 'textfield',
                fieldLabel: 'COUNTRY',
                name: 'countryname'
            }]
        }]

    });



});
share|improve this answer
 
feedback

few things to try:

1) if u seek ur file on localhost don't put localhost on url only write

url : '/milestone_1/web/app_dev.php/md/country/show/1'

what ur php file do? could u post the code?

3) place the proxy configuration on model not on store.

4) have u try to test if store has read records on load? with a console.log?

share|improve this answer
 
 
Just out of curiosity, why do you recommend individual records having their own proxy settings? – Alex May 21 at 10:30
 
what do u mean..i only ask if he verify if the store upload data. How do u check it? i usually ask for a record count. Don't u think? – Hataru May 21 at 18:45
 
"3) place the proxy configuration on model not on store." Eh I guess that was a mis-phrasing. Model, not record.– Alex May 22 at 8:57
分享到:
评论

相关推荐

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

    通过以上内容的介绍,我们可以了解到在Extjs4中如何利用`form.load()`方法实现从后台加载JSON数据,并将其映射到表单字段中显示的过程。这不仅有助于提高开发效率,还能增强应用程序的灵活性。希望本文能够帮助您更...

    一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。 将数据从后台传到Extjs表现层。

    一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接:http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs,Struts2, json,iterator技术, 将数据从...

    ExtJs + Struts2 + JSON 程序总结

    4. 将JSON数组设置为Action的返回值,Struts2的JSON插件会自动处理这个返回值,将其包装成JSON响应并发送到前端。 在前端,EXTJS使用Ajax请求调用Struts2 Action,接收返回的JSON数据,然后动态渲染UI,展示所有...

    extjs4+servlet+json+soundmanager2实现定时刷新报警(原创)

    标题 "extjs4 + servlet + json + soundmanager2 实现定时刷新报警" 涉及的是一个基于Web的实时报警系统开发技术,其中包含了多个关键组件和技术。让我们逐一深入探讨这些知识点。 1. **EXTJS4**:EXTJS是一个用...

    extjs-json-数据转换

    使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...

    extjs+servlet+json简单应用

    在页面展示方面,ExtJS提供了多种组件,如表格(Grid)、面板(Panel)、表单(Form)等,可以方便地展示和编辑数据。例如,你可以使用Ext.data.Store来存储从Servlet获取的JSON数据,然后绑定到Grid上显示。同时,...

    Extjs 无限树菜单 后台拼接json

    "Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...

    extjs4 入门基础,form、grid、tree

    在深入探讨ExtJS 4的基础知识之前,首先确保你已经下载了ExtJS 4.21版本,并将其部署到服务器的适当路径以便访问。 **一、表单(Form)** 在ExtJS中,表单是数据输入和验证的重要部分。表单组件包括文本框、复选框...

    extjs 跟 struts+json

    标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合,通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,而Struts是Java Web开发中的一个MVC...

    @@@extjs+struts2+json plugin的例子

    在IT行业中,构建Web应用程序是一项常见的任务,而`ExtJS`、`Struts2`和`JSON`是其中的关键技术,常被用来创建交互性强、功能丰富的用户界面和高效的服务器通信。下面将详细阐述这三个技术及其结合使用的情况。 ...

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    extJs3升级extjs4方案

    在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....

    extjs4 grid(含form)

    extjs4 grid 包括form js代码

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    在与ExtJS4结合使用时,Servlet通常用于接收前端发送的JSON数据请求,处理业务逻辑,并返回相应的JSON数据。 Struts2是一个基于MVC设计模式的Java Web框架,用于简化企业级应用开发。它提供了处理用户请求、控制...

    Extjs Grid+apsx+json Demo

    4. **绑定JSON到Grid**:服务器返回的JSON数据会被Grid的存储器接收,并自动解析成对象数组。这些对象将被用来填充Grid的行数据。 5. **交互功能**:用户在Grid中的操作,如点击行、筛选数据、排序等,会被发送回...

    JSON.rar_JSON Hibernate_extjs_json struts ext_jsp json extjs_str

    4. ExtJS利用JSON数据创建动态用户界面,提供丰富的交互体验。 5. JSP可能用于处理JSON数据的生成或解析,作为服务器端视图的一部分。 在这个项目中,开发者可能会遇到如何配置Struts2的JSON结果类型、如何在...

    extjs json所需jar包

    在使用ExtJS处理JSON数据时,通常需要依赖一些特定的Java档案(JAR)库,这些库提供了与JSON相关的解析和序列化功能。"extjs json所需jar包"指的是支持ExtJS与JSON交互的Java类库。 JSON(JavaScript Object ...

    AnyFo - Util - Json4Ext:通用ExtJS数据交换处理

    AnyFo - Util - Json4Ext Json4Ext项目背景 在大家开发的系统中,如果程序用ExtJS做表现层,那么就需要使ExtJS开发的界面和后台Java代码中生成的数据交互,一般来说,可以...4. ExtJS中的Tree控件需要的Json字符串

    struts2-hibernate-spring-Extjs-json.rar_JSON_extjs_extjs json st

    4. **ExtJS**: ExtJS是一个JavaScript库,专门用于构建富客户端的Web应用。它提供了一套完整的UI组件,如表格、树形视图、表单等,以及强大的数据绑定和布局管理功能。ExtJS支持JSON数据格式,使得与服务器端的...

    ExtJS4+JSON+Servlet(Struts2)实现登录验证

    在IT行业中,构建Web应用程序是常见的任务,而“ExtJS4+JSON+Servlet(Struts2)实现登录验证”是一个典型的前端与后端交互的场景。这个主题涉及到几个关键的技术点,我们将逐一深入探讨。 首先,ExtJS4是一个流行的...

Global site tag (gtag.js) - Google Analytics