Thursday, May 3, 2012

ExtJS Debug: dynamic loading Ext Class and our own class

in app.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MyTestBedPurecode</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="app/overrides/CustomXmlReader.js"></script>
</head>
<body></body>
</html>


use ext-debug.js( instead of ext-all-dev.js) will ensure we only load class when needed.
and the file size is small so the app can be easy debug.
MyTestBed

Tuesday, May 1, 2012

Ext.override

// in app.html
     <link rel="stylesheet" type="text/css" href="http://localhost/extjstest/extjs-4.0.7/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://localhost/extjstest/extjs-4.0.7/ext-all-dev.js"></script>
    <script type="text/javascript" src="app/overrides/Ext.data.reader.Xml.js"></script>
/* file name  app/overrides/Ext.data.reader.Xml.js */
 Ext.override(Ext.data.reader.Xml,{
      extractData: function(root) {
        var recordName = this.record;

        //<debug>
        if (!recordName) {
            Ext.Error.raise('Record is a required parameter');
        }
        //</debug>

        if (recordName != root.nodeName) {
                //root = Ext.DomQuery.select(recordName, root);
                //patch
                root = Ext.DomQuery.select('>' + recordName, root);
            } else {
                root = [root];
            }
            return this.callParent([root]);
        }
 });

treecolumn renderer function for Ext.tree.Panel


Ext.define('MyApp.view.XmlTreePanel', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.xmltreepanel',

    title: 'My Tree Panel',
    store: 'MyXmlTreeStore',

    id:'xmltreepanel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            viewConfig: {

            },
            columns: [
                {
                    xtype: 'treecolumn',
                    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                        return unescape(value);
                    },
                    text: 'MyTreeColumn'
                }
            ]
        });

        me.callParent(arguments);
    }

});

urldecode xml attribute , mapping , convert


Ext.define('MyApp.model.MyModel', {
    extend: 'Ext.data.Model',

    fields: [
        {
            convert:function(v,rec){
                   return unescape(v);
            }   ,
            mapping: '@label',
            name: 'label',
            type: 'string'
        }
    ]
});


<?xml version="1.0" encoding="UTF-8"?>
<explorer >
<node label="%20Feng%20Guideline%20" type="GUIDELINE" nodeid="9740015D-3447-1CC6-949E-C91D0876F8D1" selected="true" version="0.34" seqnum="" year="2012" versionid="D956A51D-A9A8-8398-B191-79A44A97D75F">
</node>
</explorer>


Ext.define('MyApp.view.BottomPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bottompanel',

    height: 150,
    id: 'bottompanel',
    title: 'My Panel',

    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            tpl:      [
                'Label: {label}<br>'
               ]
        });

        me.callParent(arguments);
    }

});