ExtJS

来自tomtalk
跳转至： 导航、 搜索

actioncolumn动态显示图标

getClass: function (v) {
    if (v == 'OUTSOURCE') {
        return '';
    } else {
        return this.disabledCls;
    }
},

Extjs 3.4向4.2升级笔记

down()用法

//示例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);

spacer

extjs4.2中，更名为tbspacer。

Msg新写法

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

Panel样式配置bodyStyle，用style代替

bodyStyle: 'margin: 10px'    //extjs3.4
style: 'margin: 10px'        //extjs4.2

grid store新写法

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

memory proxy

//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'
    }
}

sm要改写

//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"
});

store.add()

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

baseParams用extraParams改写

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

afterrender事件用boxready代替

this.findById('jobCustomListPanel').on('afterrender',this._initJobCustomList,this);
this.findById('jobCustomListPanel').on('boxready',this._initJobCustomList,this);

grid rowclick事件用itemclick代替

rowclick( Grid this, Number rowIndex, Ext.EventObject e ) 
itemclick( this, record, item, index, e, eOpts )

forceFit失效

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

grid行加复选框

//grid配置项
selType: 'checkboxmodel',  
 
//删除选中的行
var sm = gridPanel.getSelectionModel();
var recs = sm.getSelection();
gridPanel.getStore().remove(recs);

grid行拖拽

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

container用fieldcontainer代替

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

Checkbox

3.4到4.2用法的不同：

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

用query()代替findByType()

//3.4
grid = tab.findByType('grid'); 
 
//4.2
grid = tab.query('grid');

infos失效

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


radiogroup初值，用inputValue代替value

{
    xtype: 'radiogroup',
    id: 'exeType',
    fieldLabel: '执行模式',
    items: [
        {boxLabel: '无人模式', name: 'exeType', inputValue: 0},
        {boxLabel: '单步模式', name: 'exeType', inputValue: 1},
        {boxLabel: '混合模式', name: 'exeType', inputValue: 2}
    ]
},

window不显示边框

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

ajax用法

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

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

ExtJS 5 beta 发布

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

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

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

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;   //设置节点属性为未选中状态
    }
}

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

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

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

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

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

//首先做一个容器
{  
    xtype: 'box', 
    width: 100, 
    height: 200,
    autoEl: {  
        tag: 'img', 
        src: 'myphoto.gif'
    }  
}  
 
//动态更新只需要获取到刚才建立的box的dom的src  
myphoto.getEl().dom.src = newSrc;

学习笔记

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

核心组件：

  • Ext.Component
  • Ext.BoxComponent
  • Ext.Container
  • Ext.Panel
  • Ext.TabPanel
取自“http://wiki.tomtalk.net/index.php?title=ExtJS&oldid=4482”