Ext学习之——实现grid的Combo编辑

　　今天在写Ext的Grid的表格编辑，要实现一个省份的下拉选取。实现如下效果：

考虑了一会觉得用JSON比较方便，说干就干，马上就出来了，贴出代码以备后查。

JSON:

var Province = {"province": [{ "pyName":"BeiJing" , "cnName":"北京" },{ "pyName":"AnHui" , "cnName":"安徽省" },{ "pyName":"FuJian" , "cnName":"福建省" },{ "pyName":"GanSu" , "cnName":"甘肃省" },{ "pyName":"GuangDong" , "cnName":"广东省" },{ "pyName":"GuiZhou" , "cnName":"贵州省" },{ "pyName":"HaiNan" , "cnName":"海南省" },{ "pyName":"HeBei" , "cnName":"河北省" },{ "pyName":"HeiLongJiang" , "cnName":"黑龙江省" },{ "pyName":"HeNan" , "cnName":"河南省" },{ "pyName":"HuBei" , "cnName":"湖北省" },{ "pyName":"HuNam" , "cnName":"湖南省" },{ "pyName":"JiLin" , "cnName":"吉林省" },{ "pyName":"JiangSu" , "cnName":"江苏省" },{ "pyName":"JiangXi" , "cnName":"江西省" },{ "pyName":"LiaoNing" , "cnName":"辽宁省" },{ "pyName":"QingHai" , "cnName":"青海省" },{ "pyName":"ShanDong" , "cnName":"山东省" },{ "pyName":"ShanXi1" , "cnName":"山西省" },{ "pyName":"ShanXi2" , "cnName":"陕西省" },{ "pyName":"SiChuan" , "cnName":"四川省" },{ "pyName":"YunNan" , "cnName":"云南省" },{ "pyName":"ZheJiang" , "cnName":"浙江省" },{ "pyName":"NeiMengGu" , "cnName":"内蒙古自治区" },{ "pyName":"GuangXi" , "cnName":"广西壮族自治区" },{ "pyName":"XiZang" , "cnName":"西藏自治区" },{ "pyName":"NingXia" , "cnName":"宁夏回族自治区" },{ "pyName":"XinJiang" , "cnName":"新疆维吾尔自治区" },{ "pyName":"XiangGang" , "cnName":"香港特别行政区" },{ "pyName":"AoMen" , "cnName":"澳门特别行政区" },{ "pyName":"TaiWan" , "cnName":"台湾省" }]}

Model:

var ColModel = new Ext.grid.ColumnModel({
    defaults : {
        sortable : true,
        width : 80,
        align : 'left'
    },
    columns : [ new Ext.grid.RowNumberer({
        editor : false,
        width : 30
    }), {
        id : 'id',
        header : 'ID',
        width : 80,
//        hidden : true,
        sortable : true,
        dataIndex : 'id'
    },  {
        header : '<div align="center">province</div>',
        width : 100,
        sortable : true,
        editor : provinceCombo,
　　　　　 renderer:getProvince,//渲染方法
        dataIndex : 'province'
    }, {
        sortable : false,
        dataIndex : '',
        editor : false
    } ]
});

 

Store:

var provinceStore = new Ext.data.JsonStore({
    autoDestroy: true,
    autoLoad : true,  
    storeId: 'provinceStore',
    data:Province,
    root: 'province',
    fields: ['pyName', 'cnName']
});

Combo:

var provinceCombo = new Ext.form.ComboBox({
    width:300,
    forceSelection: true,
    store: provinceStore,
    valueField:'pyName',
    displayField:'cnName',
    mode: 'local',
    triggerAction: 'all'
});

这样就搞定了。