EXT中單擊button按鈕grid添加一行(光標(biāo)位置可設(shè)置)的實例代碼

字號:


    先給大家說下什么是ext
    ext是一個強(qiáng)大的js類庫,以前是基于YAHOO-UI,現(xiàn)在已經(jīng)完全獨(dú)立了, 主要包括data,widget,form,grid,dd,menu,其中最強(qiáng)大的應(yīng)該算grid了,編程思想是基于面向?qū)ο缶幊?oop),擴(kuò)展性相當(dāng)?shù)暮?可以自己寫擴(kuò)展.自己定義命名空間.web應(yīng)用可能感覺太大.不過您可以根據(jù)需要按需加載您想要的類庫就可以了.   
    主要包括三個大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的類庫,您可以根據(jù)需要進(jìn)行刪減.官方網(wǎng)站提供這一接口),在引用ext類庫的時候.這三個文件必不可少.  
    它提供了豐富的,非常漂亮的外觀體驗,成為眾多界面層開發(fā)人員的追捧!其核心的組件基本覆蓋了我們構(gòu)建富客戶端的常用的組件。   
    從 Ext 2開始,商業(yè)版(針對那些以盈利為目的的開發(fā)方)要收費(fèi)了。
    這可能會影響一些他的應(yīng)用前景。   目前的最新版本為3.2.2
    1.創(chuàng)建一個添加按鈕,listeners事件中button的單擊事件,
    {
    id:'button1',
    xtype : 'button',
    margin : '6',
    text : '添加',
    name : 'btn-add',
    iconCls: 'btn-add',
    listeners:{
    click:function(){
    var r = Ext.create('ItemGridMdl', {           //…………
    });//要插入表格的數(shù)據(jù)
    Ext.getCmp('grid1').getStore().insert(Ext.getCmp('grid1').getStore().getCount(), r);//在表格的最后添加一行
    cellEditing.cancelEdit();
    cellEditing.startEditByPosition({//要編輯的表格中的光標(biāo)出現(xiàn)的位置
    row : Ext.getCmp('grid1').getStore().getCount()-1,
    column : 1
    });
    }
    }
    }
    2.調(diào)用這個button按鈕的方法
    Ext.getCmp('fbutton').fireEvent('click');
    3.grid表格中plugins:屬性的配置:
    plugins:[
    cellEditing=Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit:1,
    listeners: {
    edit: function(editor,e) {
    }
    }
    })
    ],