查看“ExtJS”的源代码

==actioncolumn动态显示图标==

<source lang="javascript">
getClass: function (v) {
    if (v == 'OUTSOURCE') {
        return '';
    } else {
        return this.disabledCls;
    }
},
</source>

==Extjs 3.4向4.2升级笔记==

===down()用法===
<source lang="javascript">
//示例1
c.insertPanel.down('button[ref*=btnInsert]').on('click', me._insert, me);

//示例2
tabs.findById('jobsIpStatusQuery').on('click',me._query,me);
tabs.down('button[itemId=jobsIpStatusQuery]').on('click',me._query,me);
</source>

===spacer===
extjs4.2中，更名为tbspacer。

===Msg新写法===
<source lang="javascript">
//extjs3.4
Ext.Msg.ERROR('错误代码：' + response.status + '\n错误描述：' + response.statusText)

//extjs4.2
Ext.MessageBox.show({
    title: '错误',
    msg: '错误代码：' + response.status + '\n错误描述：' + response.statusText,
    buttons: Ext.MessageBox.OK
});
</source>

===Panel样式配置bodyStyle，用style代替===

<source lang="javascript">
bodyStyle: 'margin: 10px'    //extjs3.4
style: 'margin: 10px'        //extjs4.2
</source>

===grid store新写法===

<source lang="javascript">
var queryResultStore = Ext.create('Ext.data.Store', {
    pageSize : 10,
    fields : [ 'id', 'ip', 'reqPerson', 'reqDate', 'appDesc', 'creater', 'ascriptionApp' ],
    proxy : {
        type: 'ajax',
        url : './admin/getApiAuthList.action',
        extraParams: {}, 
        reader: {
            type: 'json',
            root : 'data',
            totalProperty : 'totalCount'
        }
    }
});
</source>

===memory proxy===

<source lang="javascript">
//3.4写法
proxy : new Ext.data.PagingMemoryProxy({
    data : Ext.value(me.scriptList,[])
})

//4.2写法
data: Ext.value(me.scriptList,[]), 
proxy : {
    type: 'memory',
    enablePaging: true,
    reader: {
        type: 'json',
        root: "data",
        totalProperty : 'totalCount'
    }
} 
</source>

===sm要改写===
<source lang="javascript">
//extjs 3.4
var sm = new Ext.grid.RowSelectionModel({
    handleMouseDown : Ext.emptyFn,
    singleSelect : true 
});

//ext4.2
var sm = new Ext.selection.RowModel({
    handleMouseDown : Ext.emptyFn,
    mode : "SINGLE"
});
</source>

===store.add()===

<source lang="javascript">
load : function(store,records){
    //3.4的写法
    //var rec = new store.recordType({'id':-1,'applicationName':'请选择业务名'});

    //4.2的写法，直接用对象就可以了。
    var rec = {'id':-1,'applicationName':'请选择业务名'};
    store.add([rec]);

    //在列表头插入
    store.insert(0, [rec]);
}
</source>

===baseParams用extraParams改写===

<source lang="javascript">
//3.4里，在store上编辑属性。
taskTListStore.baseParams['applicationId'] = -1;

//4.2里，参数移到proxy里了。
var proxy = taskTListStore.getProxy();
var params = {
    name: 'tom'
};

proxy.extraParams['applicationId'] = -1;	
Ext.apply(proxy.extraParams, params);

taskTListStore.load();
</source>

===afterrender事件用boxready代替===

<source lang="javascript">
this.findById('jobCustomListPanel').on('afterrender',this._initJobCustomList,this);
this.findById('jobCustomListPanel').on('boxready',this._initJobCustomList,this);
</source>

===grid rowclick事件用itemclick代替===

<source lang="javascript">
rowclick( Grid this, Number rowIndex, Ext.EventObject e ) 
itemclick( this, record, item, index, e, eOpts )
</source>

===forceFit失效===

3.4里forceFit是写在viewConfig里的，4.2中把forceFit从viewConfig提出来，单独写在外面。

===grid行加复选框===

<source lang="javascript">
//grid配置项
selType: 'checkboxmodel',  

//删除选中的行
var sm = gridPanel.getSelectionModel();
var recs = sm.getSelection();
gridPanel.getStore().remove(recs);
</source>

