ext webwork+hibernate+spring crud ssh2 记录

最新推荐文章于 2017-07-24 16:07:50 发布

iteye_5269

最新推荐文章于 2017-07-24 16:07:50 发布

阅读量161

点赞数

分类专栏： Ext 文章标签： EXT Webwork Spring Hibernate Mobile

Ext 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[color=red]1.login jsp[/color]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<html>
<head>
<title>文檔管理系統</title>
<link href="../css/css.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='../js/Constants.js'></script>
<script type='text/javascript' src='../dwr/interface/swsMstrService.js'></script>
<script type='text/javascript' src='../dwr/interface/codeService.js'></script>
<script type='text/javascript' src='../dwr/interface/authJS.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript' src='../dwr/engine.js'></script>

<link rel="stylesheet" type="text/css" href="../ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.2.1/ext-all.js"></script>

<script src="extjs/ext_login.js" type="text/javascript"></script>
</head>

<body style="margin:0pt;padding:0pt" class="x-box-blue">
<div id="loginform"></div>
</body>
</html>

[color=darkred]2.login extjs[/color]
Ext.onReady(function(){
var form1 = new Ext.form.FormPanel({
//renderTo:"loginform", //要渲染的div
labelWidth: 75, // label settings here cascade unless overridden
labelAlign:'right',
monitorValid : true,// 把有formBind:true的按钮和验证绑定
baseCls : 'x-plain',
//method:'POST',
//title: '登录',
bodyStyle:'padding:5px 5px 0',
width: 300,
defaults: {width: 150},
defaultType: 'textfield',// 默认字段类型
//实现非AJAX提交表单一定要加下面的两行！
//onSubmit: Ext.emptyFn,
//submit: function()
// {
//this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
//this.getEl().dom.action='extlogin.action';
//this.getEl().dom.submit();
// },

items: [{
fieldLabel: '用户名',
id: 'username',
name: 'user.username',
allowBlank:false,
blankText : "用户名不能为空"
//width:150
},{
fieldLabel: '密码',
blankText : "密码不能为空",
id: 'user.password',
name: 'user.password',
allowBlank:false,
minLength : 4,
//width:150,
inputType:'password' //类型为password
}
],
buttons: [{
text: '登录',
//type:'button',
type:'submit',
formBind : true,
id:'login',
handler: function()
{
if (form1.form.isValid()) {// 验证合法后使用加载进度条
Ext.MessageBox.show({
title : '请稍等',
msg : '正在登陆...',
progressText : '',
width : 300,
progress : true,
closable : false,
animEl : 'loading'
});
// 控制进度速度
var f = function(v) {
return function() {
var i = v / 11;
Ext.MessageBox.updateProgress(i, '');
};
};
for (var i = 1; i < 12; i++) {
setTimeout(f(i), i * 150);
}

// 提交到服务器操作
form1.form.doAction('submit', {
url : 'extlogin.action',// 文件路径
method : 'post',// 提交方法post或get
params : '',
// 提交成功的回调函数
success : function(form, action) {
if (action.result.msg == 'ok') {
window.location.href = 'ext_viewport.jsp';
} else {
Ext.Msg.alert('登陆失败',action.result.msg);
}
},

// 提交失败的回调函数
failure : function() {
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
}, {
text : '取消',
handler : function() {
form1.form.reset();
}// 重置表单
}]
});
var win = new Ext.Window({
layout : 'fit',
width : 300,
height : 150,
closeAction :'hide',
plain : true,
modal:true,
closable: false,
resizable: false,
plain: true,
border: false,
title:'登录',
bodyStyle:'padding:5px;',
buttonAlign:'center',
items:form1
});
win.show();

});
[color=darkred]3.list jsp[/color]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<html>
<head>
<title>仓点管理</title>
<link href="../css/css.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="../ext-2.2.1/resources/css/ext-all.css" />


<script src="../Inventory/extjs/ext_stock_list.js" type="text/javascript"></script>
<script src="../Inventory/extjs/ext_stock_add.js" type="text/javascript"></script>
<script src="../Inventory/extjs/ext_stock_edit.js" type="text/javascript"></script>
</head>

<body style="margin:0pt;padding:0pt" class="x-box-blue">
<div id="search-tb"></div>
<div id="mygrid" style="border:1px solid #99bbe8;overflow: hidden; width: 100%; height: 50%;"></div>
<input type="hidden" id="queryTxt">

</body>
</html>

[color=darkred]4. list ext js[/color]
Ext.onReady(function(){
//format the display data
var formatcustomer = function(value, cellmeta, record, rowIndex){
return record.data['cangdiancode']+'-'+record.data['cangdianname'];
}
function renderswsdateship(value, p, record){
value=formatDateStr(value);
return String.format('{0}', value, record.data['excerpt']);
};
function formatDateStr(date)
{
try{
var str="";
str=date.getFullYear()+"-";
str+=(((date.getMonth()+1)>=10)? (date.getMonth()+1):"0"+(date.getMonth()+1))+"-";
str+=(date.getDate()>=10)? date.getDate():"0"+date.getDate();
str+=" ";
str+=((date.getHours()>=10)? date.getHours():"0"+date.getHours())+":";
str+=((date.getMinutes()>=10)? date.getMinutes():"0"+date.getMinutes())+":";
str+=(date.getSeconds()>=10)? date.getSeconds():"0"+date.getSeconds();
return str;
}catch(e){
throw e;
}
}

function formatdatestring(value){
return value.substring(0,10);
}
var formatstatus = function(value){
if(value=="1")
return "未啟用";
if(value=="2")
return "已啟用";
if(value=="3")
return "禁用";
}
function renderoperate(value, cellmeta, record, rowIndex, columnIndex, store) {
//Ext.Msg.alert("msg",record.data['swsNbr']);
//var str = "<input type='button' value='查看详细信息' οnclick='alert(\"" +
// "这个单元格的值是：" + value + "\\n" +
//"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
//"这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
//"这是第" + rowIndex + "行\\n" +
//"这是第" + columnIndex + "列\\n" +
// "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
// "\")'>";
var str = "<a href=\"javascript:View_Search('"+record.data['swsNbr']+"')\"><img src='../images/custom/search.gif' width='15' height='13' border='0' alt='View'></a>";
str= str+" <a href='#' onClick=\"printURI1('/inc/print_select1.jsp?URI=/Inventory/inventory_in_print.jsp?swsnbr="+record.data['swsNbr']+"')\"><img src='../images/custom/print.gif' width='13' height='14' border='0' alt='Print'></a> ";
return str;
}

var storeParams = {
params : {
start : 0,
limit : 10
}
};
var sm = new Ext.grid.CheckboxSelectionModel();
// Process grid start
var cm = new Ext.grid.ColumnModel(
[sm, {
header : "序號",
width : 50,
renderer:function(value, cellmeta, record, rowIndex){
return rowIndex + 1;
},
align : 'center'
}, {
id : 'fid',
header : "fid",
width : 30,
dataIndex : 'fid',
align : 'center'
}, {
id : 'cangdiancode',
header : "倉點編號",
width : 100,
dataIndex : 'cangdiancode',
align : 'center'
}, {
header : "倉點名稱",
width : 120,
dataIndex : 'cangdianname',
align : 'center'
},
{
header : "所屬客戶",
width : 150,
dataIndex : 'custname',
renderer: formatcustomer,
align : 'center'
},
{
header : "啟用日期",
width : 100,
dataIndex : 'createdate',
//renderer:renderswsdateship,
renderer:formatdatestring,
align : 'center'
}, {
header : "負責人",
width : 75,
dataIndex : 'chargeman',
align : 'center'
}, {
header : "目前狀態",
width : 100,
dataIndex : 'status',
renderer:formatstatus,
align : 'center'
}]
);
var processreader = new Ext.data.JsonReader({
totalProperty : "totalSize",
root : "data"
}, Ext.data.Record.create([{
name : "fid",
type : "int"
},{
name : "cangdiancode",
type : "string"
}, {
name : "cangdianname",
type : "string"
}, {
name : "custname",
type : "string"
}, {
name : "createdate",
type: 'string'
}, {
name : "chargeman",
type : "string"
}, {
name : "status",
type : "string"
}]));

var processproxy = new Ext.data.HttpProxy({
url : '../cangdianList.action'
});

var processstore = new Ext.data.Store({
proxy : processproxy,
reader : processreader
});
//---------------功能狀態欄----------------------------------
var pagingBar = new Ext.PagingToolbar({
pageSize : 10,
store : processstore,
displayInfo : true,
displayMsg : '显示记录 {0} - {1} of {2}',
emptyMsg : "没有记录",
items :['-',{
text:"新增",
iconCls: 'addicon',icon:'Images/icons/add.png',
enableToggle: true
},'-',{
xtype:'button',
text:"excel导出",
iconCls:'excelIcon',
tooltip:'把数据导出到excel'
//handler:exportExcel
}
]
});

//---------------功能狀態欄----------------------------------
var processgrid = new Ext.grid.GridPanel({
id : 'processPanel',
el:'mygrid',
store : processstore,
cm : cm,
sm : sm,
//title : '流程列表',
//region : 'center',
autoExpandColumn : 'cangdiancode',
//stripeRows : true,
bbar : pagingBar
});
processgrid.render();//不可以在gridpanel中renderTo,数据会看不见的,要用grid.render()
//----------------------此部分要放在render後面--------------------------------------
function addHand(btn, pressed){

//$('method').value="add";
//clear();
addcangdian();//----------display-formpanel--------------
//$('username').readOnly=false;
//$('btnDiv').style.display="";
processgrid.getView().refresh();//刷新grid数据
}
// 修改操作事件------------------------------
var editHand = function() {
//editcangdian();
//alert("ssss");
loadFormData(processgrid);
};
// 分页工具栏按钮--新建事件------------------------------------------------------
//var ptb_bt1 = function() {
//myFormWin();
//};

// 删除事件-------------------------------------
var deleteHand = function() {
var _record = processgrid.getSelectionModel().getSelected();
if (_record) {//判断是否有行被选择
Ext.MessageBox.confirm('确认删除', '你确认要删除这条数据吗？', function(btn) {
if (btn == "yes") {
var m = processgrid.getSelections();//所有被选择的行
var jsonData = "";//
for (var i = 0, len = m.length;i < len; i++) {
//Ext.Msg.alert("message",m[i].get("fid"));
var ss = m[i].get("fid");
if (i == 0) {
jsonData = jsonData + ss;
} else {
jsonData = jsonData + "," + ss;
}
//Ext.Msg.alert("message",jsonData);
processstore.remove(m[i]);
}
processstore.load( {
params : {
start : 0,
limit : 10,
delData : jsonData//这里是向服务器段发送的数据信息，一般采用JSON协议，这儿直接采用，只发送用逗号分割的ID号序列，以方便
}
});

// Ext.example.msg('---删除操作---', '你删除的数据是');
}
});
} else {
Ext.Msg.alert('删除操作', '请选择要删除的数据项！');
}
};
pagingBar.add('-', {
pressed: false,
enableToggle:true,
text: '新增',
cls: 'x-btn-text-icon add',
toggleHandler: addHand
});

pagingBar.add('-', {
pressed: false,
enableToggle:true,
text: '編輯',
cls: 'x-btn-text-icon edit',
toggleHandler: editHand
});

pagingBar.add('-', {
pressed: false,
enableToggle:true,
text: '刪除',
cls: 'x-btn-text-icon del',
toggleHandler: deleteHand
});

// 载入被选择的数据行的表单数据----------------------------------

var loadFormData = function(processgrid) {
var _record = processgrid.getSelectionModel().getSelected();
if (!_record) {//这里判断是否有行已经被选择
Ext.Msg.alert('修改操作', '请选择要修改的一项！');
} else {
//Ext.Msg.alert('kkk',_record.data['fid']);
editcangdian(_record.data['fid']);
//myFormWin();
//form1.form.load( {
// url : 'LoadLevel.action?level.levelid='
// + _record.get('levelid'),
// waitMsg : '正在载入数据...',

// failure : function() {
// Ext.example.msg('编辑', '载入失败');
// },
// success : function() {
// Ext.example.msg('编辑', '载入成功！');
// }
// });
}
}

//----------------------此部分要放在render後面-結束-------------------------------------
processstore.load(storeParams);

});
//其中返回的JsonResult是类似如下的字符串
// {"totalSize":2,"data":[{"creator":"admin","isdeploy":" 否","flowname":"..............","createtime":"2009-03-30 16:45:20.157","flowid":"9"},
// {"creator":"admin","isdeploy":" 否","flowname":".............","createtime":"2009-03-30 16:50:01.233","flowid":"11"}]}

[color=darkred]5.add ext js[/color]
var cangdianGrid;
// 在TabPanel中的Add按钮触发的事件，用来添加一条新信息
var addcangdian = function() {
var form1, win;
if (!form1) {
form1 = new Ext.form.FormPanel({
//baseCls : 'x-plain',
defaults : {
width : 600
},
monitorValid : true,// 把有formBind:true的按钮和验证绑定
//baseCls : 'x-plain',
//renderTo : document.body,
labelAlign : 'right',
//title : '表单例子',
buttonAlign : 'right',
bodyStyle : 'padding:5px',
width : 600,
//frame : true,
labelWidth : 80,
//autoHeight:true,
//autoWidth:true,
//height:500,
defaultType : 'textfield',
//bodyStyle:'padding:5px 5px 0',
//frame : false,
id:'cangdianform',
//width:600,
items: [
{
xtype:"panel",//不加此属性将无法显示
layout:'column',
border:false,
labelSeparator : '：',// 标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。
//height:240,
//width:300,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [
{
xtype:'textfield',
fieldLabel: '選擇客戶',
name: 'vmi.fcustsort',
//hiddenName:'project1',
allowBlank:false,
anchor:'95%'
},
{
xtype:'hidden',
fieldLabel: '選擇客戶',
name: 'vmi.fcustcode',
//hiddenName:'project1',
allowBlank:true
},
{
//style : 'margin-top:5px',// 设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。
xtype:'textfield',
fieldLabel: '倉點名稱',
name: 'vmi.fstockname',
anchor:'95%'
},
new Ext.form.ComboBox({ //select
fieldLabel:'目前狀態',
editable:false,
triggerAction: 'all',
valueField:'value',
displayField:'text',
mode: 'local',
store:new Ext.data.SimpleStore({
fields:['value', 'text'],
data:[['1', '未啟用'], ['2', '已啟用'], ['3', '禁用']]
}),
//store:comboxjsonstore,
hiddenName:'vmi.fstatus',//提交到后台的input的name
anchor:'95%'
}), {
xtype:'textfield',
fieldLabel: '負責人',
name: 'vmi.fchargeman',
anchor:'95%'
}]
},{
xtype:"panel",//不加此属性将无法显示
columnWidth:.5,
layout: 'form',
border:false,
items: [
{
xtype:'textfield',
fieldLabel: '倉點地址',
name: 'vmi.faddress',
allowBlank:false,
anchor:'95%'
},
{
xtype:'textfield',
fieldLabel: '倉點編號',
name: 'vmi.fstockcode',
anchor:'95%'
},{
xtype:'datefield',
fieldLabel: '啟用日期',
name: 'vmi.fstartdate',
format:'Y-m-d',
//disabledDays:[0,6],
//vtype:'email',
anchor:'95%'
},
{
xtype:'hidden',
fieldLabel: '新增日期',
name: 'vmi.finsertdate'
//format:'Y-m-d'
//value:new Date()
//disabledDays:[0,6],
//vtype:'email',
},
{
xtype:'hidden',
fieldLabel: '新增用戶',
name: 'vmi.finsertuser',
value:'erick'
},
{
xtype:'textfield',
fieldLabel: '聯繫電話',
name: 'vmi.ftel',
anchor:'95%'
}]
}]
},
{
xtype:'textarea',
fieldLabel: '備註',
name: 'vmi.fremarks',
allowBlank:false,
anchor:'85%'
},
{
xtype:'tabpanel',
plain:true,//将标签页头的背景设置为透明的
activeTab: 0,//当前活动的标签页是第一页
height:245,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}
],
//上面items是表单，下面buttons是按钮
buttons: [{
text: '提交',
//type:'button',
type:'submit',
formBind : true,
id:'submitButton',
handler: function()
{
if (form1.form.isValid()) {// 验证合法后使用加载进度条
//this.disabled = true;
Ext.MessageBox.show({
title : '请稍等',
msg : 'loading...',
progressText : '',
width : 300,
progress : true,
closable : false,
animEl : 'loading'
});
// 控制进度速度
var f = function(v) {
return function() {
var i = v / 11;
Ext.MessageBox.updateProgress(i, '');
};
};
for (var i = 1; i < 12; i++) {
setTimeout(f(i), i * 150);
}

// 提交到服务器操作
form1.form.doAction('submit', {
url : 'cangdianadd.action',// 提交路径
method : 'POST',// 提交方法post或get
params : '',
reset : true,
// 提交成功的回调函数
success : function(form, action) {
Ext.Msg.alert('信息',action.result.data);
// this.disabled = false;
//win.close();
},

// 提交失败的回调函数
failure : function() {
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
}, {
text : '取消',
handler : function() {
form1.form.reset();
//win.hide();
win.close();
}// 重置表单
}],
//items : [ {
// fieldLabel : 'Title',
// name : 'title'
//}, {
// fieldLabel : 'Contents',
// xtype : 'htmleditor',
// anchor : '95%',
// allowBlank : false,
// height : 200,
// name : 'contents'
//}],
labelWidth : 80,
region : 'center'
});
}

if (!win) {
win = new Ext.Window( {
//closeAction :'hide',
//closable:true,
// buttons : [ {
//handler : function() {
//if (form1.form.isValid()) {
//this.disabled = true;
//form1.form.doAction('submit', {
//url : 'ext_add_submit.jsp',
//url:'../cangdianAdd.action',
//method : 'post',
//params : '',
//waitMsg : 'Please Wait...',
//reset : true,
// success : function(form, action) {
// Ext.Msg.alert('操作',action.result.data);
// this.disabled = false;
// },
// failure : function() {
// Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
// this.disabled = false;
// }
// });

//form.submit( {
//waitMsg : 'Please Wait',
// reset : true,
// success : Login.Success,
//scope : addZhaii
// });

//方法二，实现非AJAX提交表单一定要加下面的两行！
//onSubmit : Ext.emptyFn,
//submit : function() {
//再次设定action的地址
//this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';
//this.getEl().dom.action = '../cangdianAdd.action';
//this.getEl().dom.method = 'post';
//提交submit
//this.getEl().dom.submit();
//},
// }
// },
// scope : this,
// text : 'Add'
// }, {
//handler : function() {
// win.hide();
// },
// scope : this,
// text : 'Cancel'
// }],
//closable : true,
//draggable : true,
//id : 'addZhaii-win',
//resizable : true,

draggable : true,
layout: 'border',
width:620,
height:550,
//closeAction :'hide',
modal:true,
closable: true,
resizable:true,
plain: true,
border: false,
title:'新增',
bodyStyle:'padding:5px;',
buttonAlign:'center',
items:form1
});
}

//form = form1.getForm();

win.show();
};

//----------------------------------------下面的没用到-------------------------------

var addZhaiiAction = new Ext.Action( {
text : 'Add Zhaii',
//handler : addZhaii, // 触发上面定义的添加事件
iconCls : 'blist'
});
var addZhaiiTab = function() {
var expander = new Ext.grid.RowExpander( {
tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
'<p><b>Contents:</b> {contents}</p>')
});
var cm = new Ext.grid.ColumnModel([expander, {
header : 'id',
dataIndex : 'id'
}, {
header : 'title',
width : 300,
dataIndex : 'title'
}, {
header : 'zhaier',
dataIndex : 'zhaier'
}, {
header : 'date',
dataIndex : 'date'
}, {
header : 'sc',
dataIndex : 'sc'
}, {
header : 'hh',
dataIndex : 'hh'
}]);
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '../../getZhaii.do'
}),
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : 'content'
}, {
name : 'hh'
}, {
name : 'sc'
}, {
name : 'date'
}, {
name : 'zhaier'
}, {
name : 'title'
}, {
name : 'id'
}])
});
ds.load( {
params : {
start : 0,
limit : 10
}
});
if (Ext.isEmpty(cangdianGrid)) {
cangdianGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'cangdianGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'cangdianGrid',
iconCls : 'icon-grid',
closable : true,
// top处添加事件按钮
tbar : [addZhaiiAction],
// bottom处的分页栏
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: '没有记录'
})
});
// .show()了才会显示
centerPanel.add(cangdianGrid).show();
} else if (cangdianGrid = centerPanel.getItem('cangdianGrid')) {
// cangdianGrid.show();
} else {
cangdianGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'cangdianGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'adsfasd',
iconCls : 'icon-grid',
closable : true,
tbar : [addZhaiiAction],
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: '没有记录'
})
});
centerPanel.add(cangdianGrid).show();
}
}
// 给link1添加事件
//Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时，便添加cangdianTab
//addZhaiiTab();

