Saki's Blog » pattern

Keeping modified records of EditorGridPanel while paging

Saki — Mon, 28 Sep 2009 08:59:44 +0000

If you modify records of an editable grid with paging and if you then page-out, your changes are lost. Well, they are not lost in fact unless you have set pruneModifiedRecords:true on the strore. The modifications are still available so we just need to apply them. Here is the code fragment that does it:

var grid = new Ext.grid.EditorGridPanel({
    store:new Ext.data.Store({
         listeners:{
            load:{scope:this, fn:function(store) {
 
                // loop through modified records
                var modified = store.getModifiedRecords();
                for(var i = 0; i < modified.length; i++) {
 
                    // see if we have a record with same id 
                    // and apply changes if yes
                    var r = store.getById(modified[i].id);
                    if(r) {
                        var changes = modified[i].getChanges();
                        for(p in changes) {
                            if(changes.hasOwnProperty(p)) {
                                r.set(p, changes[p]);
                            }
                        } // eo changes loop
                    }
                } // eo modified loop
            }} // eo load listener
        } // eo listeners
 
        // rest of store configuration
 
    })
 
    // rest of grid configuration
 
}) // eo grid

pruneModifiedRecords must be false (the default) for this to work.

CSS File Pattern

Saki — Fri, 04 Apr 2008 03:28:40 +0000

/** vim: ts=4:sw=4:nu:fdc=4:nospell
 *
 * A CSS File
 *
 * @author    Ing.Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      5. April 2008
 * @version   $Id$
 *
 * @license A CSS File is licensed under the terms of the Open Source
 * LGPL 3.0 license. Commercial use is permitted to the extent that the 
 * code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */
 
/* eof */

Inline Anonymous Funcion Pattern

Saki — Thu, 03 Apr 2008 11:41:09 +0000

var msg = "From inline function";
var result = (function(m) {
    alert(m);
    return "Result of inline function";
}(msg));
alert(result);

JavaScript Extension File Pattern

Saki — Thu, 03 Apr 2008 02:13:35 +0000

// vim: ts=4:sw=4:nu:fdc=4:nospell
/*global Ext, AnExtension */
/**
 * @class AnExtension
 * @extends Ext.Panel
 *
 * AnExtension description
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2010, by Ing. Jozef Sakáloš
 * @date      
 * 11. March 2010
 * 
 * @version   1.0
 * @revision  $Id$
 *
 * @license AnExtension.js is released under the 
 * GNU GPL 3.0
 * license. It’s free for use in GPL and GPL compatible open source software, 
 * but if you want to use the component in a commercial software (closed source),
 * you have to get a commercial license.
 */
 
// create namespace
Ext.ns('AnExtension');
 
/**
 * Creates new AnExtension
 * @constructor
 * @param {Object} config A config object
 */
AnExtension = Ext.extend(Ext.Panel, {
 
    // default config (it can be changed while instantiating)
    border:false
 
    // {{{
    // uncomment constructor if you need it, e.g. if you need listeners
//    ,constructor:function(config) {
//        // parent constructor call pre-processing - configure listeners here
//        config = config || {};
//        config.listeners = config.listeners || {};
//        Ext.applyIf(config.listeners, {
//            // add listeners config here
//        });
//
//        // call parent constructor
//        AnExtension.superclass.constructor.call(this, config);
//
//        // parent constructor call post-processing
//
//    } // eo function constructor
    // }}}
    // {{{
    ,initComponent:function() {
 
        // hard coded config (it cannot be changed while instantiating)
        // {{{
        var config = {
        }; // eo config object
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        // }}}
 
        // call parent
        AnExtension.superclass.initComponent.apply(this, arguments);
 
        // parent call post-processing, e.g. install event handlers
 
    } // eo function initComponent
    // }}}
    // {{{
    ,afterRender:function() {
 
        // parent call pre-processing
 
        // call parent
        AnExtension.superclass.afterRender.apply(this, arguments);
 
        // parent call post-processing, e.g. install event handlers on rendered components
 
    } // eo function afterRender
    // }}}
 
    // any other added/overriden methods
}); // eo extend
 