===grid行拖拽===
<source lang="javascript">
viewConfig: {
    plugins: {
        ptype: 'gridviewdragdrop'
    },
    listeners: {
        drop: function () {
            var sm = stepGrid.getSelectionModel();
            var store = stepGrid.getStore();
            var rows = sm.getSelection();

            if (sm.hasSelection()) {
                var stepIdList = [];
                store.each(function (item) {
                    stepIdList.push(item.data.id);
                });

                Ext.Ajax.request({
                    url: './jobs/updateTaskT.action',
                    params: {
                        "model": "taskT",
                        "jobTemplateId": _this.initData.jobTemplateId,
                        "stepIdList": stepIdList.join(','),
                        "appID": _this.initData.applicationId,
                        "creater": _this.initData.creater
                    },
                    success: function (response, opts) {
                        if (_this.toolkit.hasPermission(response)) {
                            _this._loadStepList();
                            sm.selectRecords(rows);
                        } else {
                            _this._loadStepList();
                        }
                    },
                    failure: function (response, opts) {
                        printMsg('移动步骤时出现异常！异常代码:' + response.status);
                    }
                });
            }
        }
    }
},
</source>

===container用fieldcontainer代替===

4.2中，container已经没有fieldLabel配置项了，标签配置不会显示，换用fieldcontainer就行了。

===Checkbox===

3.4到4.2用法的不同：

# 赋初值 item.value -> item.inputValue
# 取选中项 myGroup.getValue() -> myGroup.getChecked()
# 取值 item.value -> item.inputValue

===用query()代替findByType()===
<source lang="javascript">
//3.4
grid = tab.findByType('grid'); 

//4.2
grid = tab.query('grid'); 
</source>

===infos失效===

<source lang="html5">
<a class="infos" ext:qtip="同步功能说明..."></a> <!-- 3.4-->
<a class="infos" data-qtip="同步功能说明..."></a> <!-- 4.2-->
</source>


===radiogroup初值，用inputValue代替value===

<source lang="javascript">
{
    xtype: 'radiogroup',
    id: 'exeType',
    fieldLabel: '执行模式',
    items: [
        {boxLabel: '无人模式', name: 'exeType', inputValue: 0},
        {boxLabel: '单步模式', name: 'exeType', inputValue: 1},
        {boxLabel: '混合模式', name: 'exeType', inputValue: 2}
    ]
},
</source>

===window不显示边框===

<source lang="javascript">
new Ext.Window({

    border: false,                
    header: false,
    style: {
        border: 0,
        borderStyle: 'none',
        padding: 0,
        'border-radius': 0
    },

    closable: false,
    modal: true,
    maximized: true,
    layout: 'fit',
    closeAction: 'hide',
    listeners: {
        beforeadd: function (ct, cmp, index) {
            var el = ct.getEl();
            el.mask('正在加载步骤信息……');
            (function () {
                el.unmask();
            }).defer(1000);
        }
    }
});
</source>

==ajax用法==

<source lang="javascript">
Ext.Ajax.request({
    url: '/article/save',
    params: values,
    success: function (res) {
        var result = Ext.decode(res.responseText);
        console.log(result);
    }
});
</source>

==Extjs 3.4向4.2升级：去除告警信息==

==ExtJS 5 beta 发布==

http://dev.sencha.com/ext/5.0.0/

==Extjs树中CheckBox的选中和取消选中==

在Extjs中treepanel中树节点为checkbox类的节时，有时候我们需要用程序来设置他的选中和取消选中状态。

<source lang="javascript">
var nodes=tree.getChecked(); 
if (nodes && nodes.length) {
    for (var i=0;i<nodes.length;i++) {
        nodes[i].getUI().toggleCheck(false); //设置UI状态为未选中状态
        nodes[i].attributes.checked=false;   //设置节点属性为未选中状态
    }
}
</source>

这样通过获取已选择的节点，用程序取消选择状态。反之可以设置未选中节点选中状态。

==在ExtJs的容器中显示图片，并动态更新==

Extjs并没有提供直接的组件来显示图片。

网上通过设置textfield的InputType为Image然后再修改dom对象来实现，其实image的属性值并没有包含在Extjs的官方文档当中。

可以通过以下的思路实现，更可以进一步扩展成自定义组件。推荐的方法如下:

<source lang="javascript">
//首先做一个容器
{  
    xtype: 'box', 
    width: 100, 
    height: 200,
    autoEl: {  
        tag: 'img', 
        src: 'myphoto.gif'
    }  
}  

//动态更新只需要获取到刚才建立的box的dom的src  
myphoto.getEl().dom.src = newSrc;
</source>

==学习笔记==

组件分类：基本组件、工具条组件、表单组件

核心组件：
*Ext.Component
*Ext.BoxComponent
*Ext.Container
*Ext.Panel
*Ext.TabPanel