EXTJS页面设计,请各位大神来给看看,谢谢,在线等......
现在要用EXTJS设计一个页面,但是刚接触两天,好多东西都不是很懂,所以页面写不出来....
请各位大神抽空帮写一个页面... 很着急..因为样式都是一样的.所以出一个我能拿来照着改就行,页面样子如图:
请大神帮忙写一个这个页面..谢谢了..
这个是我自己写的...但是和原型设计的页面有出入.
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);
}
}
}
});
}
}
});
}
});
大神们求助啊.... 真的很着急....
这种直接发项目要求找人干活的建议去软件外包网站。顺便好奇问下，你的老板给你薪水也是发的“C币”？
SENCHA ARCHITECT
用这个软件 可视化开发起来很快
搜 ext grid ，一大把，