Ext.state.HttpProvider to store state in database

[mschering]

/**
 * @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]

wow! great work! thnx!

[edit]
just what i was looking for!
[/edit]

[xantus]

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.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]

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]

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]

Did you know there was already an extension for doing this ?

http://extjs.com/forum/showthread.ph...t=httpprovider

[mschering]

Mine was here first :P

[xrx215]

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]

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]

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}]}}');