add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / direct / Form.js

/**\r
 * This example shows a Form panel with Ext Direct integration.\r
 */\r
Ext.define('KitchenSink.view.direct.Form', {\r
    extend: 'Ext.panel.Panel',\r
    xtype: 'direct-form',\r
    controller: 'directform',\r
    \r
    requires: [\r
        'Ext.layout.container.Anchor',\r
        'Ext.layout.container.Accordion',\r
        'KitchenSink.view.direct.FormController'\r
    ],\r
    \r
    //<example>\r
    exampleTitle: 'Ext Direct Form integration',\r
    exampleDescription: [\r
        '<p>The following example illustrates how to load a FormPanel or BasicForm through Ext Direct.</p>',\r
        '<p>Notice that Direct requests will batch together if they occur within the enableBuffer delay period (in milliseconds).</p>',\r
        "<p>The Ext Direct Form api also supports submit in addition to load. The server-side must mark the submit handler as a 'formHandler' and will not be batched.</p>"\r
    ].join(''),\r
    \r
    otherContent: [{\r
        type: 'ViewController',\r
        path: 'classic/samples/view/direct/FormController.js'\r
    }, {\r
        type: 'Base ViewController',\r
        path: 'classic/samples/view/direct/DirectVC.js'\r
    }, {\r
        type: 'Server Profile class',\r
        path: 'data/direct/source.php?file=profile'\r
    }, {\r
        type: 'Server API configuration',\r
        path: 'data/direct/source.php?file=config'\r
    }],\r
    //</example>\r
    \r
    title: 'My Profile',\r
    width: 500,\r
    height: 400,\r
    \r
    layout: 'accordion',\r
    \r
    defaults: {\r
        xtype: 'form',\r
        border: false,\r
        bodyPadding: 10,\r
        \r
        // These defaults will be applied to the children of this Panel,\r
        // i.e. form panels. This is a neat way to reduce clutter\r
        // and keep the code clean and declarative.\r
        defaultType: 'textfield',\r
        defaults: {\r
            anchor: '100%'\r
        }\r
    },\r
    \r
    items: [{\r
        title: 'Basic Information',\r
        reference: 'basicInfo',\r
        \r
        // configs for BasicForm\r
        api: {\r
            // The server-side method to call for load() requests\r
            load: 'Profile.getBasicInfo',\r
            \r
            // The server-side must mark the submit handler as a 'formHandler'\r
            submit: 'Profile.updateBasicInfo'\r
        },\r
        \r
        // specify the order for the passed params\r
        paramOrder: ['uid', 'foo'],\r
        \r
        buttons: [{\r
            text: 'Submit',\r
            listeners: {\r
                click: 'onBasicInfoSubmit'\r
            }\r
        }],\r
        \r
        items: [{\r
            fieldLabel: 'Name',\r
            name: 'name'\r
        }, {\r
            fieldLabel: 'Email',\r
            msgTarget: 'side',\r
            vtype:'email',\r
            name: 'email'\r
        }, {\r
            fieldLabel: 'Company',\r
            name: 'company'\r
        }]\r
    }, {\r
        title: 'Phone Numbers',\r
        reference: 'phoneInfo',\r
        \r
        api: {\r
            // Note that the method names are quoted in all forms of this\r
            // example. This makes use of thelazy method resolution feature\r
            // that is built in Ext Direct form actions, as well as Direct\r
            // data proxy. When KitchenSink.view.direct.Form class is defined\r
            // upon initial application load, the Profile.getPhoneInfo\r
            // function does not exist yet; it will be created later when\r
            // Form API is received from the server and Form Provider is\r
            // created. By quoting the function name we are deferring\r
            // function resolution until the time it is first used, which\r
            // happens when the form is loaded. Form loading in turn is\r
            // initiated from the Form ViewController that will initialize\r
            // corresponding API first and only then load the form, thus\r
            // ensuring correct processing order.\r
            load: 'Profile.getPhoneInfo'\r
        },\r
        \r
        paramOrder: ['uid'],\r
        \r
        items: [{\r
            fieldLabel: 'Office',\r
            name: 'office'\r
        }, {\r
            fieldLabel: 'Cell',\r
            name: 'cell'\r
        }, {\r
            fieldLabel: 'Home',\r
            name: 'home'\r
        }]\r
    }, {\r
        title: 'Location Information',\r
        reference: 'locationInfo',\r
        \r
        api: {\r
            load: 'Profile.getLocationInfo'\r
        },\r
        \r
        paramOrder: ['uid'],\r
        \r
        items: [{\r
            fieldLabel: 'Street',\r
            name: 'street'\r
        },{\r
            fieldLabel: 'City',\r
            name: 'city'\r
        },{\r
            fieldLabel: 'State',\r
            name: 'state'\r
        },{\r
            fieldLabel: 'Zip',\r
            name: 'zip'\r
        }]\r
    }]\r
});\r