EXTJS 研究

要完成框架，最后一个难点就界面展现。支持AJAX动态刷新功能。EXTJS是一个选择。

接下去的时间将围绕EXTJS进行。

-----------------------

框架要解决的问题之一是代码输入。EXTJS中提供了控件ComboBox，是一个好的选择。继续研究。

在ExtJS的ComboBox组件中实现下拉树效果

http://blog.csdn.net/lichkui/archive/2008/03/20/2199389.aspx

这个例子演示了

ComboBox的tpl属性。根据这个属性实现了在下拉的时候显示自定义页面的功能。

一个演示国旗下拉框的例子

http://extjs.com/learn/Tutorial:Extending_Ext2_Class_(Chinese)

这个例子写的很有意识，主要可以学习几个方面：

1.控件的写法。

当初喜欢上DELPHI，就是以为他的控件，可以自己扩展，现在看了这个例子发现和DELPHI很类似。

扩展一个控件的方法：

Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {

}

里面写上要重构的方法。以及构造方法。

比如：

initComponent:function() {
        Ext.ux.IconCombo.superclass.initComponent.call(this);
    }, // end of function initComponent
    onRender:function(ct, position) {
        // call parent onRender
        Ext.ux.IconCombo.superclass.onRender.call(this, ct, position);

    }, // end of function onRender

2.如果重构了一个方法，如果需要调用父亲的方法，需要这样写：

        Ext.ux.IconCombo.superclass.initComponent.call(this);

3.对于FORM中的控件可以通过Ext.reg('iconcombo', Ext.ux.IconCombo);注册。

注册之后，就可以在xtype属性中使用，比如：

var win = new Ext.Window({
        title:'Icon Combo Ext 2.0 Extension Class Example',
        width:400,
        height:300,
        items:[{
            xtype:'iconcombo',
            fieldLabel:'IconCombo',
            store: new Ext.data.SimpleStore({
                    fields: ['countryCode', 'countryName', 'countryFlag'],
                    data: [
                        ['US', 'United States', 'ux-flag-us'],
                        ['DE', 'Germany', 'ux-flag-de'],
                        ['FR', 'France', 'ux-flag-fr']
                    ]
            }),
            valueField: 'countryCode',
            displayField: 'countryName',
            iconClsField: 'countryFlag',
            triggerAction: 'all',
            mode: 'local'
        }],
        defaults:{anchor:'100%'}
    });

4.处理界面效果就是通过DIV和CLASS。