應用-EXTJS頁面設計,請教各位大神

EXTJS頁面設計,請教各位大神

我現在要做一個頁面,如圖

可是中間的那一排按鈕.我添加不上去了. 第一次使用EXT.. 麻煩各位大神幫忙看看.

 // 流程配置管理信息添加
Ext.define('App.WorkFlowConfigurationWindow', {
    extend : 'Ext.window.Window',
    constructor : function(config) {
        config = config || {};
        Ext.apply(config, {
            title : '流程配置管理信息',
            width : 350,
            height : 250,
            bodyPadding : '10 5',
            layout : 'fit',
            modal : true,
            items : [ {
                xtype : 'form',
                fieldDefaults : {
                    labelAlign : 'left',
                    labelWidth : 90,
                    anchor : '100%'
                },
                items : [ {
                    xtype : 'textfield',
                    name : 'orderNumber',
                    fieldLabel : '序號'
                }, {
                    xtype : 'textfield',
                    name : 'workFlowName',
                    fieldLabel : '流程名稱'
                }, {
                    xtype : 'textfield',
                    name : 'sourceApplicationSystem',
                    fieldLabel : '源應用系統'
                }, {
                    xtype : 'textfield',
                    name : 'sourceDataSource',
                    fieldLabel : '源數據源'
                }, {
                    xtype : 'textfield',
                    fieldLabel : '目標系統',
                    name : 'targetSystem'
                } ,{
                    xtype : 'textfield',
                    fieldLabel : '目標數據源',
                    name : 'targetDateSource'
                },{
                    xtype : 'textfield',
                    fieldLabel : '狀態',
                    name : 'status'
                }],
                buttons : [ '->', {
                    text : '確定',
                    iconCls : 'icon-accept',
                    width : 80,
                    handler : function() {
                        this.up('window').close();
                    }
                }, '->' ]
            } ]
        });
        App.WorkFlowConfigurationWindow.superclass.constructor.call(this, config);
    }
});




