add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / grid / FramingButtons.js

Ext.define('KitchenSink.view.grid.FramingButtons', {\r
    extend: 'Ext.grid.Panel',\r
\r
    xtype: 'framing-buttons',\r
    store: 'Companies',\r
\r
    columns: [\r
        {text: "Company", flex: 1, sortable: true, dataIndex: 'name'},\r
        {text: "Price", width: 120, sortable: true, formatter: 'usMoney', dataIndex: 'price'},\r
        {text: "Change", width: 120, sortable: true, dataIndex: 'change'},\r
        {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},\r
        {text: "Last Updated", width: 120, sortable: true, formatter: 'date("m/d/Y")', dataIndex: 'lastChange'}\r
    ],\r
    columnLines: true,\r
    selModel: {\r
        type: 'checkboxmodel',\r
        listeners: {\r
            selectionchange: 'onSelectionChange'\r
        }\r
    },\r
\r
    // This view acts as the default listener scope for listeners declared within it.\r
    // For example the selectionModel's selectionchange listener resolves to this.\r
    defaultListenerScope: true,\r
\r
    // This view acts as a reference holder for all components below it which have a reference config\r
    // For example the onSelectionChange listener accesses a button using its reference\r
    referenceHolder: true,\r
\r
    onSelectionChange: function(sm, selections) {\r
        this.getReferences().removeButton.setDisabled(selections.length === 0);\r
    },\r
\r
    // inline buttons\r
    dockedItems: [{\r
        xtype: 'toolbar',\r
        dock: 'bottom',\r
        ui: 'footer',\r
        layout: {\r
            pack: 'center'\r
        },\r
        items: [{\r
            minWidth: 80,\r
            text: 'Save'\r
        },{\r
            minWidth: 80,\r
            text: 'Cancel'\r
        }]\r
    }, {\r
        xtype: 'toolbar',\r
        items: [{\r
            text: 'Add Something',\r
            tooltip: 'Add a new row',\r
            iconCls: 'framing-buttons-add'\r
        }, '-', {\r
            text: 'Options',\r
            tooltip: 'Set options',\r
            iconCls: 'framing-buttons-option'\r
        },'-',{\r
            reference: 'removeButton',  // The referenceHolder can access this button by this name\r
            text: 'Remove Something',\r
            tooltip: 'Remove the selected item',\r
            iconCls:'framing-buttons-remove',\r
            disabled: true\r
        }]\r
    }],\r
\r
    height: 300,\r
    frame: true,\r
    title: 'Support for standard Panel features such as framing, buttons and toolbars',\r
    iconCls: 'framing-buttons-grid',\r
    //<example>\r
    exampleTitle: 'Support for standard Panel features such as framing, buttons and toolbars',\r
    otherContent: [{\r
        type: 'Store',\r
        path: 'classic/samples/store/Companies.js'\r
    }, {\r
        type: 'Model',\r
        path: 'classic/samples/model/Company.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 700\r
        },\r
        neptune: {\r
            width: 750\r
        }\r
    },\r
    //</example>\r
\r
    initComponent: function() {\r
        this.width = this.profileInfo.width;\r
        this.callParent();\r
    }\r
});