EXTJS页面设计,请各位大神来给看看,谢谢,在线等......

Question

现在要用EXTJS设计一个页面,但是刚接触两天,好多东西都不是很懂,所以页面写不出来....
请各位大神抽空帮写一个页面... 很着急..因为样式都是一样的.所以出一个我能拿来照着改就行,页面样子如图:

请大神帮忙写一个这个页面..谢谢了..

Answer 1

这个是我自己写的...但是和原型设计的页面有出入.

 Ext.define('Forestry.app.environmentMonitor.ForestryAlarm', {
    extend : 'Ext.panel.Panel',
    initComponent : function() {
        var me = this;
        Ext.apply(this, {
            layout : 'border',
            items : [ Ext.create('Forestry.app.environmentMonitor.ForestryAlarmLeaflet'), Ext.create('Forestry.app.environmentMonitor.ForestryAlarmGrid', {
                cButtons : me.cButtons,
                cName : me.cName
            }) ]
        });
        this.callParent(arguments);
    }
});

//添加按钮弹框
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 : [ '->', {
                    id : 'workflowwindow-save',
                    text : '确定',
                    iconCls : 'icon-accept',
                    width : 80,
                    handler : function() {
                        this.up('window').close();
                    }
                },{
                    id : 'workflowwindow-cancel',
                    text : '取消',
                    iconCls : 'icon-cancel',
                    width : 80,
                    handler : function() {
                           this.up('window').close();
                    }
                },{
                    id : 'workflowwindow-accept',
                    text : '确定',
                    hidden : true,
                    iconCls : 'icon-accept',
                    width : 80,
                    handler : function() {
                        this.up('window').close();
                    }
                },'->']
        }]
        });
        App.WorkFlowConfigurationWindow.superclass.constructor.call(this, config);
    }
});

//查询
Ext.define('Forestry.app.environmentMonitor.ForestryAlarmLeaflet',{
    extend : 'Ext.panel.Panel',
    region : 'north',
    height : '50%',
    split : true,
    initComponent : function() {
        this.callParent(arguments);
    }
});

//信息列表
Ext.define('Forestry.app.environmentMonitor.ForestryAlarmGrid', {
    extend : 'Ext.grid.Panel',
    plain : true,
    border : true,
    region : 'center',
    autoScroll : true,
    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 store = 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%',
        } ];

        Ext.apply(this, {
            id : 'ForestryAlarmGrid',
            store : store,
            columns : columns,
            selModel : Ext.create('Ext.selection.CheckboxModel'),
            bbar : Ext.create('Ext.PagingToolbar', {
                store : store,
                displayInfo : true
            }),
            tbar : [ {
                xtype : 'button',
                itemId : 'btnAdd',
                iconCls : 'icon-add',
                text : '添加',
                hidden : !globalObject.haveActionMenu(me.cButtons, 'Add'),
                handler : me.onAddClick
            }, {
                xtype : 'button',
                itemId : 'btnDelete',
                iconCls : 'icon-delete',
                text : '删除',
                hidden : !globalObject.haveActionMenu(me.cButtons, 'Delete'),
                handler : me.onDeleteClick
            } ],
            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);
                    Ext.getCmp('workflowwindow-save').hide();
                    Ext.getCmp('workflowwindow-cancel').hide();
                    Ext.getCmp('workflowwindow-accept').show();
                    win.show();
                }
            }
        });

        store.loadPage(1);

        this.callParent(arguments);
    },
    onAddClick : function() {
        Ext.Msg.alert('提示','操作已经成功');
    },
    onDeleteClick : function() {
        globalObject.confirmTip('删除的记录不可恢复，继续吗？', function(btn) {
            if (btn == 'yes') {
                var s = Ext.getCmp("ForestryAlarmGrid").getSelectionModel().getSelection();
                if (s == "") {
                    globalObject.errTip('请先点击选择删除项！');
                } else {
                    var ids = [];
                    var idProperty = this.idProperty || 'id';
                    for (var i = 0, r; r = s[i]; i++) {
                        ids.push(r.get(idProperty));
                    }
                    Ext.Ajax.request({
                        url : appBaseUri + '',
                        params : {
                            ids : ids.join(',')
                        },
                        success : function(response) {
                            if (response.responseText != '') {
                                var res = Ext.JSON.decode(response.responseText);
                                if (res.success) {
                                    globalObject.msgTip('操作成功！');
                                    Ext.getCmp("ForestryAlarmGrid").getStore().reload();
                                } else {
                                    globalObject.errTip('操作失败！' + res.msg);
                                }
                            }
                        }
                    });
                }
            }
        });
    }
});