動態加載表單數據的例子

<script type="text/javascript">
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
  
var cm=new Ext.grid.ColumnModel([  
sm,
{
header : "員工編號",
dataIndex : "eid",
sortable:true
}, {
header : "員工姓名",
dataIndex : "ename"
}, {
header : "郵箱",
dataIndex : "eemail"
}, {
header : "地址",
dataIndex : "eaddress"
}, {
header : "工資",
dataIndex : "salary"
},{
header:"部門",
dataIndex:"did"
}
]) 
var store = new Ext.data.JsonStore({
url : 'getEmployeeWeb?id='+<%=id%>,
root : 'rows',
fields : ['did', 'eemail', 'eaddress', 'ename', 'eid', 'salary']
});
Ext.onReady(function() {
store.load({ params: { start: 0, limit: 2 }});
var grid = new Ext.grid.GridPanel({
id:'employeegrid',
renderTo : "employee",
title : "員工信息",
height : 635,
width : 900,
cm:cm,
store : store,
autoExpandColumn : 2,
sm:sm,
trackMouseOver:true,
stripeRows:true,
viewConfig: {   
                            forceFit:true ,//平均分配列
                             columnsText:"顯示/隱藏列",  
                    sortAscText:"正序排列",  
                    sortDescText:"倒序排列"  
            },
            //分頁
           bbar:new Ext.PagingToolbar({
           store:store,           //數據源
           pageSize:2,
           displayInfo:true,
           displayMsg:'當前記錄 {0} — {1} 條 共 {2} 條記錄', //顯示右下角信息
           emptyMsg:"No results to display",
           prevText:"上一頁",
           nextText:"下一頁",
           refreshText:"刷新",
           lastText:"最後頁",
           firstText:"第一頁",
           beforePageText:"當前頁",
           afterPageText:"共{0}頁"
                   }), 
                   tbar:  //工具條  
                [  
                {                      
                    text: '添加',  
                    handler: function(btn, pressed)  
                    {  
                          AddEmployeeInfo();       //添加新的員工信息  
                    }  
                }, '-',                 
                {                      
                    text: '修改',  
                    handler: function(btn, pressed)  
                    {    
                           var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections();//選擇行的個數  
                                 if(row.length==0)  
                                {  
                                    Ext.Msg.alert("提示信息","請您至少選擇一個!");  
                                }  
                                else if(row.length>1){    
                                    Ext.Msg.alert("提示信息","對不起隻能選擇一個!");  
                                }else if(row.length==1)  
                                {  
                                  editEmployee(row[0]);//傳行一行記錄直接加載 編輯角色信息
                                }                     
                    }  
                }, '-',                 
                {                      
                    text: '刪除',  
                    handler: function(btn, pressed)  
                    {  
                           var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections();    //獲取選中的行  
                            if(row.length==0)  
                            {  
                                Ext.Msg.alert("提示信息","請您至少選擇一個!");  
                            }  
                            else{    
                                Ext.Msg.confirm("提 示!","您確定要刪除嗎?",function(btn){   
                                    if(btn=="yes")  
                                    {  
                                       deleteEmployee(row[0]);//刪除角色信息  
                                    }  
                                    else 
                                    {  
                                         
                                    }  
                                })  
                            }   
                    }  
                }
                ], 
                  
listeners : {
// 點擊行彈出一個窗體
rowclick : function(grid, row) {
//doubleclick();
}
}
});
/*********************刪除員工信息****************************/
function deleteEmployee(record){
Ext.Ajax.request({
url : 'deleteEmployeeWeb',//Ajax請求路徑,返回success or false
params:{
eid:record.get("eid")
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系統提示","刪 除 成 功!");
//window.close();
store.reload();
}else{
Ext.Msg.alert("系統提示","刪 除 失 敗!");
//window.close();
}
}
}
})

/*********************編輯員工信息****************************/
function editEmployee(record) {
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
items : new Ext.FormPanel({
id : 'employee-form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,

items : [{
fieldLabel : '員工編號',
id:'id',
readOnly:true,
value : record.get("eid")
},
{
fieldLabel : '部門編號',
id:'did',
readOnly:true,
value : record.get("did")
},
{
fieldLabel : '姓名',
name : 'ename',
id:'ename',
value : record.get("ename")
},   {
fieldLabel : '郵箱',
name : 'eemail',
id:'eemail',
value : record.get("eemail")
},  {
fieldLabel : '地址',
id:'eaddress',
name : 'eaddress',
value : record.get("eaddress")
}, {
fieldLabel : '工資',
id:'salary',
name : 'salary',
value : record.get("salary")
},{
xtype : 'panel',
layout : 'fit',
id : 'loginform-btnpanel',
border : false 
}
],
buttons: [{
text: '保存',
handler:function(){
Ext.Ajax.request({
url : 'editEmployeeWeb',//Ajax請求路徑,返回success or false
params:{
id:document.getElementById("id").value+"/"+document.getElementById("ename").value+
'/'+document.getElementById("eemail").value+"/"+
document.getElementById("eaddress").value+"/"+
document.getElementById("salary").value+"/"+
document.getElementById("did").value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系統提示","修 改 成 功!");
window.close();
store.reload();
}else{
Ext.Msg.alert("系統提示","修 改 失 敗!");
window.close();
}
}
}
})
}
},{
text: '取消',
handler:function(){
window.close();
}
}]
}),
plain : true,
title : "個人詳細信息"
})
window.show();
}
});
/**************添加員工信息**********************/
function AddEmployeeInfo(){
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
plain : true,
title : "員工信息",
items:new Ext.FormPanel({
id : 'addEmployee_form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
baseCls:"x-plain",
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,
      items:[
      {
      name:"id",
      id:"id",
      xtype:"hidden",
      value:"<%=id%>"
      },
          {
          fieldLabel:"姓名",//文本框標題
            name:"ename",
            id:"ename"
          }
          ,
          {
          fieldLabel:"郵箱",//文本框標題
            name:"eemail",
            id:"eemail"
          }
          ,
          {
          fieldLabel:"地址",//文本框標題
            name:"eaddress",
            id:"eaddress"
          }
          ,
          {
          fieldLabel:"工資",//文本框標題
            name:"salary",
            id:"salary"
          }
      ],
     
      buttons:[{text:"確定",handler:function(){
      Ext.Ajax.request({
                                       //請求地址
                   url:'addEmployeeWeb',
                      //提交參數組
                      params: {
                        id:Ext.get('id').dom.value,
                          ename:Ext.get('ename').dom.value,
                          eemail:Ext.get('eemail').dom.value,
                          eaddress:Ext.get('eaddress').dom.value,
                          salary:Ext.get('salary').dom.value
                      },
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系統提示","修 改 成 功!");
window.close();
store.reload();
}else{
Ext.Msg.alert("系統提示","修 改 失 敗!");
window.close();
}
}
}
            });
     
      }},{text:"取消",handler:function(){window.close()}}]
})
})
window.show();
}
</script>

You May Also Like