javascript Табличкисвыпадающмимспискамии复选框#ExtJS

Posted 2021-05-04

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'file:///d:/www/examples/extjs-4.1.1-src/extjs-4.1.1/examples/ux');

Ext.require([
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
]);

if (window.location.search.indexOf('scopecss') !== -1) {
    // We are using ext-all-scoped.css, so all rendered ExtJS Components must have a
    // reset wrapper round them to provide localized CSS resetting.
    Ext.scopeResetCSS = true;
}

Ext.onReady(function(){
    elma();
    //Идентификатор материала, который мы установили в новое значение
    var newItemCangedId = 0;
    //Идентификатор тезнологии которую только что выбрали в выпадающем списке в табличке
    var newTechnologyCangedId = 0;
    
    Ext.QuickTips.init();
 
    function formatDate(value){
        return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
    }
//Это столбкик которые отображаются в твбличке
    Ext.define('ProjectExternal', {
        extend: 'Ext.data.Model',
        fields: [
            // the 'name' below matches the tag name to read, except 'availDate'
            {name: 'Changed', mapping: 'Changed', type: 'bool'},
            {name: 'Proj_Id', mapping: 'Proj_Id', type: 'int'},
            {name: 'Id', mapping: 'Id', type: 'int'},
            {name: 'Name', mapping: 'Name', type: 'string'},
            {name: 'Item' },
            {name: 'Technology' },
            {name: 'CreatedDate', mapping: 'CreatedDate' , type: 'date', dateFormat: 'm/d/Y'},
            {name: 'Thickness',  mapping: 'Thickness', type: 'float'},
            {name: 'Size',  mapping: 'Size', type: 'string'},
            {name: 'Cnt',  mapping: 'Cnt', type: 'float'},
            {name: 'Status',  mapping: 'Status', type: 'string'},
            {name: 'IsMade', mapping: 'IsMade' , type: 'bool'},
            {name: 'IsReceived', mapping: 'IsReceived' , type: 'bool'},
        ]
    });
    //Модкль номеклатуры
    Ext.define('ItemModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'Name', mapping: 'Name', type: 'string'},
            {name: 'Id', mapping: 'Id', type: 'int'},
        ]
    });
    
    //Модкль технологий
    Ext.define('TechnologyModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'Name', mapping: 'Name', type: 'string'},
            {name: 'Id', mapping: 'Id', type: 'int'},
        ]
    });

    //Создаем модель данных для таблички
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'ProjectExternal',
        proxy: {
            type: 'ajax',
            url: 'http://127.0.0.1:9000/table/ProjectExternal',
        },
        //Сортировка по умолчанию
        sorters: [{
            property: 'Id',
            direction:'ASC'
        }]
    });
    
    //Создаем модель данных для списка номеклатуры
    var storeItem = Ext.create('Ext.data.Store', {
        model: 'ItemModel', 
        proxy: {
            type: 'ajax',
            url: 'http://127.0.0.1:9000/InfoCyber/getItems',
        },
    });
    
    //Создаем источник данных по получению технологий
    var storeTechnology = Ext.create('Ext.data.Store', {
        model: 'TechnologyModel', 
        proxy: {
            type: 'ajax',
            url: 'http://127.0.0.1:9000/Info/getTechnology',
        }
    });
    
