PDA

View Full Version : Ext.state.HttpProvider to store state in database



mschering
23 Oct 2007, 4:14 AM
/**
* @copyright Copyright Intermesh 2007
* @author Merijn Schering <mschering@intermesh.nl>
*
* This file is part of Group-Office.
*
* Group-Office is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the
* Free Software Foundation; either version 2 of the License, or (at your
* option) any later version.
*
* See file /LICENSE.GPL
*/

/**
* @class Ext.state.HttpProvider
* @extends Ext.state.Provider
* The default Provider implementation which saves state via XmlHttpRequest calls to save it in
* a database.
* <br />Usage:
<pre><code>
var cp = new Ext.state.HttpProvider({
url: state.php
});
Ext.state.Manager.setProvider(cp);

A global variable ExtState must be created!
this variable holds all the all the values like this:

var ExtState = { name: value };

For example if you have a PHP array of settings you can do this in the document head:

var ExtState = Ext.decode('<?php echo json_encode($state); ?>');


The $state PHP variable holds all the values that you can pull from a database


</code></pre>
* @cfg {String} url The server page that will handle the request to save the state
* when a value changes it will send 'name' and 'value' to that page.
*
* @constructor
* Create a new HttpProvider
* @param {Object} config The configuration object
*/
Ext.state.HttpProvider = function(config){
Ext.state.HttpProvider.superclass.constructor.call(this);
this.url = "";

Ext.apply(this, config);
this.state = this.readValues();
};

Ext.extend(Ext.state.HttpProvider, Ext.state.Provider, {
// private
set : function(name, value){
if(typeof value == "undefined" || value === null){
this.clear(name);
return;
}
this.setValue(name, value);
Ext.state.HttpProvider.superclass.set.call(this, name, value);
},

// private
clear : function(name){
this.clearValue(name);
Ext.state.HttpProvider.superclass.clear.call(this, name);
},

// private
readValues : function(){
var state = {};

for (var name in ExtState)
{
if(name!='remove')
{
state[name] = this.decodeValue(ExtState[name]);
}
}
return state;
},

// private
setValue : function(name, value){

var conn = new Ext.data.Connection();
conn.request({
url: this.url,
params: {task: 'set', 'name': name, 'value': this.encodeValue(value) },
});

},

// private
clearValue : function(name){
var conn = new Ext.data.Connection();
conn.request({
url: this.url,
params: {task: 'set', 'name': name, 'value': 'null' },
});
}
});

bwijnmaalen
23 Oct 2007, 5:20 AM
wow! great work! thnx!


just what i was looking for!

xantus
14 Jan 2009, 9:06 PM
Cool. This is similar to what I did in comet desktop. I called it AjaxProvider, and it used Ext.Ajax.request. Great minds think alike?

Btw you don't need to create a new Ext.data.Connection. You can use Ext.Ajax (http://extjs.com/deploy/dev/docs/?class=Ext.Ajax).request directly.

Also, I check the key for /^ext/ to ignore ext generated ids. The gets and sets can get out of hand for some things.

giovanni
3 Feb 2009, 12:45 PM
Everything works except restoring the state, not sure if the name/value is formatted correctly or not. Any help much appreciated. Thanks




var ExtState = Ext.decode('{"testGrid":{s:{"columns":[{"id":"company","width":300},{"id":1,"width":200},{"id":2,"width":200},{"id":3,"width":200,"hidden":true},{"id":4,"width":185,"hidden":true}]}}}');


//httpProvider included here


Ext.onReady(function(){

var cp = new Ext.state.HttpProvider({
url: 'save_state.cfm'
});

Ext.state.Manager.setProvider(cp);


var myData = [
['<a href="#">3m Co</a>',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
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;
}

// example of custom renderer function
function pctChange(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 data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
id:'testGrid',
stateId: 'testGrid',
stateful: true,
columns: [
{id:'company',header: "Company", width: 300, sortable: true, dataIndex: 'company'},
{header: "Price", width: 200, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 200, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 200, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 185, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
// region:'center',
stripeRows: true,
height:350
});




grid.render('south');




})

giovanni
5 Feb 2009, 6:08 PM
Solved! The extra { and 's' so the string looks like this:




var ExtState = Ext.decode('{"testGrid":{"columns":[{"id":"company","width":500},{"id":"chng","width":200},{"id":"price","width":200},{"id":"pctchng","width":200,"hidden":true},{"id":"updated","width":185,"hidden":true}]},"myNewGrid":{"columns":[{"id":"company","width":4500},{"id":"price","width":200,"hidden":true},{"id":"updated","width":185}]}}');

donssmith
5 Feb 2009, 10:56 PM
Did you know there was already an extension for doing this :)?

http://extjs.com/forum/showthread.php?t=24970&highlight=httpprovider

mschering
5 Feb 2009, 11:27 PM
Mine was here first :P

xrx215
4 Jan 2010, 11:06 AM
Hi,

I am using asp.net web service to store the state in database.

can you please describe what does the task , name and value parameters hold?

What are the column that i need to create to store the state in the database?

Thanks.

xrx215
4 Jan 2010, 11:57 AM
Hi,

Iam trying to send state to a web service and thn store it in database

Iam getting an error:Object expected in the following line.

Ext.state.Manager.setProvider(new Ext.state.HttpProvider({ url: 'GetGridState.asmx/readdata' }));

Please help me regarding this issue.

emmy mathew
20 Jul 2010, 2:47 AM
Can you please tell me how did u solve it?Am not able to save the configurations


Solved! The extra { and 's' so the string looks like this:




var

ExtState = Ext.decode('{"testGrid":{"columns":[{"id":"company","width":500},{"id":"chng","width":200},{"id":"price","width":200},{"id":"pctchng","width":200,"hidden":true},{"id":"updated","width":185,"hidden":true}]},"myNewGrid":{"columns":[{"id":"company","width":4500},{"id":"price","width":200,"hidden":true},{"id":"updated","width":185}]}}');