请教一个Ext4页面的问题，请大神赐教

[AngelWings]

请问这个页面怎么画，还有下面的功能？

[斯洛文尼亚旅游]

panel+gridpanel，自己ext提供的demo

[AngelWings]

引用 1 楼 showbo 的回复:

panel+gridpanel，自己ext提供的demo

谢谢版主哥哥的回复。 我是个Ext小白，公司刚分配的项目用的是EXT4 MVC的技术。 现在连页面代码都不会写，不会画页面。不会写ext语法，不懂ext函数，参数等。 请问ext开发需要借助什么工具开发？我现在用的是myeclipse，没有任何EXT插件。 求大神推荐一本EXT4 MVC的学习教程或者好的视频。谢谢！

[zhjdg]

阿蒙保佑你。

[AngelWings]

加班中

[斯洛文尼亚旅游]

大概帮你写了个。。自己慢慢摸了。。数据发送部分要自己写了，查看Ext.ajax功能 Ext4.1的，其他版本可能不支持

    var sel = '<select><option value="克重">克重</option><option value="指圈号">指圈号</option></select>', maxNum = 2;//这变量要依据你下拉框的option来设置
    function addRow() {
        var grid = Ext.getCmp('myGrid');
        var store = grid.getStore();
        store.add({ id: store.getCount() + 1, listname: '', name: '' });
        if (store.getCount() >= maxNum) Ext.get('imgADD').hide();
    }
    Ext.onReady(function () {

        var store = Ext.create('Ext.data.Store', {
            fields: ['id', 'listname', 'name'],
            data: { 'items': [{ id: 1, listname: '规格', name: '克重' }, { id: 2, listname: 'Size', name: '指圈号'}] },
            proxy: { type: 'memory', reader: { type: 'json', root: 'items'} }
        });
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            width: 400,
            id: 'myGrid',
            columns: [
             { text: '序号', dataIndex: 'id', width: 50 },
             { text: '前台显示名称', dataIndex: 'listname', flex: 1, renderer: function (v) { return '<input type="text" value="' + v + '"/>'; } },
             { text: '规格名称', dataIndex: 'name', width: 150, renderer: function (v) { return sel.replace(v + '"', v + '" selected'); } },
             {
                 xtype: 'actioncolumn',
                 text: '操作',
                 width: 60,
                 altText: '删除',
                 sortable: false,
                 items: [{
                     icon: 'del.gif',
                     tooltip: '删除',
                     handler: function (grid, rowIndex, colIndex) {
                         if (confirm('确认删除？！！')) {
                             store.removeAt(rowIndex);
                             Ext.get('imgADD').show();
                         }
                     }
                 }]
             }]
        });
        Ext.create('Ext.Panel',
        {
            bodyPadding: '30 25 5 25',
            width: 600,
            listeners: { render: function () { if (store.getCount() >= maxNum) Ext.get('imgADD').hide(); } },
            renderTo: document.body,
            items: [
            { xtype: 'panel', layout: { type: 'table', columns: 2, itemCls: 'xxxxxxxxxxx', tdAttrs: { valign: 'bottom'} }, border: false, height: 200, items: [grid, { border: false, html: '　<img src="add.gif" alt="+" id="imgADD" onclick="addRow()"/>'}] },
            { xtype: 'panel', height: 30, items: [
            { width: 100, height: 25, xtype: 'button', text: '保存', handler: function () {
                var s = '';
                store.each(function (r) {
                    s += Ext.encode(r.raw)
                });
                alert(s)
            }
            },
             { width: 100, height: 25, xtype: 'button', margin: '0 0 0 30', text: '重置', handler: function () {
                 if (confirm('确认重置？将会删除所有数据？！')) store.removeAll();
             }
             }], border: false
            },
            { xtype: 'panel', height: 40, border: false, html: '<div style="color:red">备注：1.目前暂定规格....<br/>　　　2.同一个规格...，列表的<img src="add.gif" alt="+"/>按钮不再显示</div>' }
            ]
        });
    });