Results 1 to 8 of 8

Thread: Post Grid Values

  1. #1

    Default Post Grid Values

    hello !
    i am confused , my prob is this that i have a form of invoice , in my form there are five textboxes , one button and a grid . i can add my textbox values in grid by clicking that add button , you can see my form in the attached file. now my issue is this that i want to add all the grid values in my mssql database ,for this i have a webservice .my webservice works perfectly when i want to save my textboxes data .but it is very first time that i am doing this with grid.
    someone give me an idea to make an array and then pass that array as a parameter , but i have a Ext.data.ArrayStore , so i think there is no need to make another array for this , now i want to know
    1-is there any need to make another array?
    2-if yes then how to pass values of grid in an array?
    3-if no then how to send values of my store to my webservice so that i can save them in my db.

    please help me , i am very newbie in extjs ,

    main.jpg

  2. #2
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    you don't need an array store!
    just set the "autoSync" property for the store :
    Code:
    autoSync : true
    or do
    Code:
    store.sync();

  3. #3

    Default

    thanks charmer for your quick reply please check this code
    Code:
    Ext.onReady(function() {            var store = new Ext.data.ArrayStore({
                    fields: [
                           { name: 'ProductID' },
                           { name: 'ProductName' },
                           { name: 'Qty' },
                           { name: 'Rate' },
                           { name: 'Total' }
    
    
            ]
                });
    
    
                var myRec = new Ext.data.Record.create(
                     [
                       { name: 'ProductID' },
                           { name: 'ProductName' },
                           { name: 'Qty' },
                           { name: 'Rate' },
                           { name: 'Total' }
                     ]
        );
    
    
    
    
                // create the Grid
                var grid = new Ext.grid.GridPanel({
                    store: store,
                    columns: [
                { id: 'ID', header: 'ID', sortable: true },
                { id: 'Name', header: 'Name', sortable: true },
                { id: 'Qty', header: 'Qty', sortable: true },
                { id: 'Rate', header: 'Rate', sortable: true },
                { id: 'Total', header: 'Total', sortable: true },
            ],
                    stripeRows: true,
                    autoExpandColumn: 'Name',
                    height: 350,
                    width: 670,
                
                    // config options for stateful behavior
                    stateful: true,
                    stateId: 'grid'
                });
    please guide me is i am on the right way ? , can you give me any idea how to save my grid values in my database ?

    Best Regards

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

    Default

    You need to configure a proxy in your store or use store.setProxy()

    Code:
    store.setProxy({ 
            type: 'ajax', 
            url: 'YOUR_SERVER_URL',
            reader: { type: 'json' }, writer: { type: 'json'} 
        });
    Configure the reader and writer according to your needs.

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

    Default

    Also, you may want to try the rowEditing plugin for the grid to allow adding new entries and modifying them directly in the grid.

  6. #6

    Default

    its not working , please can anyone tell me ,how to add all my store data in an array , and pass that array as a parameter to mywebservice ??
    please help me. its make me frustrated

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    @waqasaslammmeo,

    You don't nescessary to create an array to store values from grid's store and then pass this array to server side. You just need to config your store to do this for you. You should read more about how to config your store, proxy, reader, writer, etc.

    Below is an example basing on your code:
    Code:
    Ext.onReady(function() {            
        var store = new Ext.data.ArrayStore({
            fields: [
               { name: 'ProductID' },
               { name: 'ProductName' },
               { name: 'Qty' },
               { name: 'Rate' },
               { name: 'Total' }
            ],
            autoSync: true, // auto sync your store data with proxy
            proxy: {
                type: 'ajax',
                api : {
                    read: 'url for loading records',
                    create: 'url for creating new records',
                    update: 'url for updating existing records',
                    destroy: 'url for deleting existing records',
                },
                reader: {
                    type: 'array', // use array reader if your loading records are in the form of array not objects
                    root: 'root'
                },
                writer: {
                    type: 'json'
                }
            }
        });
    This way, each time you add a new record to grid's store, the store will automatically generate a creating request and send it to server side script for processing.

    I myselft love using 'json' reader instead of 'array' reader so I often use Ext.data.Store not Ext.data.ArrayStore.

  8. #8

    Exclamation

    , this is very first time in my life what i am feeling now , seriously i am thinking to close all my files open in my computer and after taking a cup of tea i will not work on extjs , it is very annoying . i want to save my grid records , simple is this , i am using asp.net , please please please , help me in this, if some one can provide a sample working file then i will be very thankful to him/her . otherwise this is the last hour for me to work on extjs . here is my whole code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Invoice</title>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="CSS/ext-all.css" />
        <!-- Common JS Files -->
    
    
        <script type="text/javascript" src="Common/ext-base.js"></script>
    
    
        <script type="text/javascript" src="Common/ext-all.js"></script>
    
    
        <!--<script type="text/javascript" src="Components/anchoring.js"></script>-->
    
    
        <script type="text/javascript" src="Components/CheckColumn.js"></script>
    
    
        <script type="text/javascript">
            Ext.onReady(function() {
               
                var store = new Ext.data.ArrayStore({
                    fields: [
                           { name: 'ProductID' },
                           { name: 'ProductName' },
                           { name: 'Qty' },
                           { name: 'Rate' },
                           { name: 'Total' }
    
    
            ]
                });
    
    
                var myRec = new Ext.data.Record.create(
                     [
                           { name: 'ProductID' },
                           { name: 'ProductName' },
                           { name: 'Qty' },
                           { name: 'Rate' },
                           { name: 'Total' }
                     ]
        );
    
    
    
    
                // create the Grid
                var grid = new Ext.grid.GridPanel({
                    store: store,
                    columns: [
                { id: 'ID', header: 'ID', sortable: true },
                { id: 'Name', header: 'Name', sortable: true },
                { id: 'Qty', header: 'Qty', sortable: true },
                { id: 'Rate', header: 'Rate', sortable: true },
                { id: 'Total', header: 'Total', sortable: true },
            ],
                    stripeRows: true,
                    autoExpandColumn: 'Name',
                    height: 350,
                    width: 670,
                    //title: 'My Information',
                    // config options for stateful behavior
                    stateful: true,
                    stateId: 'grid'
                });
    
    
                //************************************
                var Detail = new Ext.FormPanel({
                    id: 'city-form',
                    renderTo: bd,
                    frame: true,
                    labelAlign: 'left',
                    //title: 'Detail',
                    bodyStyle: 'padding:5px',
                    width: 670,
                    items: {
                        xtype: 'compositefield',
                        fieldLabel: 'ProductID',
                        //anchor: '-20',
                        items: [
                                        { xtype: 'textfield', name: 'ProductID2', id: 'ProductID2', width: 50 },
                                        { xtype: 'textfield', name: 'ProductName', id: 'ProductName', width: 120 }, { xtype: 'button', text: 'Search' },
                                        { html: 'Qty:' }, { xtype: 'textfield', name: 'Qty', id: 'Qty', width: 30 },
                                        { html: 'Rate:' }, { xtype: 'textfield', name: 'Rate', id: 'Rate', width: 40 },
                                        { html: 'Total:' }, { xtype: 'textfield', name: 'Total', id: 'Total', width: 50 },
                                        { xtype: 'button',
                                            text: 'Add',
                                            handler: function() {
                                                var myinsert = new myRec({
                                                    ProductID: Ext.getCmp('ProductID2').getValue(),
                                                    ProductName: Ext.getCmp('ProductName').getValue(),
                                                    Qty: Ext.getCmp('Qty').getValue(),
                                                    Rate: Ext.getCmp('Rate').getValue(),
                                                    Total: Ext.getCmp('Total').getValue()
                                                })
                                                store.add(myinsert);
                                                Detail.getForm().reset();
                                            }
                                        }
                            ]
                    }
                });
    
    
                //**********************************************************
    
    
    
    
    
    
                var Footer = new Ext.FormPanel({
                    id: 'Footer',
                    renderTo: bd,
                    frame: true,
                    labelAlign: 'left',
                    // title: 'Cities',
                    bodyStyle: 'padding:5px',
                    width: 670,
                    items: {
                        xtype: 'compositefield',
                        fieldLabel: 'Footer',
                        items: [
                                        { html: 'TotalBill:' }, { xtype: 'textfield', name: 'ProductID', id: 'ProductID', width: 50 },
                                        { html: 'Disc.:' }, { xtype: 'textfield', name: 'Discount', id: 'Discount', width: 50 },
                                        { html: 'NetBill:' }, { xtype: 'textfield', name: 'NetBill', id: 'NetBill', width: 60 },
                                         { html: 'Narration:' }, { xtype: 'textfield', name: 'Narration', id: 'Narration', fieldLable: 'Narration', width: 180 }
                               ]
                    },
                    buttons: [{
                        text: 'Save',
                        handler: function() {
    
    
    
    
                            if (gridForm.getForm().isValid()) {
                                gridForm.getForm().submit({
                                    url: 'services/WebService1.asmx/Save',
                                    method: 'POST',
                                    scope: this,
                                    waitMsg: 'Saving data...',
                                    success: function(result, action) {
                                        Ext.Msg.alert('Success', 'Record has been saved successfully');
                                        //alert(action.result.id);
                                        //var jsonData = Ext.util.JSON.decode(action.result.data.result);
                                        //alert(jsonData);
                                        Ext.getCmp('grdCity').getStore().reload();
                                        Ext.getCmp('btnDelete').disable();
                                        gridForm.getForm().reset();
                                    },
                                    failure: function(f, a) {
                                        if (a.failureType === Ext.form.Action.CONNECT_FAILURE) {
    
    
                                            Ext.Msg.alert('Failure', 'Server reported:' + a.response.status + ' ' + a.response.statusText);
                                        }
                                        if (a.failureType === Ext.form.Action.SERVER_INVALID) {
                                            Ext.Msg.alert('Warning', a.result.errormsg);
                                        }
                                    }
                                });
                            }
                        }
                    }, {
                        text: 'Delete',
                        id: 'btnDelete',
                        handler: function() {
                            //var id=Ext.get('Id').dom.value;
                            var id = Ext.getCmp('IDNo');
                            var mode = Ext.getCmp('hdnMode');
                            if (gridForm.getForm().isValid()) {
                                gridForm.getForm().submit({
                                    url: 'services/WebService1.asmx/Delete',
                                    //---Passing parameters --------
                                    //params: "id=" + Ext.get('Id').dom.value, method to post value of specif field as parameter
                                    //2nd--other method to post parameters is
                                    //params: {"metaID": id, columnName: field},
                                    params: { id: id.value, mode: mode.value },
                                    //-------------------------------------------------------------------
                                    method: 'POST',
                                    scope: this,
                                    waitMsg: 'Deleting data ...',
                                    success: function(result, action) {
                                        Ext.Msg.alert('Success', 'Record has been deleted successfully');
                                        Ext.getCmp('grdCity').getStore().reload();
                                        gridForm.getForm().reset();
                                    },
                                    failure: function(f, a) {
                                        if (a.failureType === Ext.form.Action.CONNECT_FAILURE) {
                                            Ext.Msg.alert('Failure', 'Server reported:' + a.response.status + ' ' + a.response.statusText);
                                        }
                                        if (a.failureType === Ext.form.Action.SERVER_INVALID) {
                                            Ext.Msg.alert('Warning', a.result.errormsg);
                                        }
                                    }
                                });
                            }
                        }
                    }, {
    
    
                        /*for (var i = 0; i < yourGrid.getStore().data.length; i++) { 
                        var element = Ext.get(yourGrid.getView().getRow(i));
                        var record = yourGrid.getStore().getAt(i);
                        alert(record.data.ID); }*/
    
    
    
    
    
    
                        text: 'Close',
                        handler: function() {
    
    
    
    
                        var mydata = new function getJsonOfStore(store) {
                                var datar = new Array();
                                var jsonDataEncode = "";
                                var records = store.getRange();
                                for (var i = 0; i < records.length; i++) {
                                    datar.push(records[i].data);
                                }
                                jsonDataEncode = Ext.util.JSON.encode(datar);
    
    
                                return jsonDataEncode;
                                alert(jsonDataEncode);
                            }
    
    
    
    
                        }
    }]
                    });
    
    
    
    
                    //*************************************************
                    var bd = Ext.getBody();
                    var gridForm = new Ext.FormPanel({
                        id: 'city-form',
                        renderTo: bd,
                        frame: true,
                        labelAlign: 'left',
                        title: 'Invoice',
                        bodyStyle: 'padding:5px',
                        width: 670,
                        items: [{
                            xtype: 'textfield', name: 'RecID', id: 'RecID', fieldLabel: 'Record ID'
                        }, {
    
    
                            xtype: 'compositefield',
                            fieldLabel: 'Invoice Date',
                            anchor: '-20',
    
    
                            items: [
                                 { xtype: 'datefield', name: 'Date', id: 'Date' },
                                 { html: 'Customer:' }, { xtype: 'textfield', name: 'CustomerID', id: 'CustomerID', width: 50 },
                                 { xtype: 'textfield', name: 'CustomerName', id: 'CustomerName', width: 200 },
                                 { xtype: 'button', text: 'Search'}]
                        },
                         Detail, grid, Footer
                   ]
    
    
    
    
    
    
                    });
    
    
                });
    
    
        </script>
    
    
    </head>
    <body>
    </body>
    </html>
    Regards

Tags for this Thread

Posting Permissions

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