PDA

View Full Version : Getting data from other website with grid



robin30
11 Oct 2007, 6:46 AM
hi all,

A little question if that's ok.

I have a webpage called bank.html with a grid.
The grid is getting it's info from a database.

the grid gives all the bank statements.

when i click on a button a new webpage (bank_details.html) will open. it should show details of that particular bank statement.

this is the bank.js file of the bank.html


/*
Function that does avg or sum of column
�2006 Rodrigo Diniz
www.rodrigodiniz.qsh.eu
You may use this code in anyway you like
but do not remove this copyright
*/
Ext.grid.Grid.prototype.Aggregate =function(){

var dm=this.dataSource;
if(dm.reader.meta.aggregate !=null){
var len= dm.getCount();
var fields=dm.fields;
var aggr=dm.reader.meta.aggregate;
var recordType=this.dataSource.reader.recordType;
var objectSum={};
for(var i = 0; i < len; i++){
var rowSel=dm.getAt(i);
for(var j=0;j< fields.length;j++){
fname=dm.fields.get(j).name;
if(aggr[j]!='none'){
//sum the values--parseFloat to cover more ground
if(objectSum[fname]!=null)
objectSum[fname] += parseFloat(rowSel.data[fname]);
else
objectSum[fname]=parseFloat(rowSel.data[fname]);
}
else{
objectSum[fname]=' ';//empty
}
}
}
}
/*
build the new row -you could also apply
some color to format the value...
the source is yours
*/

for(var i=0;i< aggr.length;i++){
fname=dm.fields.get(i).name;
if(aggr[i]=='avg'){
objectSum[fname]='Avg: ' + objectSum[fname]/len;
}
if(aggr[i]=='sum'){
objectSum[fname]='<b>Sum: '+ objectSum[fname]+'</b>';
}
if(aggr[i]=='total'){
objectSum[fname]='<b>Grand Total'+ objectSum[fname]+'</b>';
}
}
var rec=new recordType(objectSum);
dm.add(rec);
dm.add(rec);
dm.hasAggregate=true;
dm.hasAggregate=true;
}
/*
Override the sort function to prevent the aggregate row
from being sorted
*/
Ext.data.Store.prototype.applySort= function(){
var rowData;
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};

if(this.hasAggregate){
//copy the data of the last Row
rowData=this.getAt(this.getCount()-1);
//remove the row
this.data.removeAt(this.getCount()-1,1)
}
this.data.sort(s.direction, fn);
if(rowData){
this.data.add(rowData);
}
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction, fn);
}
}
}

var GridUI = function() {
//enable Quicktips
Ext.QuickTips.init();

//set vars
var ds; //datastore for grid
var cm; //columnModel
var grid; //component
var fm = Ext.form, Ed = Ext.grid.GridEditor; // shorthand alias

function formatBoolean(value) {
return [
'<img ', // give the checkbox image a css class of "checkbox"
'src="grid/',
value? 'checked.gif' : 'unchecked.gif',
'"/>'
].join("");
};

//create the datastores
function setupDataSource() {
//create the Data Store for the grid
ds = new Ext.data.Store({
//set the http-proxy (link to the php document)
proxy: new Ext.data.ScriptTagProxy({
url: 'bank.php' //a function in your php-script must be activated when ac = showdata
}),

//set up the JsonReader
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
// aggregate:['none','none','none','none','none','none','none']
},[
{name:'id', type:'string', mapping:'id'},
{name: 'startbalance', type: 'string', mapping: 'startbalance'},
{name: 'from_date', type: 'string', mapping: 'from_date'},
{name: 'till', type: 'string', mapping: 'till'},
{name: 'deposit', type:'string', mapping: 'deposit'},
{name: 'substraction', type: 'string', mapping: 'substraction'},
{name: 'endbalance', type:'string',mapping: 'endbalance'}
])
});

//load datastores
ds.load();
}

function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

//create the columnmodel
function getColumnModel() {
cm = new Ext.grid.ColumnModel([{
header: "Start Balance",
dataIndex: 'startbalance',
width: 120,
renderer: Ext.util.Format.usMoney,
renderer: change
},{
header: "From",
dataIndex: 'from_date',
width: 120
},{
header: "Till",
dataIndex: 'till',
width: 120
},{
header: "Deposit",
dataIndex: 'deposit',
width: 75,
renderer: Ext.util.Format.usMoney
},{
header: "Substractions",
dataIndex: 'substraction',
width: 85,
renderer: Ext.util.Format.usMoney
},
{
header: "End Balance",
dataIndex: 'endbalance',
width: 120,
renderer: Ext.util.Format.usMoney,
renderer: change
}
]);

//set the default for sorting the columns
cm.defaultSortable = false;

return cm;
}

