feng hua programming: ExtJS

Showing posts with label ExtJS. Show all posts

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);

}

});

Sunday, April 29, 2012

Css Selectors

ref:
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors

The following table summarizes the Selector syntax:

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	Universal selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a "foo" attribute	Attribute selectors	2
E[foo="bar"]	an E element whose "foo" attribute value is exactly equal to "bar"	Attribute selectors	2
E[foo~="bar"]	an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar"	Attribute selectors	2
E[foo^="bar"]	an E element whose "foo" attribute value begins exactly with the string "bar"	Attribute selectors	3
E[foo$="bar"]	an E element whose "foo" attribute value ends exactly with the string "bar"	Attribute selectors	3
E[foo*="bar"]	an E element whose "foo" attribute value contains the substring "bar"	Attribute selectors	3
E[hreflang\|="en"]	an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"	Attribute selectors	2
E:root	an E element, root of the document	Structural pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting from the last one	Structural pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting from the last one	Structural pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural pseudo-classes	3
E:empty	an E element that has no children (including text nodes)	Structural pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	The link pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target pseudo-class	3
E:lang(fr)	an element of type E in language "fr" (the document language specifies how language is determined)	The :lang() pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or disabled	The UI element states pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)	The UI element states pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter pseudo-element	1
E::selection	the portion of an E element that is currently selected/highlighted by the user	The UI element fragments pseudo-elements	3
E::before	generated content before an E element	The ::before pseudo-element	2
E::after	generated content after an E element	The ::after pseudo-element	2
E.warning	an E element whose class is "warning" (the document language specifies how class is determined).	Class selectors	1
E#myid	an E element with ID equal to "myid".	ID selectors	1
E:not(s)	an E element that does not match simple selector s	Negation pseudo-class	3
E F	an F element descendant of an E element	Descendant combinator	1
E > F	an F element child of an E element	Child combinator	2
E + F	an F element immediately preceded by an E element	Adjacent sibling combinator	2
E ~ F	an F element preceded by an E element	General sibling combinator	3

Extjs Element.dom property

NOTE The Element.dom property is the same DOM object reference as
returned by document.getElementById().

Intelliji Idea: Find and Replace in Path for multiple file masks

File name filter

In this area, specify additional settings to narrow down the search scope.

File mask - select this check box to narrow down the search scope through file masks. In the drop-down list, select the desired mask or specify a new one using wildcards. Wildcard can include * to substitute a set of any characters, and ? to substitute a single character. Note that you can specify multiple file masks, delimited with comma (for example, *.xml,*.sql,*.html).

Friday, April 27, 2012

Ext.apply VS Ext.applyIf

var source = new Array();

source[0] = '1';
source[1] = '2';
source[2] = '3';

var destination = new Array();

destination[0] = '4';
destination[1] = '5';
destination[2] = '6';
destination[3] = '7';
destination[4] = '8';
destination[5] = '9';

// Ext.apply(obj1,obj2) copy all properties of obj2 to obj1 any way,replaceing
// the ones that obj1 has already defined

Ext.apply(destination,source);
document.write(destination + '<br/>'); // 1,2,3,7,8,9

// Ext.applyIf(obj1,obj2) copy all properties of obj2 to obj1 only if
// they don't already exist

Ext.applyIf(destination,source);
document.write(destination + '<br/>'); // 4,5,6,7,8,9

Google Chrome js console multiline

press Shift-Enter

feng hua programming