Tuesday 18 March 2014

Extjs 4 : Converting treestore into store using associations.

Extjs doesn't support updating tree by keeping nodes in its own hierarchy. treestore.sync90 function only sends updated nodes to the server as individual models. But sometimes we may need to send tree structure in the form of tree to the server(Ofcourse only updated nodes).

For example consider following tree,
Parent1
  • Child1
  • Child2
  • Child3
Parent2
  • Chld4
  • Child5
 If  child2 and child5 are dirty records and if we fire treestore.sync(), it only sends child2 and child5 models as data. We loose the context of parent. We may not know for which parent this child belongs to. In such a case you can use following model and code snippet to convert your tree into model with associated models.

Each node will have subtree models as associated model and using following function, you can convert modified tree nodes into associated-model store. This store is a plain store with associated models. Now you can send this model to the server
(For more info on sending updated model associations to the server viz following blog post
http://balu-learnings.blogspot.in/2014/03/extjs-4-sending-updated-models-to.html ).

model :

Ext.define('App.model.treegridsample', {
    extend : 'Ext.data.Model',
    fields : [ {
        name : 'id',
        useNull : true,
        defaultValue : ''
    }{
        name : 'text'
    }{
        name : 'leaf',
        persist : false
    }],

    associations : [ {
        type : 'hasMany',
        model : 'App.model.treegridsample',
        name : 'children'
    }
});


CustomTree.js
  
Ext.define('App.view.common.CustomTree', {
 extend : 'Ext.tree.Panel',
 convertToStore : function(model) {
  if (this.getStore() === null) {
   return null;
  }
  var rootNode = this.getStore().getRootNode();
  model = model || Ext.getClassName(this.getStore().getRootNode());
  dataStore = this.convertNodeToStore(rootNode, model);
  return dataStore.childrenStore;
 },
convertNodeToStore : function(rootNode, model) {
 var record = Ext.create(model);
 record.data = rootNode.data;
 if (record.childrenStore === null || typeof record.childrenStore === 'undefined') {
  record.childrenStore = Ext.create('Ext.data.Store', {
   model : model
  });
 }
 for (var i = 0; i < rootNode.childNodes.length; i++) {
  var cNode = rootNode.childNodes[i];
  var child = this.convertNodeToStore(cNode, model);
  if (cNode.dirty || cNode.phantom) {
   record.childrenStore.add(child);
   rootNode.setDirty();
  }
 }
 return record;
}


Source can be found@ https://github.com/Balagangadhar/ExtJS4-Misc/blob/master/CustomTree.js

Extjs 4 : Sending updated models to server along with associations (has many)

Model- Association is one of the beautiful features of extjs4. Sencha documentation has plenty of examples on 'how to read association' but it doesn't have official documentation on 'how to update model along with its association' which is also a required feature most of the times.


Copy following code snippet in a javascript file and include it in your JSP/html page after extjs framework file inclusion.

<script type="text/javascript" src="extjs4/ext-all-dev.js"></script>
<script type="text/javascript" src="ext-model-assoc-override.js"></script>


Source : sencha forum topic.
Detailed example : http://stackoverflow.com/questions/9871440/extjs-store-hasmany-belongsto-and-update-process-howto


Note: Following code only works for has many associations. We need to extend this for has one, in case if we want it for has one associations.

An internal error occurred during: “Requesting JavaScript AST from selection”

Sometime eclipse suddenly stops working by throwing following error
'Requesting Javascript AST from Selection' has encountered a problem. An internal error occured during "Requesting Javascript AST from selection"
and throws following error in the console, if you run eclipse through console.

java.lang.OutOfMemoryError: PermGen space 

Eclipse is not suitable for javascript validations. Sometimes it messes up with javascript and throws this error. You can disable javascript validation to get rid-off this error.

  • Go to window-preferences, search for mark
  • Select Javascript - editor - Mark Occurrences
  • Uncheck Mark selected occurrences as shown below
 

Friday 7 March 2014

Spring xml validation failures in eclipse

While working with spring framework in eclipse, sometimes suddenly xmls fail to validate by throwing following marker error in eclipse.

Multiple markers at this line
    - cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element
     'context:component-scan'.
    - schema_reference.4: Failed to read schema document 'http://www.springframework.org/schema/context/spring-
     context.xsd', because 1) could not find the document; 2) the document could not be read; 3) the root element of the
     document is not <xsd:schema>.

   
It could be a problem that spring jars are not accessible in the class path or different version of spring xsd files are cached in eclipse.

More frequently if you go offline, then eclipse starts showing this error(Eventhough if you connect to internet again). You can get rid off this error by clearing cached xsd templates and re-validating them.

Go to eclipse preferences, search for 'cache'(Generally it is under Network Connections), select all xsd files and remove them. After removing xsd files revalidate xmls files.