//create the grid
function buildGrid() {
//create the form
var gridForm = new Ext.form.Form({});

//create the grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: getColumnModel(),
enableColLock:false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true
});

//set the layout for the grid
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

//render the grid
// ds.on('load', grid.Aggregate,grid,true);
grid.render();
grid.getSelectionModel().selectFirstRow();

//set the header
var gridHead = grid.getView().getHeaderPanel(true);

var tb = new Ext.Toolbar(gridHead, [{
text:'Account #: 9836250069'
}, '-',{
text: 'Add Statement',
cls: 'x-btn-text-icon',
icon: 'images/icons/add.png',
id:'show-dialog-btn'
}, '-',{
text: 'Delete Statement',
cls: 'x-btn-text-icon',
icon: 'images/icons/delete.png',
handler: function() {
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow) {
var conn = new Ext.data.Connection;
conn.request({
url:'deletestatement.php?id='+selectedRow.data.id,
params:{rowid:selectedRow.data.id},
callback: function(options, success, response){
if (success){
ds.remove(selectedRow);
Ext.Msg.show({
waitmsg:'Deleting Data ..., Please Wait!',
title:'Confirmation',
msg: 'Data Successfully Deleted.',
buttons: Ext.Msg.OK
})
grid.getDataSource().reload()

}
}
});
}
}
},
{
text: "View Details Statement",
cls: 'x-btn-text-icon',
icon: 'images/icons/page.png',
handler: function() {
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow) {
var conn = new Ext.data.Connection;
conn.request({
url:'../banking/bank_details.html?id='+selectedRow.data.from_date,

callback: function(options, success, response){
if (success){
window.location = "../banking/bank_details.html?id=" + selectedRow.data.from_date;

}
}
});
}
}
}]);

var gridFoot = grid.getView().getFooterPanel(true);
var tb1=new Ext.Toolbar(gridFoot, [{}]);
//activate function updateDB when a cell is edited
grid.on('afteredit', updateDB);

grid.addListener('rowdblclick', openEditCustomerDialog);

function openEditCustomerDialog() {
var record = grid.getSelectionModel().getSelected();
selectedCustomerId = record.id;

var dlg;
if (!dlg) {
dlg = new Ext.BasicDialog('grid', {
height: 200,
width: 300,
minHeight: 100,
minWidth: 150,
modal: true,
shadow: true
});
dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
dlg.addButton('Cancel', dlg.hide, dlg);
}
dlg.show();
}
function updateDB(oGrid_event){
gridForm.submit(
{
//waitMsg: 'Saving changes, please wait...',
url:'bank.php?ac=saveData&field='+oGrid_event.field+'&row='+oGrid_event.row+'&value='+oGrid_event.value, //php function that saves the data
success:function(form, action) {
alert('Congrats! Your changes were saved!!!!');
grid.getDataSource().reload()
},
failure: function(form, action) {
alert('Oops the delete did not work out too well!');
}
}
);
}

//render form
gridForm.render('editGrid');
}

return {
//the init
init : function() {
setupDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
}
}
}();

Ext.onReady(GridUI.init, GridUI);

the bank_details.js file of the bank_details.html is this:

/*
Function that does avg or sum of column
�2006 Rodrigo Diniz
www.rodrigodiniz.qsh.eu
You may use this code in anyway you like
but do not remove this copyright
*/
Ext.grid.Grid.prototype.Aggregate =function(){

var dm=this.dataSource;
if(dm.reader.meta.aggregate !=null){
var len= dm.getCount();
var fields=dm.fields;
var aggr=dm.reader.meta.aggregate;
var recordType=this.dataSource.reader.recordType;
var objectSum={};
for(var i = 0; i < len; i++){
var rowSel=dm.getAt(i);
for(var j=0;j< fields.length;j++){
fname=dm.fields.get(j).name;
if(aggr[j]!='none'){
//sum the values--parseFloat to cover more ground
if(objectSum[fname]!=null)
objectSum[fname] += parseFloat(rowSel.data[fname]);
else
objectSum[fname]=parseFloat(rowSel.data[fname]);
}
else{
objectSum[fname]=' ';//empty
}
}
}
}
/*
build the new row -you could also apply
some color to format the value...
the source is yours
*/

for(var i=0;i< aggr.length;i++){
fname=dm.fields.get(i).name;
if(aggr[i]=='avg'){
objectSum[fname]='Avg: ' + objectSum[fname]/len;
}
if(aggr[i]=='sum'){
objectSum[fname]='<b>Sum: '+ objectSum[fname]+'</b>';
}
if(aggr[i]=='total'){
objectSum[fname]='<b>Grand Total'+ objectSum[fname]+'</b>';
}
}
var rec=new recordType(objectSum);
dm.add(rec);
dm.add(rec);
dm.hasAggregate=true;
dm.hasAggregate=true;
}
/*
Override the sort function to prevent the aggregate row
from being sorted
*/
Ext.data.Store.prototype.applySort= function(){
var rowData;
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};