//Вызывается при реактировании строки
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1,
        listeners: {
            edit: function (editor, ctx, eOpts) {
                if(ctx.field == "Item")
                {
                    
                }
                //Скрипт вызывается при изменении элементов в табличке
                //Тут надо послать запрос на изменение существующего заказа!
                
                //newItemCangedId
                var newModel = ctx.record.copy(); //copy the old model
                return;
            }
        }
    });

    //Настройка видимости стобцов в таблице
    var grid = Ext.create('Ext.grid.Panel', {
        viewConfig: {
            loadingText: "Загрузка данных..."
        },
        store: store,
        columns: [
            {
            xtype: 'checkcolumn',
            header: ' ',
            dataIndex: 'Changed',
            width: 30,
            stopSelection: false,
            listeners: {
                checkchange : function( editor , rowindex , isChecked){
                    return;
                }
            }
        }, {
            header: '#',
            dataIndex: 'Proj_Id',
            width: 50
        }, {
            header: 'Наименование',
            dataIndex: 'Name',
            width: 250,
            editor: {
                allowBlank: false
            }
        }, {
            header: 'Материал',
            dataIndex: 'Item',
            width: 200,
            editor: new Ext.form.field.ComboBox({
                typeAhead: true,
                //hideTrigger: true,
                minChars: 1, 
                triggerAction: 'all',
                selectOnTab: true,
                valueField: 'Name',
                displayField: 'Name',
                store: storeItem,
                lazyRender: true,
                listClass: 'x-combo-list-small',   
                listeners: {
                    select: function (combo, record ,rrr) {
                        //При изменении выпадающего списка мы устанавливаем нове значение материала
                        newItemCangedId = record[0].get('Id');
                    }
                },            
            })
        }, {
            header: 'Технология',
            dataIndex: 'Technology',
            width: 200,
            editor: new Ext.form.field.ComboBox({
                typeAhead: true, 
                triggerAction: 'all',
                selectOnTab: true,
                valueField: 'Name',
                displayField: 'Name',
                store: storeItem,
                lazyRender: true,
                listClass: 'x-combo-list-small',   
                listeners: {
                    select: function (combo, record ,rrr) {
                        //При изменении выпадающего списка мы устанавливаем нове значение технолоигг
                        newTechnologyCangedId = record[0].get('Id');
                    }
                },            
            })
        }, {
            header: 'Создан',
            dataIndex: 'CreatedDate',
            width: 130,
            renderer: formatDate,
        }, {
            header: 'Толщина',
            dataIndex: 'Thickness',
            width: 70,
            align: 'right',
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 0,
                maxValue: 100000
            }
        }, {
            header: 'Размер',
            dataIndex: 'Size',
            width: 70,
            editor: {
                allowBlank: false
            }
        }, {
            header: 'Количество',
            dataIndex: 'Cnt',
            width: 70,
            align: 'right',
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 0,
                maxValue: 100000
            }
        }, {
            header: 'Статус',
            dataIndex: 'Status',
            width: 70,
            align: 'right'
        }, {
            xtype: 'checkcolumn',
            header: 'Изготовлено?',
            dataIndex: 'IsMade',
            width: 70,
            stopSelection: false,
            listeners: {
                checkchange : function( editor , rowindex , isChecked){
                    //Вызывается если поставили флажок о получении
                    return;
                }
            }
        }, {
            xtype: 'checkcolumn',
            header: 'Получено?',
            dataIndex: 'IsReceived',
            width: 70,
            stopSelection: false,
            listeners: {
                checkchange : function( editor , rowindex , isChecked){
                    //Вызывается если поставили флажок о получении
                    return;
                }
            }
        }, ],
        
        selModel: {
            selType: 'cellmodel'
        },
        renderTo: 'editor-grid',
        width: '100%',
        height: 300,
        title: 'Заказа для поставщиков',
        frame: true,
        tbar: [{
            text: 'Создать',
            handler : function(){
                // Create a model instance
                var r = Ext.create('ProjectExternal', {
                    common: 'New Plant 1',
                    light: 'Mostly Shady',
                    price: 0,
                    availDate: Ext.Date.clearTime(new Date()),
                    indoor: false
                });
                store.insert(0, r);
                cellEditing.startEditByPosition({row: 0, column: 0});
            }
        }],
        plugins: [cellEditing]
    });
    storeItem.load();
    // Загрузка данных в табличку, 
    //следует вызывать если данные загружаются аяксом
    store.load({
        callback: function(records, options, success){
            //Вызываетс когда данные уже загружены
            //combobox.getPicker().setLoading(false);
            //elma.placeWait(true); 
        }
    });
});