extjs 读取数据并显示在页面同时添加修改功能

1、customer。js   //model类js文件

Ext.define('RCP.model.Customer', {
extend: 'Ext.data.Model',
fields: [
{
name: 'cusId',
type: 'string'
}
{
name :'mobile',
type:'string'
},
{
name:'name',
type:'string'
}

]
});

2、customerListjs  ：数据和工具条的显示

Ext.define('RCP.view.customer.CustomerList', {
extend: 'Ext.grid.Panel',
alias: 'widget.customerList',

padding: 5,
autoScroll: true,
title: '客户信息',
emptyText: '客户信息',

initComponent: function () {
var me = this;

var store = Ext.create('Ext.data.Store', {  //store数据存储与交互
model: 'RCP.model.Customer',//model对象
proxy: {
type: 'ajax',
url: 'customer/ListAction.action',
reader: {
type: 'json',
root: 'customerList',//与后台交互的数据,action定义全局变量customerList并提供getset方法即可

successProperty: 'success'
}
},

autoLoad: true
});

this.columns = [//数据的列名
{
header: 'cusId',
dataIndex: 'cusId',//不显示 编辑时通过id传值
hidden:true,
flex: 1
},
{
header: '姓名',
dataIndex: 'name',
flex: 1
},
{
header:'电话',
dataIndex:'mobile',
flex:1
}

];

this.store = store;

var refreshAction = Ext.create('Ext.Action', { //刷新页面功能
text: '刷新',
handler: function () {
store.reload();
}
});

//---------------------修改功能开始--------------------
var editAction=Ext.create('Ext.Action',{
text:'编辑',
handler:function(){
var record = me.getSelectionModel().getSelection()[0];
if(record){
showEditInvitation(record);
}
}
});
function showEditInvitation(record) {

//调用alias名为customerEditWindow的view

var view = Ext.widget('customerEditWindow', {
cusId: record.get('cusId')//参数 }); view.on("close", function () {//关闭按钮 if (view.ok) store.reload(); }); }

//------------------------------修改功能结束------------------------------------------
this.dockedItems = [
{
dock: 'top',
xtype: 'toolbar',
items: [
refreshAction,editAction    //将上面的2个对象添加到工具条dockedItems
]
}
];

this.callParent(arguments);//调用方法initComponent必须调用这个
}
});
3、EditWindow.js：定义弹出的window

Ext.define('RCP.view.customer.EditWindow', {
extend: 'Ext.window.Window',
alias: 'widget.customerEditWindow',
title: '修改客户信息',
layout: 'fit',
resizable: false,
autoShow: true,
modal: true,

width: 600,

initComponent: function () {
var thisWindow = this;

//创建Edit
var invForm = Ext.create('RCP.view.customer.Edit');
invForm.getForm().load({
url: 'customer/getOneAction.action',   //读取点击那一行的数据
method: 'GET',
waitMsg: 'Loading...',
params: {
cusId: this.cusId   //点击行的id，传到后台
}
})

this.items = [  //window的控件按钮
{
xtype: 'form',
bodyPadding: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
defaults: {
anchor: '100%'  //填满
},

items: [
{
items: [invForm]
}
],
buttons: [
{
text: '修改',
disabled: true,
formBind: true,
id: this.ids,
handler: function () {
var form = this.up('form').getForm();
form.submit({
method: 'POST',
clientValidation: true,
url: 'customer/updateAction.action',
params: {//传递到后台的参数
cusId:this.cusId,
mobile:invForm.getForm().findField('mobile').getValue(),
name: invForm.getForm().findField('name').getValue()
},
success: function (form, action) {
if(action.result.success==true){
Ext.MessageBox.alert('系统', action.result.message);
thisWindow.ok = true;
thisWindow.close();
}else{
Ext.MessageBox.alert('系统', '修改失败！');
}
}
});
}
},
{
text: '取消',
handler: function () {
thisWindow.close();
}
}
]
}
];

this.callParent(arguments);
}
});

4、Edit.js:在上面创建的window里的内容显示

Ext.define('RCP.view.customer.Edit', {
extend: 'Ext.form.Panel',
alias: 'widget.customerEdit',
bodyPadding: 5,
border: false,

reader: new Ext.data.JsonReader({
model: 'RCP.model.Customer',
record: 'customer',           //与后台交互的数据 在后台定义全局变量customer并提供getset方法
successProperty: '@success'
}),

initComponent: function () {

this.items = [
{
xtype: 'form',
border: false,
bodyPadding: 10,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},

items: [
{
hidden: true,
fieldLabel: 'cusId',
name: 'cusId'
},
{
allowBlank: false,
fieldLabel: '客户姓名',
name: 'name',
emptyText: '输入客户姓名',
blankText   : "不能为空"
},
{

allowBlank: false,
fieldLabel: '客户电话',
name: 'mobile',
emptyText: '输入电话号',
regex : /^[0-9]\d{10}$/,
regexText : '输入正确的电话号',
blankText   : "不能为空"
}
]
}
];

this.callParent(arguments);
}
});

5、model和view添加到controller里，就实现了显示和编辑功能