1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Moscow
    Posts
    2
    Vote Rating
    0
    nikolnikon is on a distinguished road

      0  

    Default Unanswered: Problems with grid

    Unanswered: Problems with grid


    Hello!

    I'm beginner in JS and ExtJS.
    I would like to use grid with row editing, but I have several problems.
    1. When I load data from server (xml) they are displayed in grid normally. But when I begin editing the fields of editor are blank.
    2. When I push button to insert a new record request is sending to server immediately with enpty xml nodes. The editor don't apear.
    3. I need the following behavior of editor: when updating a record only a few fields are editable, when inserting a new record all fields are editable. How can I do this?
    Code is below.

    Code:
    Ext.require(['Ext.data.*', 'Ext.grid.*']);
    
    Ext.define('Price', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'id',
            type: 'int',
            useNull: true
        }, 'alloy_name', 'grade', 'prod_name', 'note', 'diameter', 'length', 'width', 'thickness', 'other_dim', 'quantity', 'mass', 'price']
    });
    
    Ext.onReady(function(){
    
        var store = Ext.create('Ext.data.Store', {
            autoLoad: true,
            autoSync: true,
            model: 'Price',
            proxy: {
                type: 'ajax',
                api: {
                    read: 'test_xml_gen.php',
                    create: 'test_editor.php',
                    update: 'test_editor.php',
                    destroy: 'test_editor.php'
                },
                reader: {
                    type: 'xml',
                    root: 'data',
                    record: 'item',
                    idProperty: 'id',
                    successProperty: 'success',
                    messageProperty: 'message'
                },
                writer: { // посылает на сервер POST-запрос, содержащий xml
                    type: 'xml',
                    header: '<?xml version=\'1.0\' encoding=\'utf-8\'?>',
                    documentRoot: 'request',
                    record: 'item',
                    writeAllFields: false
                },
                listeners: {
                    exception: function(proxy, response, operation){
                        Ext.MessageBox.show({
                            title: 'REMOTE EXCEPTION',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            },
            listeners: {
                write: function(store, operation){
                    var record = operation.getRecords()[0],
                        name = Ext.String.capitalize(operation.action),
                        verb;
                        
                        
                    if (name == 'Destroy') {
                        record = operation.records[0];
                        verb = 'Destroyed';
                    } else {
                        verb = name + 'd';
                    }
                    //Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); // возможно, убрать example
                }
            }
        });
        
        var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false,
                listeners: {
                    'edit': function(editor, e) {
                        editor.record.commit();
                    }
                }
    });
        
        var grid = Ext.create('Ext.grid.Panel', {
            renderTo: 'test_editor',
            plugins: [rowEditing],
            width: 1400,
            height: 400,
            frame: true,
            title: 'Прайс-лист',
            store: store,
            columns: [{
                text: 'ID',
                width: 40,
                sortable: true,
                dataIndex: 'id'
            }, {text: "Материал", width: 110, dataIndex: 'alloy_name', sortable: true},
            {text: "Марка", width: 180, dataIndex: 'grade', sortable: true},
            {text: "Тип проката", width: 115, dataIndex: 'prod_name', sortable: true},
            {text: "Примечание", width: 100, dataIndex: 'note', sortable: true},
            {text: "Диаметр", width: 100, dataIndex: 'diameter', sortable: true},
            {text: "Длина", width: 100, dataIndex: 'length', sortable: true},
            {text: "Ширина", width: 100, dataIndex: 'width', sortable: true},
            {text: "Толщина", width: 100, dataIndex: 'thickness', sortable: true},
            {text: "Другой размер", width: 100, dataIndex: 'other_dim', sortable: true},
            {text: "Количество", width: 100, dataIndex: 'quantity', sortable: true, editor: {xtype: 'numberfield', allowBlank: true, minValue: 1, maxValue: 150000}},
            {text: "Масса", width: 100, dataIndex: 'mass', sortable: true, field: {xtype: 'textfield'}},
            {text: "Цена", width: 100, dataIndex: 'price', sortable: true, field: {xtype: 'textfield'}}
            ],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Добавить запись',
                    iconCls: 'icon-add',
                    handler: function(){
                        // empty record
                        store.insert(0, new Price());
                        rowEditing.startEdit(0, 0);
                    }
                }, '-', {
                    itemId: 'delete',
                    text: 'Удалить запись',
                    iconCls: 'icon-delete',
                    disabled: true,
                    handler: function(){
                        var selection = grid.getView().getSelectionModel().getSelection()[0];
                        if (selection) {
                            store.remove(selection);
                        }
                    }
                }]
            }]
        });
        grid.getSelectionModel().on('selectionchange', function(selModel, selections){
            grid.down('#delete').setDisabled(selections.length === 0);
        });
    });

    XML-response when loading data
    Code:
    <price_list>
    
    <success>true</success>
    
    <message>Loaded data</message>
    
    <data>
    <item>
    <id>3</id>
    
    <alloy_name>Никель</alloy_name>
    
    <grade>Н1У</grade>
    
    <prod_name>Лист</prod_name>
    
    <note></note>
    
    <diameter></diameter>
    
    <length>1000</length>
    
    <width>200</width>
    
    <thickness>10</thickness>
    
    <other_dim></other_dim>
    
    <quantity></quantity>
    
    <mass>235</mass>
    
    <price>950</price>
    
    
    </item>
    
    <item>
    <id>4</id>
    
    <alloy_name>Никель</alloy_name>
    
    <grade>НП2</grade>
    
    <prod_name>Лента</prod_name>
    
    <note></note>
    
    <diameter></diameter>
    
    <length></length>
    
    <width>10</width>
    
    <thickness>1</thickness>
    
    <other_dim></other_dim>
    
    <quantity></quantity>
    
    <mass>100</mass>
    
    <price>1235</price>
    
    
    </item>
    
    <item>
    <id>5</id>
    
    <alloy_name>Никель</alloy_name>
    
    <grade>Н1У</grade>
    
    <prod_name>Лист</prod_name>
    
    <note></note>
    
    <diameter></diameter>
    
    <length></length>
    
    <width></width>
    
    <thickness></thickness>
    
    <other_dim>Рубленый</other_dim>
    
    <quantity></quantity>
    
    <mass>300</mass>
    
    <price>1450</price>
    
    
    </item>
    
    <item>
    <id>6</id>
    
    <alloy_name>Никель</alloy_name>
    
    <grade>НП2</grade>
    
    <prod_name>Проволока</prod_name>
    
    <note></note>
    
    <diameter>1.2</diameter>
    
    <length></length>
    
    <width></width>
    
    <thickness></thickness>
    
    <other_dim></other_dim>
    
    <quantity></quantity>
    
    <mass>150</mass>
    
    <price>2800</price>
    
    
    </item>
    
    
    </data>
    
    
    </price_list>
    Thank you.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    2. That is because you have autoSync set to true so as soon as the store detects a datachanged event, it will automatically sync.
    3. On beforeedit, you can disable certain fields.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Location
    Moscow
    Posts
    2
    Vote Rating
    0
    nikolnikon is on a distinguished road

      0  

    Default


    Thank you for answer.

    2. It works.
    3. I try to get access to the editor (field) and disable it. But there is the error: "editor.grid.columns[2].editor is undefined".

    Code:
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false,
                listeners: {
                    edit: function(editor, e) {
                        editor.store.sync();
                        editor.record.commit();
                    },
                    beforeedit: function(editor, e, eOpts) {
                        var id = editor.record.get('id');
                        if (id > 0) {
                            alert("in");
                            //editor.grid.columns[2].disable(); //работает, но не то
                            editor.grid.columns[2].editor.disable();
                        }
                        alert(id);
                    }
                }
    });

Thread Participants: 1