add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / binding / TwoWay.js

/**\r
 * This example shows simple two way data binding. When the value is changed by the user\r
 * in the field, the change is reflected in the panel title. Similarly, when the value is\r
 * changed in the view model, the same change is reflected in the text field.\r
 */\r
Ext.define('KitchenSink.view.binding.TwoWay', {\r
    extend: 'Ext.panel.Panel',\r
    alias: 'widget.binding-two-way',\r
\r
    //<example>\r
    requires: ['KitchenSink.view.binding.TwoWayController'],\r
    otherContent: [{\r
        type: 'ViewController',\r
        path: 'classic/samples/view/binding/TwoWayController.js'\r
    }],\r
    //</example>\r
\r
    width: 300,\r
    bodyPadding: 10,\r
\r
    controller: 'binding.twoway',\r
    viewModel: {\r
        data: {\r
            title: 'The title'\r
        }\r
    },\r
\r
    bind: {\r
        title: '{title}'\r
    },\r
\r
    items: {\r
        xtype: 'textfield',\r
        fieldLabel: 'Title',\r
        labelWidth: 50,\r
        // The default config for textfield in a bind is "value" (two-way):\r
        bind: '{title}'\r
    },\r
\r
    tbar: [{\r
        text: 'Random Title',\r
        handler: 'onTitleButtonClick'\r
    }]\r
});