Ext.define('Forestry.app.forestryMonitor.ForestryAlarm', {
    extend : 'Ext.grid.Panel',
    plain : true,
    border : true,
    region : 'center',
    split : true,
    initComponent : function() {
        var me = this;

        var forestryTypeNameStore = Ext.create('Ext.data.JsonStore', {
            proxy : {
                type : 'ajax',
                url : appBaseUri + '',
                reader : {
                    type : 'json',
                    root : 'list',
                    idProperty : 'ItemValue'
                }
            },
            fields : [ 'ItemText', 'ItemValue' ]
        });

        Ext.define('ModelList', {
            extend : 'Ext.data.Model',
            idProperty : 'id',
            fields : ['orderNumber', 'workFlowName','sourceApplicationSystem','sourceDataSource','targetSystem','targetDateSource','status' ]
        });

        var workFlowQueryStore = Ext.create('Ext.data.Store', {
            model : 'ModelList',
            // autoDestroy: true,
            autoLoad : true,
            remoteSort : true,
            pageSize : globalPageSize,
            proxy : {
                type : 'ajax',
                url : appBaseUri + '/changeservice/workFlowConfiguration/searchWorkFlowConfiguration',
                extraParams : me.extraParams || null,
                reader : {
                    type : 'json',
                    root : 'data',
                    totalProperty : 'totalRecord',
                    successProperty : "success"
                }
            },
            sorters : [ {
                property : 'orderNumber',
                direction : 'DESC'
            } ]
        });

        var columns = [ {
            text : "序號",
            dataIndex : 'orderNumber',
            width : '5%'
        }, {
            text : "流程名稱1",
            dataIndex : 'workFlowName',
            width : '10%'
        }, {
            text : "源應用系統",
            dataIndex : 'sourceApplicationSystem',
            width : '17%'
        }, {
            text : "源數據源",
            dataIndex : 'sourceDataSource',
            width : '17%'
        }, {
            text : "目標系統",
            dataIndex : 'targetSystem',
            width : '10%',
        }, {
            text : "目標數據源",
            dataIndex : 'targetDateSource',
            width : '17%',
        }, {
            text : "狀態",
            dataIndex : 'status',
            width : '5%',
        } ];

        var ttoolbar = Ext.create('Ext.toolbar.Toolbar', {
            items : [ {
                xtype : 'textfield',
                id : 'workFlowConfiguration-workFlowName',
                name : 'workFlowName',
                fieldLabel : '流程名稱',
                labelWidth : 30,
                width : '15%'
            }, {
                xtype : 'textfield',
                id : 'workFlowConfiguration-sourceApplicationSystem',
                name : 'sourceApplicationSystem',
                fieldLabel : '源應用系統',
                labelWidth : 30,
                width : '15%'
            }, {
                xtype : 'textfield',
                id : 'workFlowConfiguration-sourceDataSource',
                name : 'sourceDataSource',
                fieldLabel : '源數據源',
                labelWidth : 30,
                width : '15%'
            }, {
                xtype : 'textfield',
                id : 'workFlowConfiguration-targetSystem',
                name : 'targetSystem',
                fieldLabel : '目標系統',
                labelWidth : 30,
                width : '15%'
            }, {
                xtype : 'textfield',
                id : 'workFlowConfiguration-targetDateSource',
                name : 'targetDateSource',
                fieldLabel : '目標數據源',
                labelWidth : 30,
                width : '15%'
            }, {
                xtype : 'combobox',
                fieldLabel : '狀態',
                id : 'workFlowConfiguration-status',
                name : 'status',
                store : status,
                valueField : 'ItemValue',
                displayField : 'ItemText',
                typeAhead : true,
                queryMode : 'remote',
                emptyText : '請選擇...',
                editable : false,
                labelWidth : 30,
                width : '15%',
                maxWidth : 320
            }, {
                xtype : 'button',
                text : '查詢',
                iconCls : 'icon-search',
                width : '10%',
                maxWidth : 60,
                handler : function(btn, eventObj) {
                    var searchParams = {
                        workFlowName : Ext.getCmp('workFlowConfiguration-workFlowName').getValue(),
                        sourceApplicationSystem : Ext.getCmp('workFlowConfiguration-sourceApplicationSystem').getValue(),
                        sourceDataSource : Ext.getCmp('workFlowConfiguration-sourceDataSource').getValue(),
                        targetSystem : Ext.getCmp('workFlowConfiguration-targetSystem').getValue(),
                        targetDateSource : Ext.getCmp('workFlowConfiguration-targetDateSource').getValue(),
                        status : Ext.getCmp('workFlowConfiguration-status').getValue()
                    };
                    Ext.apply(workFlowQueryStore.proxy.extraParams, searchParams);
                    workFlowQueryStore.reload();
                }
            }, {
                xtype : 'button',
                text : '重置',
                iconCls : 'icon-reset',
                width : '10%',
                maxWidth : 60,
                handler : function(btn, eventObj) {
                    Ext.getCmp('workFlowConfiguration-workFlowName').setValue(null);
                    Ext.getCmp('workFlowConfiguration-sourceApplicationSystem').setValue(null);
                    Ext.getCmp('workFlowConfiguration-sourceDataSource').setValue(null);
                    Ext.getCmp('workFlowConfiguration-targetSystem').setValue(null);
                    Ext.getCmp('workFlowConfiguration-targetDateSource').setValue(null);
                    Ext.getCmp('workFlowConfiguration-status').setValue(null);
                }
            }]
        });


        Ext.apply(this, {
            store : workFlowQueryStore,
            columns : columns,
            selModel : Ext.create('Ext.selection.CheckboxModel'),
            tbar : ttoolbar,            
            bbar : Ext.create('Ext.PagingToolbar', {
                store : workFlowQueryStore,
                displayInfo : true
            }),         
                listeners : {
                    itemdblclick : function(dataview, record, item, index, e) {
                        var grid = this;
                        var id = grid.getSelectionModel().getSelection()[0].get('id');
                        var gridRecord = grid.getStore().findRecord('id', id);
                        var win = new App.WorkFlowConfigurationWindow({
                            hidden : true
                        });
                        var form = win.down('form').getForm();
                        form.loadRecord(gridRecord);
                        form.findField('workFlowName').setReadOnly(true);
                        form.findField('sourceApplicationSystem').setReadOnly(true);
                        form.findField('sourceDataSource').setReadOnly(true);
                        form.findField('targetSystem').setReadOnly(true);
                        form.findField('targetDateSource').setReadOnly(true);
                        form.findField('status').setReadOnly(true);
                        win.show();
                    }
                }

            });
        forestryTypeNameStore.loadPage(1);
        this.callParent(arguments);
    }
});