if(this.hasAggregate){
//copy the data of the last Row
rowData=this.getAt(this.getCount()-1);
//remove the row
this.data.removeAt(this.getCount()-1,1)
}
this.data.sort(s.direction, fn);
if(rowData){
this.data.add(rowData);
}
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction, fn);
}
}
}

var GridUI = function() {
//enable Quicktips
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat('Y-m-d') : '';
};
//set vars
var ds; //datastore for grid
var cm; //columnModel
var grid; //component
var fm = Ext.form, Ed = Ext.grid.GridEditor; // shorthand alias

function formatBoolean(value) {
return [
'<img ', // give the checkbox image a css class of "checkbox"
'src="grid/',
value? 'checked.gif' : 'unchecked.gif',
'"/>'
].join("");
};

//create the datastores
function setupDataSource() {

//create the Data Store for the grid
ds = new Ext.data.Store({
//set the http-proxy (link to the php document)
proxy: new Ext.data.HttpProxy({
url: 'bank_details.php'
}),

//set up the JsonReader
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id',
aggregate:['none','none','total','none','none','none','sum']
},[
{name:'id', type:'string', mapping:'id'},
{index: 'statement_from', name: 'statement_from', type: 'string', mapping: 'statement_from'},
{name: 'date', type: 'string', mapping: 'date'},
{name: 'description', type: 'string', mapping: 'description'},
{name: 'deposit', type: 'string', mapping: 'deposit'},
{name: 'substraction', type:'string', mapping: 'substraction'},
{name: 'daily_balance', type: 'string', mapping: 'daily_balance'}//columnmapping
])
});

//load datastores
ds.load();
}

//create the columnmodel
function getColumnModel() {
cm = new Ext.grid.ColumnModel([{
header: "Posting Date",
dataIndex: 'date',
width: 80
},{
header: "Statement From",
dataIndex: 'statement_from',
width: 150
},{
header: "Transaction",
dataIndex: 'description',
width: 150
},{
header: "Deposit",
dataIndex: 'deposit',
width: 80
},{
header: "substraction",
dataIndex: 'substraction',
width: 80
},{
header: "Daily Balance",
dataIndex: 'daily_balance',
width: 75
}]);

//set the default for sorting the columns
cm.defaultSortable = false;

return cm;
}

//create the grid
function buildGrid() {
//create the form
var gridForm = new Ext.form.Form({});

//create the grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: getColumnModel(),
enableColLock:false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners: { // add a cellclick listener to the grid
cellclick: function(o, row, cell, e) {
// ensure mouseclick occurred within checkbox icon's visible area
if (o.getColumnModel().getDataIndex(cell) == 'paid' && e.getTarget('.checkbox', 1)) {
var rec = o.getDataSource().getAt(row);
rec.set('paid', !rec.get('paid')); // toggle "indoor" value
}
}
},
loadMask: true
});

//set the layout for the grid
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

//render the grid
ds.on('load', grid.Aggregate,grid,true);
grid.render();
grid.getSelectionModel().selectFirstRow();

//set the header
var gridHead = grid.getView().getHeaderPanel(true);

