1. #1
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default Ext.state.HttpProvider to store state in database

    Ext.state.HttpProvider to store state in database


    Code:
    /**
     * @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' },
    		});
        }
    });

  2. #2
    Ext User
    Join Date
    Aug 2007
    Posts
    4
    Vote Rating
    0
    bwijnmaalen is on a distinguished road

      0  

    Default


    wow! great work! thnx!

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

  3. #3
    Sencha User xantus's Avatar
    Join Date
    Aug 2007
    Location
    Seattle, WA
    Posts
    135
    Vote Rating
    0
    xantus is on a distinguished road

      0  

    Default


    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.
    Software Engineer
    http://xant.us/

  4. #4
    Sencha User
    Join Date
    Jan 2009
    Posts
    16
    Vote Rating
    0
    giovanni is on a distinguished road

      0  

    Default Can't get state to restore?

    Can't get state to restore?


    Everything works except restoring the state, not sure if the name/value is formatted correctly or not. Any help much appreciated. Thanks

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

  5. #5
    Sencha User
    Join Date
    Jan 2009
    Posts
    16
    Vote Rating
    0
    giovanni is on a distinguished road

      0  

    Default


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

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

  6. #6
    Ext User
    Join Date
    Nov 2007
    Location
    Fountain Valley, CA, USA
    Posts
    30
    Vote Rating
    0
    donssmith is on a distinguished road

      0  

    Default


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

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

  7. #7
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    Mine was here first :P
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  8. #8
    Ext User
    Join Date
    Nov 2009
    Posts
    20
    Vote Rating
    0
    xrx215 is on a distinguished road

      0  

    Default How to send parameters

    How to send parameters


    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.

  9. #9
    Ext User
    Join Date
    Nov 2009
    Posts
    20
    Vote Rating
    0
    xrx215 is on a distinguished road

      0  

    Default Error:Object Expected

    Error:Object Expected


    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.

  10. #10
    Ext User
    Join Date
    Jul 2010
    Posts
    36
    Vote Rating
    0
    emmy mathew is on a distinguished road

      0  

    Default


    Can you please tell me how did u solve it?Am not able to save the configurations

    Quote Originally Posted by giovanni View Post
    Solved! The extra { and 's' so the string looks like this:

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."