ExtJs组件 Panel

一：如果在Store中定义了storeId  那么在panel中可以用如下方法的到store，

Ext.data.StoreManager.lookup('storeId')

 二：cell格式化显示

columns: [
    {
        text: 'Email',
        dataIndex: 'email',
        renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', 
                                      value, value);
        }
    }
]

    {0}和{1}是两个占位符，最终将被value替换 String.format是一个工具函数，他可以有任意多的参数，最后都可以用占位符替换。

 

三：选择模式

       当我们要编辑某一条记录的时候 通常需要选中改行，这就关系到选择模式的问题。

Ext.create('Ext.grid.Panel', {
    selType: 'cellmodel',
    store: ...
});

   Ext默认的是rowmodel ，一般编辑记录的话，应该改用cellmodel

 

四：cellEdit

       cellEdit是以插件形式添加的。

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

   clicksToEdit：1表示是单击进行编辑，如果是双击的话数值就是2。editor为textfield代表是用文本框进行编辑。