ExtJS4 多行工具栏

	   ExtJS在javascript框架里,算是曲线比较高的。可能E文能力强点的,能够很好理解文档,但我认为这个只是一个方面,不是最重要的方面。  软件的学习是这个世界最好的学习模式,你能够快速用一个小小demo去验证,你想到的,你猜到的。所以这个行业也是自学成才最多的行业,没有之一。大多时候属性方法,我们不要理解的时候,都需要例子去验证,对比。
 ExtJS添加多行工具栏
ExtJS4 多行工具栏_第1张图片
Ext.onReady(function () {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                    "email": "[email protected]",
                    "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                    "email": "[email protected]",
                    "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                    "email": "[email protected]",
                    "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                    "email": "[email protected]",
                    "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()
    });

});

你可能感兴趣的:(extjs4,多行工具栏)