ExtJS4 多行工具栏

来源：互联网发布：python中的模型meta 编辑：程序博客网时间：2024/05/21 17:23

   ExtJS在javascript框架里，算是曲线比较高的。可能E文能力强点的，能够很好理解文档，但我认为这个只是一个方面，不是最重要的方面。软件的学习是这个世界最好的学习模式，你能够快速用一个小小demo去验证，你想到的，你猜到的。所以这个行业也是自学成才最多的行业，没有之一。大多时候属性方法，我们不要理解的时候，都需要例子去验证，对比。

ExtJS添加多行工具栏

Ext.onReady(function () {    Ext.create('Ext.data.Store', {        storeId: 'simpsonsStore',        fields: ['name', 'email', 'phone'],        data: {            'items': [{                'name': 'Lisa',                    "email": "lisa@simpsons.com",                    "phone": "555-111-1224"            }, {                'name': 'Bart',                    "email": "bart@simpsons.com",                    "phone": "555-222-1234"            }, {                'name': 'Homer',                    "email": "home@simpsons.com",                    "phone": "555-222-1244"            }, {                'name': 'Marge',                    "email": "marge@simpsons.com",                    "phone": "555-222-1254"            }]        },        proxy: {            type: 'memory',            reader: {                type: 'json',                root: 'items'            }        }    });    Ext.create('Ext.grid.Panel', {        title: 'Simpsons',        store: Ext.data.StoreManager.lookup('simpsonsStore'),        columns: [{            text: 'Name',            dataIndex: 'name'        }, {            text: 'Email',            dataIndex: 'email',            flex: 1        }, {            text: 'Phone',            dataIndex: 'phone'        }],        height: 400,        width: 500,        dockedItems: [{ //这里开始            xtype: 'toolbar',            dock: 'top',            items: [{                xtype: 'textfield',                id: 'gid',                name: 'findstr',                maxLength: 10,                labelWidth: 35,                width: 120,                fieldLabel: 'Name'            }, {                xtype: 'textfield',                id: 'gname',                name: 'findstr',                maxLength: 10,                labelWidth: 35,                fieldLabel: 'Phone'            }]        }, {            xtype: 'toolbar',            dock: 'top',            items: ['->', {                xtype: 'button',                text: '查询',                handler: function () {                }            }, {                xtype: 'button',                text: '重置',                handler: function () {                }            }]        }],        renderTo: Ext.getBody()    });});

0 0