Ext2.0的EditorGridPanel

最新推荐文章于 2018-07-18 22:31:23 发布

转载最新推荐文章于 2018-07-18 22:31:23 发布 · 574 阅读

文章标签：

#ext2 #ed #ext editgridpanel

java 专栏收录该内容

31 篇文章

订阅专栏

本文通过示例代码展示了如何使用Ext JS库创建一个具备编辑功能的表格控件，其中包括了组合框（ComboBox）和文本字段（TextField）用于单元格编辑，并集成了选择框、工具栏按钮等功能。

本文的代码将演示一个可编辑的表格控件：

<html><head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<title></title>
</head>
<script>
Ext.onReady(function(){
    //ComboBox的数据
    var sex = [['male','male'],
        ['female','female']];
    var sexStore = new Ext.data.SimpleStore({
            fields: ['sexNm', 'sex'],
            data : sex
        });

    var sm = new Ext.grid.CheckboxSelectionModel();
    //表格的表头定义
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',editor: new Ext.form.ComboBox({//该列的数据由ComboBox修改
            store: sexStore,
            displayField:'sexNm',
            valueField: 'sex',
            typeAhead: true,
            editable:false,
            forceSelection:true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'Select a sex...',
            selectOnFocus:true,
            lazyInit:false
        })
        },
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn',editor: new Ext.form.TextField({ //该列数据由TextField修改
                allowBlank: true,
                maxLength: 50
            })
        }
    ]);
    cm.defaultSortable = true;

    var data = [
        ['1','male','name1','descn1'],
        ['2','male','name1','descn2'],
        ['3','fmale','name3','descn3'],
        ['4','male','name4','descn4'],
        ['5','fmale','name5','descn5']
    ];
    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id',mapping: 0},
            {name: 'sex',mapping: 1},
            {name: 'name',mapping: 2},
            {name: 'descn',mapping: 3}
        ])
    });
    ds.load();

    var grid = new Ext.grid.EditorGridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'HelloWorld',
        autoHeight:true,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })
    });

    grid.render();
    //表格的事件绑定
    grid.addListener('afteredit',afteredit);
    function afteredit(e)
    {
        Ext.MessageBox.alert("afteredit",e.value);
    }
    //将表格在一个新Panel中放置
    var panel = new Ext.Panel({
        renderTo: 'grid-panel',
        title:'panel',
        collapsible:true,
        width:450,
        height:400,
        items:[grid]
    });
})
</script>
<body>
<div id='grid3'></div>
<div id='grid-panel'></div>
</body>
</html>