Results 1 to 4 of 4

Thread: how can i send an ajax request from row-editor's Grid ... ?

  1. #1
    Sencha User masoud_tamizy's Avatar
    Join Date
    Oct 2011
    Posts
    108
    Answers
    1

    Default how can i send an ajax request from row-editor's Grid ... ?

    i have an grid that have a row-editor , and i want when focus lost from one of textfields in my grid[row-editor] for example user_id , the value of this field to be sent to server for unique test ...
    how can i do with this Ajax sending request ?
    i saw a sample here : (i need it but for grid-edit)
    http://www.superdit.com/2010/05/07/u...php-and-extjs/

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    you can use this code when you lose focus:

    Code:
    Ext.Ajax.request({
            url: '__yourURL__&ID=' + ID,  // you can append your parameter to the URL
            params: { /* or here as a parameter*/},
            success: function(response) {            
                    // do some things on success
            },
            failure: function() {/* do some things on failure*/}
        });
    For more details, check out the API Docs

  3. #3
    Sencha User masoud_tamizy's Avatar
    Join Date
    Oct 2011
    Posts
    108
    Answers
    1

    Default

    Quote Originally Posted by Farish View Post
    you can use this code when you lose focus:

    Code:
    Ext.Ajax.request({
            url: '__yourURL__&ID=' + ID,  // you can append your parameter to the URL
            params: { /* or here as a parameter*/},
            success: function(response) {            
                    // do some things on success
            },
            failure: function() {/* do some things on failure*/}
        });
    For more details, check out the API Docs
    thanks and i need what code that diagnose blur event . . .
    Code:
    Ext.require([
            'Ext.data.*',
            'Ext.grid.*',
        'Ext.panel.*',
        'Ext.form.*',
        'Ext.util.*',
        'Ext.tip.*',
        'Ext.Action',
        'Ext.ux'
    ]);
    
    
    Ext.onReady(function() {
    
    
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
                    { name: 'national_code', type: 'string' },
                    { name: 'user_id', type: 'int' },
            { name: 'first_name', type: 'string' },
            { name: 'last_name', type: 'string' },
            { name: 'father_name', type: 'string' },
            { name: 'sh_sh', type: 'string' },
            { name: 'sh_s_sh', type: 'string' },
            { name: 'gender', type: 'string' },
            { name: 'birth_date', type: 'date' },
            { name: 'birth_location', type: 'string' },
            { name: 'email', type: 'email' },
            { name: 'home_address', type: 'string' },
            { name: 'home_phone', type: 'string' },
            { name: 'postal_code', type: 'string' },
            { name: 'job_title', type: 'string' },
            { name: 'job_address', type: 'string' },
            { name: 'job_phone', type: 'string' },
            { name: 'mobile', type: 'string' },
            { name: 'fax', type: 'string' },
            { name: 'comment', type: 'string' }
        ],
        idProperty:"user_id",
        validations: [
                    {type: 'presence',  field: 'national_code'},
            {type: 'presence',  field: 'first_name'},
            {type: 'presence',  field: 'last_name'},
            {type: 'presence',  field: 'father_name'},
            {type: 'presence',  field: 'gender'},
            {type: 'presence',  field: 'home_address'},
            {type: 'presence',  field: 'home_phone'},
            {type: 'presence',  field: 'postal_code'},
                    {type: 'inclusion', field: 'gender',   list: ['????', '????']}
        ]
    });
    var sex = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"M", "name":"????"},
            {"abbr":"F", "name":"????"}
        ]
    });
    var userstore = Ext.create('Ext.data.Store', {
        id:'userstore',
            model: 'User',
        autoLoad: true,
        autoSync: true,    
        proxy: {
                     type: 'ajax',
            noCache:true,
            api:{
                read: 'prepare.php',
                create:'insert.php',
                update: 'update.php',
                destroy: 'delete.php'
            },
            reader : {type:'json',root:'users',successProperty: 'success',messageProperty: 'message'},
            writer : {type:'json',root:'users',writeAllFields: true},
            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(proxy, operation){
                    if (operation.action == 'destroy') {
                        //main.child('#form').setActiveRecord(null); // insert action to perform fired destroy
                        alert('destroy operation selected');
                    }
                    Ext.example.msg(operation.action, operation.resultSmessageet);
                }
        }
    });
        var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToMoveEditor: 1,
            errorSummary:false
        });
        var grid = Ext.create('Ext.grid.Panel', {
            listeners: {
                ////////////////////
            },
            store: userstore,
            selType: 'rowmodel',
            loadMask: true,
            plugins:  [rowEditing],
            columns: [
            {    dataIndex: 'national_code',
                            width: 75,
                hideable: false,
                header:'??????',
                sortable:false,
                align:'right',
                editor: {id:'national',xtype:'numberfield',hideTrigger: true}
            },{    dataIndex:'first_name',
                text:'???',
                width: 75,
                align:'right',
                field: {xtype:'textfield',allowBlank: false}
            },{    dataIndex:'last_name',
                text:'?????',
                width: 75,
                align:'right',
                field: {xtype:'textfield',allowBlank: false}
            },{    dataIndex:'father_name',
                text:'??? ???',
                width: 75,
                align:'right',
                field: {xtype:'textfield',allowBlank: false}
            },{    dataIndex:'sh_sh',
                text:'????? ????????',
                width: 90,
                align:'right',
                sortable:false,
                field: {xtype:'numberfield',hideTrigger: true,allowBlank: true}
            },{    dataIndex:'sh_s_sh',
                width: 125,
                text:'????? ????? ????????',
                sortable:false,
                align:'right',
                field: {xtype:'textfield',allowBlank: true,selectOnFocus:true}
            },{    dataIndex:'gender',
                text:'?????',
                width: 50,
                align:'right',
                editor: {xtype:'combo',store: sex,editable:false,allowBlank: false}
            },{    dataIndex:'birth_date',
                text:'?????  ????',
                width: 75,
                align:'right',
                hidden:true,
                renderer : Ext.util.Format.dateRenderer('d/m/Y'),
                editor: {xtype:'datefield',allowBlank: true,selectOnFocus:true}
            },{    dataIndex:'birth_location',
                text:'??? ????',
                width: 100,
                hidden:true,
                align:'right',
                field: {type:'textfield',allowBlank: true,selectOnFocus:true}
            },{    dataIndex:'email',
                text:'??? ?????????',
                width: 150,
                hidden:true,
                align:'left',
                field: {type:'textfield',vtype:'email',allowBlank:true,selectOnFocus:true}
            },{    dataIndex:'home_address',
                text:'???? ????',
                width: 175,
                align:'right',
                field: {type:'textfield',allowBlank: false,selectOnFocus:true}
            },{    dataIndex:'home_phone',
                text:'???? ????',
                width: 80,
                align:'right',
                field: {xtype:'numberfield',hideTrigger: true,allowBlank: false}
            },{    dataIndex:'postal_code',
                text:'?? ????',
                width: 75,
                align:'right',
                field: {xtype:'numberfield',hideTrigger: true,allowBlank: false}
            },{    dataIndex:'job_title',
                text:'???',
                align:'right',
                hidden:true,
                field: {xtype:'textfield',allowBlank: true,selectOnFocus:true}
            },{    dataIndex:'job_address',
                text:'???? ??? ???',
                align:'right',
                hidden:true,
                field: {type:'textfield',allowBlank: true,selectOnFocus:true,maxLengthText:"! ??? ???? ?????? ?? ????? 255 ????? ????",maxLength:255,enforceMaxLength:true}
            },{    dataIndex:'job_phone',
                text:'???? ??? ???',
                align:'right',
                width: 80,
                hidden:true,
                field: {xtype:'numberfield',hideTrigger: true,allowBlank: true}
            },{    dataIndex:'mobile',
                text:'???? ?????',
                width: 80,
                align:'right',
                field: {xtype:'numberfield',hideTrigger: true,allowBlank: true},
                hidden:true
            },{    dataIndex:'fax',
                text:'????',
                width: 80,
                align:'right',
                hidden:true,
                field: {xtype:'numberfield',hideTrigger: true,allowBlank: true}
            },{    dataIndex:'comment',
                text:'???????',
                align:'right',
                hidden:true
            }],
            title: '???? ???????',
            tbar : [{
                itemId : 'remove',
                text : '????? ???',
                iconCls: 'employee-remove',
                handler : function() {
                                   var select = grid.getSelectionModel();
                                    rowEditing.cancelEdit();
                    userstore.remove(select.getSelection());
                },
                disabled : true
            }, {
                text : '????? ????',
                iconCls: 'employee-add',
                handler : function() {
                    var record = Ext.create('User',{
                                            national_code: '1234567890',
                                            first_name: '???',
                                            last_name: '?????',
                                            father_name: '??? ???',
                                            gender: '????',
                        home_address:'???? ????',
                        home_phone:'1234567890',
                        postal_code:'1234567890'
                    });
                    rowEditing.cancelEdit();
                    userstore.insert(0, record);
                    rowEditing.startEdit(0, 0);
                }
            } ],
            height:575,
            width:1366,
            listeners: {
                    select: function(rowModel, record) {
                        var code = record.get('national_code');
                        var id = record.get('user_id');
                        console.log('????? ????? ?????? ?? :',code);
                        console.log('????? ?????? :',id);
                    },
                    selectionchange: function(selModel, selected) {
                         var rec = grid.getSelectionModel().getSelection()[0];
                        if (rec) {
                            console.log("Sell " + rec.get('last_name'));
                        } else {
                            console.log('Please select a company from the grid');
                        }
                    }
            },
            renderTo: Ext.getBody(),
             tools: [{ type: 'refresh' }]
        });
        grid.getSelectionModel().on('selectionchange', function(selModel, selections){
            grid.down('#remove').setDisabled(selections.length === 0);
        });
    });
    i need it for national_code grid cilumn .

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    you can assign a listener for the blur event of the editor for that column:


    Code:
    { dataIndex: 'national_code',  width: 75,  hideable: false, header:'??????',  sortable:false,  align:'right',
      editor: 
       {
           id:'national',
           xtype:'numberfield',
           hideTrigger: true,
        listeners:
        {
          blur: function() {alert('blur');}
        }
       }
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •