girdpanel curd
/**
* viewConfig作用在grid's UI试图上的配置项对象， 任何Ext.grid.GridView可用的配置
*选项都可在这里指定。
* forceFit True表示为自动展开/缩小列的宽度以适应grid的宽度，这样就不会出现水
*平的滚动条。ColumnModel中任意的width的设置可覆盖此配置项。
**/
TabPanelGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent : function() {
if(!this.csm){
this.sm = new Ext.grid.CheckboxSelectionModel();
}else{
this.sm = this.csm;
}
//this.autoHeight = true;
this.stripeRows = true;
//this.border = false;
this.viewConfig = {
forceFit : true
};
this.createColumns();
this.createBbar();
this.createtbar();
TabPanelGrid.superclass.initComponent.call(this);
}
}
CreateColumns
/**
* dataIndex（可选的）数据索引，相当于Grid记录集（Ext.data.Store里面的
* Ext.data.Record ）*中字段名称，字段的值用于展示列里面的值（column's value）。*如不指定，Record*的数据列中的索引将作为列的索引。
**/
createColumns : function() {
var cols = [];
cols.push(this.sm);
for ( var i = 0; i < this.cols.length; i++) {
var f = this.cols[i];
if(f.dataIndex)cols.push(f);
}
this.columns = cols;
}
createBbar
createBbar : function() {
this.bbar = new Ext.PagingToolbar( {
displayInfo : true,
store : this.store
});
}
createTbar
createtbar : function() {
this.tbar = new Ext.Toolbar( {
items : [ "-", {
text : '增加',
handler : this.createRecord.createDelegate(this)
}, "-", {
text : '修改',
handler : this.updateRecord.createDelegate(this)
}, "-", {
text : '删除',
handler : this.removeRecord.createDelegate(this)
}, "-", new Ext.ux.form.SearchField( {
store : this.store,
width : 150
}) ]
});
}
createRecord
/**
*this.cols 是全局cols(初始化时的那个cols)
*cols 是函数里面声明的cols
**/
createRecord : function() {
this.showWindow();
form = this.getForm();
form.baseParams = {
create : true
};
//表单置空
var emptyRecord = {};
for ( var i = 0; i < this.cols.length; i++) {
var f = this.cols[i].dataIndex;
emptyRecord[f] = '';
}
form.setValues(emptyRecord);
}
updateRecord
updateRecord : function() {
var r = this.getSelectedRecord();
if (r != false) {
this.showWindow();
this.form = this.getForm();
this.form.baseParams = {create : false};
this.form.loadRecord(r);
}
}
getSelectedRecord
/**
*getSelectionModel返回grid的RowSelectionModel
*getSelections() : Array
*返回以选取的纪录。Returns the selected records
*getSelected() : Record
*返回选区中的第一个记录。
**/
getSelectedRecord : function() {
var sm = this.getSelectionModel();
if (sm.getCount() == 0) {
Ext.Msg.alert('信息', '请选择记录！');
return false;
} else {
return sm.getSelections()[0];
}
}
getForm
/**
*getForm() : ext.form.BasicForm
*返回该面板包含的Form
**/
getForm : function() {
return this.getFormPanel().getForm();
}
getFormPanel
getFormPanel : function() {
if (!this.gridForm) {
this.gridForm = this.createForm();
}
return this.gridForm;
}
CreateForm
/**
*this.cols 初始化得到
* trackResetOnLoad : Boolean
*如果为true，则表单对象的form.reset()方法重置到最后一次加载的数据或*setValues()数据，以相对于一开始创建表单那时的数据。
**/
createForm : function() {
var items = new Array();
for ( var i = 0; i < this.cols.length; i++) {
var object = this.cols[i].formItem;
if(object){
items.push(object);
}
}
var form = new Ext.form.FormPanel( {
frame : true,
defaultType : 'textfield',
buttonAlign : 'center',
labelAlign : 'rigth',
labelWidth : 70,
layout : 'form',
trackResetOnLoad : true,
url : this.formUrl,
reader : this.store.reader,
items : items,
buttons : [ {
text : '提交',
handler : this.submintRecord.createDelegate(this)
}, {
text : '重置',
handler : function() {
form.getForm().reset();
}
} ]
});
return form;
}
submintRecord
/**
* beginEdit() 属于record属性
* 进入编辑。编辑期间，没有与所在的store任何关联的事件。
* endEdit()
* 结束编辑。如数据有变动，则会通知所在的store。
**/
submintRecord : function() {
var form = this.getForm();
var values = form.getFieldValues();
if(!form.isValid()) return;
var self = this;
if (form.baseParams.create) {
var data = new Ext.data.Record();
for ( var name in values) {
data.set(name,values[name]);
}
} else {
var r = this.getSelectedRecord();
r.beginEdit();
for ( var name in values) {
r.set(name, values[name]);
}
r.endEdit();
}
var tag = form.submit({
success : function(form,action){
if(action.result){
if(form.baseParams.create)self.store.load();
};
},
failure : function(form,action){
Ext.Msg.alert("提示","操作错误!您可能没有权限或会话过期!");
}
});
this.window.hide();
}
removeRecord
removeRecord : function() {
var r = this.getSelectedRecord();
var self = this;
if (r != false) {
Ext.Msg.confirm("提示","是否确定删除！",function(btn){
if(btn == 'yes'){
Ext.Ajax.request({
url:self.deleteUrl,
params: { id: r.id},
success:function(response, opts){
self.store.load();
try{
var object = Ext.util.JSON.decode(response.responseText);
if(object && !object.success){
Ext.Msg.alert("错误！",object.msg);
}
}catch(e){
}
},
failure : function(response,Optional){
Ext.Msg.alert("错误！",response.responseText);
}
});
}
});
}
}
showWindow
/**
*closeAction : String
*当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移
*除window并彻底加以销毁。“hide”是另外一个有效的选项，只是在视
*觉上通过偏移到零下(negative)的区域的手法来隐藏，这样使得window可
*通过show 的方法再显示.
*modal : Boolean
*True 表示为当window显示时对其后面的一切内容进行遮罩，false表示为
*限制对其它UI元素的语法（默认为 false）。
*constrain : Boolean
*True表示为将window约束在视图中显示，false表示为允许window在视
*图之外的地方显示（默认为false）。可选地设置constrainHeader使得头
*部只被约束。
*shim : Boolean
*False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）
*。注意此项只当floating = true时有效。
**/
showWindow : function() {
if (!this.window) {
var fromPanel = this.getFormPanel();
var win = new Ext.Window( {
title : 'user information',
closeAction : 'hide',
modal : true,
constrain : true,
shim : false,
width : 300,
items : [ fromPanel ]
});
win.show();
this.window = win;
} else {
this.window.show();
}
}