[color=darkred]6.edit ext js[/color]

var cangdianGrid;
// 在TabPanel中的Edit按钮触发的事件，用来编辑一条新信息（和Add相比多了 load /reader,其它不变）
var editcangdian = function(fid) {
var form1, win;
if (!form1) {
form1 = new Ext.form.FormPanel({
//baseCls : 'x-plain',
defaults : {
width : 600
},
monitorValid : true,// 把有formBind:true的按钮和验证绑定
//baseCls : 'x-plain',
//renderTo : document.body,
labelAlign : 'right',
//title : '表单例子',
buttonAlign : 'right',
bodyStyle : 'padding:5px',
width : 600,
//frame : true,
labelWidth : 80,
//autoHeight:true,
//autoWidth:true,
//height:500,
defaultType : 'textfield',
//bodyStyle:'padding:5px 5px 0',
//frame : false,
id:'cangdianform',
//url:'addcangdian.action',
reader:_jsonFormReader,
//width:600,
items: [
{
xtype:"panel",//不加此属性将无法显示
layout:'column',
border:false,
labelSeparator : '：',// 标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。
//height:240,
//width:300,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [
{
xtype:'textfield',
fieldLabel: '選擇客戶',
name: 'vmi.fcustsort',
//hiddenName:'project1',
allowBlank:false,
anchor:'95%'
},
{
xtype:'hidden',
fieldLabel: '選擇客戶',
name: 'vmi.fcustcode',
//hiddenName:'project1',
allowBlank:true
},
{
//style : 'margin-top:5px',// 设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。
xtype:'textfield',
fieldLabel: '倉點名稱',
name: 'vmi.fstockname',
anchor:'95%'
},
new Ext.form.ComboBox({ //select
fieldLabel:'目前狀態',
editable:false,
triggerAction: 'all',
valueField:'value',
displayField:'text',
mode: 'local',
store:new Ext.data.SimpleStore({
fields:['value', 'text'],
data:[['1', '未啟用'], ['2', '已啟用'], ['3', '禁用']]
}),
//store:comboxjsonstore,
hiddenName:'vmi.fstatus',//提交到后台的input的name
anchor:'95%'
}), {
xtype:'textfield',
fieldLabel: '負責人',
name: 'vmi.fchargeman',
anchor:'95%'
}]
},{
xtype:"panel",//不加此属性将无法显示
columnWidth:.5,
layout: 'form',
border:false,
items: [
{
xtype:'textfield',
fieldLabel: '倉點地址',
name: 'vmi.faddress',
allowBlank:false,
anchor:'95%'
},
{
xtype:'textfield',
fieldLabel: '倉點編號',
name: 'vmi.fstockcode',
anchor:'95%'
},{
xtype:'datefield',
fieldLabel: '啟用日期',
name: 'vmi.fstartdate',
format:'Y-m-d',
//disabledDays:[0,6],
//vtype:'email',
anchor:'95%'
},
{
xtype:'hidden',
fieldLabel: '新增日期',
name: 'vmi.finsertdate'
//format:'Y-m-d'
//value:new Date()
//disabledDays:[0,6],
//vtype:'email',
},
{
xtype:'hidden',
fieldLabel: '新增用戶',
name: 'vmi.finsertuser',
value:'erick'
},
{
xtype:'textfield',
fieldLabel: '聯繫電話',
name: 'vmi.ftel',
anchor:'95%'
}]
}]
},
{
xtype:'textarea',
fieldLabel: '備註',
name: 'vmi.fremarks',
allowBlank:false,
anchor:'85%'
},
{
xtype:'tabpanel',
plain:true,//将标签页头的背景设置为透明的
activeTab: 0,//当前活动的标签页是第一页
height:245,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}
],
//上面items是表单，下面buttons是按钮
buttons: [{
text: '提交',
//type:'button',
type:'submit',
formBind : true,
id:'submitButton',
handler: function()
{
if (form1.form.isValid()) {// 验证合法后使用加载进度条
//this.disabled = true;
Ext.MessageBox.show({
title : '请稍等',
msg : 'loading...',
progressText : '',
width : 300,
progress : true,
closable : false,
animEl : 'loading'
});
// 控制进度速度
var f = function(v) {
return function() {
var i = v / 11;
Ext.MessageBox.updateProgress(i, '');
};
};
for (var i = 1; i < 12; i++) {
setTimeout(f(i), i * 150);
}

// 提交到服务器操作
form1.form.doAction('submit', {
url : 'cangdianadd.action',// 提交路径
method : 'POST',// 提交方法post或get
params : '',
reset : true,
// 提交成功的回调函数
success : function(form, action) {
Ext.Msg.alert('信息',action.result.data);
// this.disabled = false;
//win.close();
},

// 提交失败的回调函数
failure : function() {
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
}, {
text : '取消',
handler : function() {
form1.form.reset();
//win.hide();
win.close();
}// 重置表单
}],
//items : [ {
// fieldLabel : 'Title',
// name : 'title'
//}, {
// fieldLabel : 'Contents',
// xtype : 'htmleditor',
// anchor : '95%',
// allowBlank : false,
// height : 200,
// name : 'contents'
//}],
labelWidth : 80,
region : 'center'
});

//-----------------------last load data from server----------------

form1.form.load( {
url : 'cangdianedit.action?vmi.fid='+fid,//var _record = processgrid.getSelectionModel().getSelected();
waitMsg : '正在载入数据...',
failure : function() {
Ext.Msg.alert('编辑', '载入失败');
},
success : function() {
//Ext.Msg.alert('编辑', '载入成功！');
}
});
}

if (!win) {
win = new Ext.Window( {
//closeAction :'hide',
//closable:true,
// buttons : [ {
//handler : function() {
//if (form1.form.isValid()) {
//this.disabled = true;
//form1.form.doAction('submit', {
//url : 'ext_add_submit.jsp',
//url:'../cangdianAdd.action',
//method : 'post',
//params : '',
//waitMsg : 'Please Wait...',
//reset : true,
// success : function(form, action) {
// Ext.Msg.alert('操作',action.result.data);
// this.disabled = false;
// },
// failure : function() {
// Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
// this.disabled = false;
// }
// });

//form.submit( {
//waitMsg : 'Please Wait',
// reset : true,
// success : Login.Success,
//scope : addZhaii
// });

//方法二，实现非AJAX提交表单一定要加下面的两行！
//onSubmit : Ext.emptyFn,
//submit : function() {
//再次设定action的地址
//this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';
//this.getEl().dom.action = '../cangdianAdd.action';
//this.getEl().dom.method = 'post';
//提交submit
//this.getEl().dom.submit();
//},
// }
// },
// scope : this,
// text : 'Add'
// }, {
//handler : function() {
// win.hide();
// },
// scope : this,
// text : 'Cancel'
// }],
//closable : true,
//draggable : true,
//id : 'addZhaii-win',
//resizable : true,

draggable : true,
layout: 'border',
width:620,
height:550,
//closeAction :'hide',
modal:true,
closable: true,
resizable:true,
plain: true,
border: false,
title:'新增',
bodyStyle:'padding:5px;',
buttonAlign:'center',
items:form1
});
}

//form = form1.getForm();

win.show();
};
//用窗体Form的JsonReader对象，修改时数据载入解析---------------------------------------------------------
var _jsonFormReader = new Ext.data.JsonReader( {
root : 'data',
totalProperty : 'totalSize',
//id : 'levelid',
successProperty : '@success'
}, [{
name : "vmi.fcustsort", //客户
mapping:'fcustsort',
type : "string"
}, {
name : "vmi.fcustcode",
mapping:'fcustcode',
type : "string"
}, {
name : "vmi.fstockname",
mapping:'fstockname',
type : "string"
}, {
name : "vmi.fstatus",
mapping:'fstatus',
type : "string"
}, {
name : "vmi.fchargeman",
mapping:'fchargeman',
type: 'string'
}, {
name : "vmi.faddress",
mapping:'faddress',
type : "string"
}, {
name : "vmi.fstockcode",
mapping:'fstockcode',
type : "string"
}
//, {//时间会报错(保存时)
//name : "vmi.fstartdate",
// mapping:'fstartdate',
// type : "string"
//}, {
//name : "vmi.finsertdate",
//mapping:'finsertdate',
// type : "string"
//}
, {
name : "vmi.finsertuser",
mapping:'finsertuser',
type : "string"
}, {
name : "vmi.ftel",
mapping:'ftel',
type : "string"
}, {
name : "vmi.fremarks",
mapping:'fremarks',
type : "string"
}]);

//----------------------------------------下面的没用到-------------------------------

var addZhaiiAction = new Ext.Action( {
text : 'Add Zhaii',
//handler : addZhaii, // 触发上面定义的添加事件
iconCls : 'blist'
});
var addZhaiiTab = function() {
var expander = new Ext.grid.RowExpander( {
tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
'<p><b>Contents:</b> {contents}</p>')
});
var cm = new Ext.grid.ColumnModel([expander, {
header : 'id',
dataIndex : 'id'
}, {
header : 'title',
width : 300,
dataIndex : 'title'
}, {
header : 'zhaier',
dataIndex : 'zhaier'
}, {
header : 'date',
dataIndex : 'date'
}, {
header : 'sc',
dataIndex : 'sc'
}, {
header : 'hh',
dataIndex : 'hh'
}]);
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '../../getZhaii.do'
}),
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : 'content'
}, {
name : 'hh'
}, {
name : 'sc'
}, {
name : 'date'
}, {
name : 'zhaier'
}, {
name : 'title'
}, {
name : 'id'
}])
});
ds.load( {
params : {
start : 0,
limit : 10
}
});
if (Ext.isEmpty(cangdianGrid)) {
cangdianGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'cangdianGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'cangdianGrid',
iconCls : 'icon-grid',
closable : true,
// top处添加事件按钮
tbar : [addZhaiiAction],
// bottom处的分页栏
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: '没有记录'
})
});
// .show()了才会显示
centerPanel.add(cangdianGrid).show();
} else if (cangdianGrid = centerPanel.getItem('cangdianGrid')) {
// cangdianGrid.show();
} else {
cangdianGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'cangdianGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'adsfasd',
iconCls : 'icon-grid',
closable : true,
tbar : [addZhaiiAction],
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: '没有记录'
})
});
centerPanel.add(cangdianGrid).show();
}
}
// 给link1添加事件
//Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时，便添加cangdianTab
//addZhaiiTab();

[color=darkred]7.delete ext js[/color]

包含在list js中

[color=darkred]8.用到的类在另一编文章[/color]