// register xtype
Ext.reg('anextension', AnExtension); 
 
// eof

JavaScript Plugin File Pattern

Saki — Thu, 03 Apr 2008 01:37:23 +0000

// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
 * A Plugin
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      3. April 2008
 * @version   $Id$
 *
 * @license plugin.js is licensed under the terms of the Open Source
 * LGPL 3.0 license. Commercial use is permitted to the extent that the 
 * code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */
 
/*global Ext */
 
/**
 * @class APlugin
 * @extends Ext.util.Observable
 *
 * Creates new APlugin object
 * @constructor
 * @param {Object} config The config object
 */
APlugin = function(config) {
    Ext.apply(this, config);
 
    // call parent
    APlugin.superclass.constructor.call(this);
 
}; // eo constructor
 
Ext.extend(APlugin, Ext.util.Observable, {
 
    // defaults - can be configured from outside
 
    init:function(parent) {
        this.parent = parent;
 
        // rest of plugin init code
 
    } // eo function init
 
    // other plugin functions
 
}); // eo extend
 
// register xtype
Ext.reg('apluginxtype', APlugin); 
 
// eof

Return Value of Function as items Pattern

Saki — Wed, 02 Apr 2008 15:37:14 +0000

,items:(function(){
    var items = [];
 
    // populate items array
 
    return items;
}).createDelegate(this)()

Defer Inline Anonymous Function Pattern

Saki — Wed, 02 Apr 2008 15:26:52 +0000

var text = 'Deferred';
(function() {
    alert(text);
}.defer(2000, this));

PHP File Pattern

Saki — Wed, 02 Apr 2008 15:20:05 +0000


// vim: ts=4:sw=4:fdc=4:nu:nospell
/**
 * An Application
 * 
 * @author     Ing. Jozef Sakáloš
 * @copyright  (c) 2009, by Ing. Jozef Sakáloš
 * @date       15. Sepember 2009
 * @version    1.0
 * @revision   $Id$
 *
 * @license application.php is licensed under the terms of the Open Source
 * LGPL 3.0 license. Commercial use is permitted to the extent that the 
 * code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */
 
require("config.php");
 
// code here
 
// eof
?>

JavaScript Application File Pattern

Saki — Wed, 02 Apr 2008 15:10:59 +0000

// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
 * An Application
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      2. April 2008
 * @version   $Id$
 *
 * @license application.js is licensed under the terms of the Open Source
 * LGPL 3.0 license. Commercial use is permitted to the extent that the 
 * code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */
 
/*global Ext, Application */
 
Ext.ns('Application');
 
// extensions here
 
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
 
// application main entry point
Ext.onReady(function() {
 
    Ext.QuickTips.init();
 
    // code here
 
}); // eo function onReady
 
// eof

HTML File Pattern

Saki — Wed, 02 Apr 2008 14:21:33 +0000


 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
  <link id="theme" rel="stylesheet" type="text/css" href="css/empty.css">
  <link rel="stylesheet" type="text/css" href="css/icons.css">
  <link rel="stylesheet" type="text/css" href="css/application.css">
  <link rel="shortcut icon" href="img/extjs.ico">
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <script type="text/javascript" src="application.js"></script>
  <title id="page-title">Application Title</title>
</head>
<body>
 

("extjs.eu"===$_SERVER["SERVER_NAME"])include("stats.php");?>
</body>
</html>

Basic HTML Page


<html>
 

<head>
  
  
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
  
  
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
 
  
 
  
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 
  
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
  
 
  
 
  
  <title id="page-title">Title</title>
 
  
  
  
  <script type="text/javascript">
 
  // Path to the blank image must point to a valid location on your server
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
  // Main application entry point
  Ext.onReady(function() {
	// write your application here
  });
  </script>
 
  
</head>
 

<body></body>
 

</html>