PDA

View Full Version : Post Grid Values



waqasaslammmeo
5 Mar 2012, 12:17 AM
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 ,

32377

chramer
5 Mar 2012, 12:35 AM
you don't need an array store!
just set the "autoSync" property for the store :

autoSync : true
or do

store.sync();

waqasaslammmeo
5 Mar 2012, 12:45 AM
thanks charmer for your quick reply please check this 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

Farish
5 Mar 2012, 12:52 AM
You need to configure a proxy in your store or use store.setProxy()


store.setProxy({
type: 'ajax',
url: 'YOUR_SERVER_URL',
reader: { type: 'json' }, writer: { type: 'json'}
});

Configure the reader and writer according to your needs.

Farish
5 Mar 2012, 12:53 AM
Also, you may want to try the rowEditing plugin for the grid to allow adding new entries and modifying them directly in the grid.

waqasaslammmeo
5 Mar 2012, 4:24 AM
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 :((

vietits
5 Mar 2012, 7:18 AM
@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 (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store), proxy (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Proxy), reader (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader), writer (http://file:///D:/Prog/script/sencha.com/ext-4.0.7-gpl/docs/index.html#!/api/Ext.data.writer.Writer), etc.

Below is an example basing on your 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.

waqasaslammmeo
5 Mar 2012, 9:58 PM
:( , 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.



<!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