麻煩各位了大神, 很著急.....

最佳回答：

Toolbar的layout改為table，自己增加項目

    var ttoolbar = Ext.create('Ext.toolbar.Toolbar', {
        layout: { type: 'table', columns: 5 },
        items: [{
            xtype: 'textfield',
            id: 'workFlowConfiguration-workFlowName',
            name: 'workFlowName',
            fieldLabel: '流程名稱'

        }, {
            xtype: 'textfield',
            id: 'workFlowConfiguration-sourceApplicationSystem',
            name: 'sourceApplicationSystem',
            fieldLabel: '源應用系統'

        }, {
            xtype: 'textfield',
            id: 'workFlowConfiguration-sourceDataSource',
            name: 'sourceDataSource',
            fieldLabel: '源數據源',
            colspan: 3

        }, {
            xtype: 'textfield',
            id: 'workFlowConfiguration-targetSystem',
            name: 'targetSystem',
            fieldLabel: '目標系統'

        }, {
            xtype: 'textfield',
            id: 'workFlowConfiguration-targetDateSource',
            name: 'targetDateSource',
            fieldLabel: '目標數據源'

        }, {
            xtype: 'combobox',
            fieldLabel: '狀態',
            id: 'workFlowConfiguration-status',
            name: 'status',
            store: status,
            valueField: 'ItemValue',
            displayField: 'ItemText',
            typeAhead: true,
            queryMode: 'remote',
            emptyText: '請選擇...',
            editable: false,
            maxWidth: 320
        }, {
            xtype: 'button',
            text: '查詢',
            iconCls: 'icon-search',
            width: '10%',
            maxWidth: 60,
            handler: function (btn, eventObj) {
                var searchParams = {
                    workFlowName: Ext.getCmp('workFlowConfiguration-workFlowName').getValue(),
                    sourceApplicationSystem: Ext.getCmp('workFlowConfiguration-sourceApplicationSystem').getValue(),
                    sourceDataSource: Ext.getCmp('workFlowConfiguration-sourceDataSource').getValue(),
                    targetSystem: Ext.getCmp('workFlowConfiguration-targetSystem').getValue(),
                    targetDateSource: Ext.getCmp('workFlowConfiguration-targetDateSource').getValue(),
                    status: Ext.getCmp('workFlowConfiguration-status').getValue()
                };
                Ext.apply(workFlowQueryStore.proxy.extraParams, searchParams);
                workFlowQueryStore.reload();
            }
        }, {
            xtype: 'button',
            text: '重置',
            iconCls: 'icon-reset',
            width: '10%',
            maxWidth: 60,
            handler: function (btn, eventObj) {
                Ext.getCmp('workFlowConfiguration-workFlowName').setValue(null);
                Ext.getCmp('workFlowConfiguration-sourceApplicationSystem').setValue(null);
                Ext.getCmp('workFlowConfiguration-sourceDataSource').setValue(null);
                Ext.getCmp('workFlowConfiguration-targetSystem').setValue(null);
                Ext.getCmp('workFlowConfiguration-targetDateSource').setValue(null);
                Ext.getCmp('workFlowConfiguration-status').setValue(null);
            }
        }, {
            xtype: 'panel',
            colspan: 5,
            frame: true,
            items: [{ xtype: 'button', text: '添加' },
                { xtype: 'label', html: '　' }, { xtype: 'button', text: '修改' },
                { xtype: 'label', html: '　' }, { xtype: 'button', text: '刪除' },
                { xtype: 'label', html: '　' }, { xtype: 'button', text: '啟動' },
                { xtype: 'label', html: '　' }, { xtype: 'button', text: '停止' }]
        }]
    });