var tb = new Ext.Toolbar(gridHead, [{
text: 'Add Activity',
cls: 'x-btn-text-icon',
icon: 'images/icons/add.png',
tooltip: 'Add a bill to the grid',
id:'show-dialog-btn'
}, '-',{
text: 'Delete Activity',
cls: 'x-btn-text-icon',
icon: 'images/icons/delete.png',
tooltip: 'Delete a bill from the grid',
handler: function() {
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow) {
var conn = new Ext.data.Connection;
conn.request({
url:'delete.php?id='+selectedRow.data.id,
params:{rowid:selectedRow.data.id},
callback: function(options, success, response){
if (success){
ds.remove(selectedRow);
Ext.Msg.show({
waitmsg:'Deleting Data ..., Please Wait!',
title:'Confirmation',
msg: 'Data Successfully Deleted.',
buttons: Ext.Msg.OK
})
grid.getDataSource().reload()

}
}
});
}
}
}, '-'
]);
tb.add({
text: 'Quicksearch:',
tooltip: 'Quickly search through the grid.'
});
var sftb = tb.addDom({
tag: 'input',
id: 'quicksearch',
type: 'text',
size: 30,
value: '',
style: 'background: #F0F0F9;'
});
var searchStore = new Ext.data.SimpleStore({
fields: ['statement_from'],
data: []
});
var searchBox = new Ext.form.ComboBox({
store: ds,
displayField: 'statement_from',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
hideTrigger: true
});
searchBox.applyTo('quicksearch');
tb.add({
cls: 'x-btn-icon',
icon: 'images/icons/comments_delete.png',
tooltip: 'Clear quicksearch',
handler: function() {
if (searchBox.getValue().length!=0) {
searchBox.setValue('');
ds.clearFilter();
}
}
});
var searchRec = Ext.data.Record.create([
{name: 'query', type: 'string'}
]);
var onFilteringBeforeQuery = function(e) {
//grid.getSelectionModel().clearSelections();
if (this.getValue().length==0) {
ds.clearFilter();
} else {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value=="")
return;
ds.filterBy(function(r) {
valueArr = value.split(/\ +/);
for (var i=0; i<valueArr.length; i++) {
re = new RegExp(Ext.escapeRe(valueArr[i]), "i");
if (re.test(r.data['common'])==false
&& re.test(r.data['light'])==false) {
return false;
};
}
return true;
});
}
};
var onQuickSearchBeforeQuery = function(e) {
if (this.getValue().length==0) {
} else {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value=="")
return;
searchStore.clearFilter();
var vr_insert = true;
searchStore.each(function(r) {
if (r.data['query'].indexOf(value)==0) {
// backspace
vr_insert = false;
return false;
} else if (value.indexOf(r.data['query'])==0) {
// forward typing
searchStore.remove(r);
}
});
if (vr_insert==true) {
searchStore.each(function(r) {
if (r.data['query']==value) {
vr_insert = false;
}
});
}
if (vr_insert==true) {
var vr = new searchRec({query: value});
searchStore.insert(0, vr);
}
var ss_max = 4; // max 5 query history, starts counting from 0; 0==1,1==2,2==3,etc
if (searchStore.getCount()>ss_max) {
var ssc = searchStore.getCount();
var overflow = searchStore.getRange(ssc-(ssc-ss_max), ssc);
for (var i=0; i<overflow.length; i++) {
searchStore.remove(overflow[i]);
}
}
}
};
searchBox.on("beforequery", onQuickSearchBeforeQuery);
searchBox.on("beforequery", onFilteringBeforeQuery);
searchBox.on("select", onFilteringBeforeQuery);

var gridFoot = grid.getView().getFooterPanel(true);

var tb1=new Ext.Toolbar(gridFoot, [{}]);
//activate function updateDB when a cell is edited
grid.on('afteredit', updateDB);

function updateDB(oGrid_event){
gridForm.submit(
{
//waitMsg: 'Saving changes, please wait...',
url:'sample.php?ac=saveData&field='+oGrid_event.field+'&row='+oGrid_event.row+'&value='+oGrid_event.value, //php function that saves the data
success:function(form, action) {
alert('Congrats! Your changes were saved!!!!');
grid.getDataSource().reload()
},
failure: function(form, action) {
alert('Oops the delete did not work out too well!');
}
}
);
}

//render form
gridForm.render('editGrid');
}

return {
//the init
init : function() {
setupDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
}
}
}();

Ext.onReady(GridUI.init, GridUI);

the line in bank_details.js:

url: 'bank_details.php'

should be

url: 'bank_details.php?id= ........

but how do i get the data from from_date (bank.js) in the url in the bank_details.js.

Hope someone can help me.
if something is unclear please let me know and i will try to explain it a bit better.

Thanks in advance,

Robin

devnull
11 Oct 2007, 10:09 AM
this would be alot easier if you displayed the details in a basicDialog instead of jumping to a new window...
This is the whole basis of "web 2.0" applications; never reload or redirect the main application window.

robin30
11 Oct 2007, 8:07 PM
thank you for your reply, really appreciate it.

I'm relatively new to it all. I will try your suggestion, thanks

regards,

Robin