Ext Grid的Combo/TextField/Width/Height的问题

Ext.onReady(function(){
    var fm = Ext.form;

    var checkColumn = new Ext.grid.CheckColumn({
       header: "Indoor?",
       dataIndex: 'indoor',
       width: 55
    });
    var cm = new Ext.grid.ColumnModel([{
           id:'common',
           header: "Common Name",
           dataIndex: 'common',
           width: 220,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "Light",
           dataIndex: 'light',
           width: 130,
           editor: new Ext.form.ComboBox({
displayField: ,
               typeAhead: true,
               triggerAction: 'all',
               transform:'light',
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },{
           header: "Price",
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 100000
           })
        },{
           header: "Available",
           dataIndex: 'availDate',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            })
        },
        checkColumn
    ]);

    cm.defaultSortable = true;

    var Plant = Ext.data.Record.create([
           {name: 'common', type: 'string'},
           {name: 'botanical', type: 'string'},
           {name: 'light'},
           {name: 'price', type: 'float'},            
           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
           {name: 'indoor', type: 'bool'}
      ]);

    var ds = new Ext.data.Store({
        url: 'plants.xml',

        reader: new Ext.data.XmlReader({
               record: 'plant'
           }, Plant),

        sortInfo:{field:'common', direction:'ASC'}
    });

    var grid = new Ext.grid.EditorGridPanel({
        ds: ds,
        cm: cm,
        renderTo: 'editor-grid',
        width:600,
        height:300,
        autoExpandColumn:'common',
        title:'Edit Plants?',
        frame:true,
        plugins:checkColumn,
        clicksToEdit:1,

        tbar: [{
            text: 'Add Plant',
            handler : function(){
                var p = new Plant({
                    common: 'New Plant 1',
                    light: 'Mostly Shade',
                    price: 0,
                    availDate: new Date(),
                    indoor: false
                });
                grid.stopEditing();
                ds.insert(0, p);
                grid.startEditing(0, 0);
            }
        }]
    });

    ds.load();
});
这是Ext grid中的可编辑的grid的Demo,
它在设置width/heigth用的是number,在Api中也是这样讲的,大家有用百分比的做法么?
另外在它的Editor中用了ComboBox,下拉选择列表后会把valueField的值显示出来,而不是把displayFiled显示出来,同样的问题存在于textFiled中,当inputType=password时,输入的时候显示为*,但是输入完成后仍然会把原值显示出来,这个问题大家怎么解决呢!

评论

4 楼 yangdc 2008-03-11  

文档合成说明文档

3 楼 edisundong 2008-03-04  

ColumnModel用renderer :formatxxx
formatxxx(text)
{
  return 加密(text);
}

2 楼 weboffice 2008-01-24  

急等第二个问题的回复呀,高手快进呀
"另外在它的Editor中用了ComboBox,下拉选择列表后会把valueField的值显示出来,而不是把displayFiled显示出来,同样的问题存在于textFiled中,当inputType=password时,输入的时候显示为*,但是输入完成后仍然会把原值显示出来,这个问题大家怎么解决呢! "

1 楼 karlpan01 2008-01-16  

这个问题已经基本解决了，其实如果是单纯的用ext的话，这些问题都好解决，只是由于兼容其它的问题，所以导致处理起来比较棘手。
inputType=password 用render吧
每一个column设定百分比 应该是不行的
通过获取外层div/table等的大小的改变的事件，然后动态设定grid的大小可以暂时解决grid不随外层变大变小的问题