extjs 小总结
/* Ext.Msg.show({
title: "错误信息",
msg:"命名重复",
buttons:Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});*/ =================也可以返回数据
success: function( result, request ){
console.log(result, request)
//grid.store.loadData(parseJson(result.responseText));
}, ========js=============
failure : function(form, action) {
if(action.result.error == 'name'){
Ext.MessageBox.alert('Failed', '文件名重复,请更换。');
return;
}
if(action.result.error == 'type'){
Ext.MessageBox.alert('Failed', '文件名重复,请更换。');
return;
}
} ========action===========
$filename = $this->db->where('filename',$xmlfile)->get('interface_template')->row('id');
if($filename){
echo "{error:'name'}";
return;
} =====================
//处理checkbox的勾选事件
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
alert('勾选了checkbox后，获得选中行的name:'+grid.store.getAt(rowIdx).get('inter_name'));
});
//处理checkbox的取消勾选事件
grid.getSelectionModel().on('rowdeselect', function(sm, rowIdx, r){
alert('取消勾选checkbox后，获得的record 中的name:'+grid.store.getAt(rowIdx).get('inter_opt_type'));
});
//获取checkbox的值
function modfiy(){
if (grid.getSelectionModel().hasSelection()){
var records=grid.getSelectionModel().getSelections();
var mycars=new Array();
for(var i=0;i<records.length;i++){
mycars[i]=records[i].data.xwbh;
}
alert(mycars.length);
return mycars
}else{
alert('请选中要操作的记录!');
}
};
function deleteall(){
var values=modfiy();
Ext.MessageBox.confirm( "请确认", "是否要删除选中信息", function(button,text){
if(button=='yes'){
Ext.Ajax.request({
url:'news_query.do',
method:'post',
params:{values:values},
success:function(req){
var responseObj = Ext.util.JSON.decode(req.responseText);
if(responseObj.success == 'true'){
Ext.Msg.alert("成功提示", responseObj.infor);
}else{
Ext.Msg.alert("错误提示", responseObj.infor);
return;
}
}
});
}else{
return;
}
});
} ====================
windown 里面嵌套两个 form 一个from里面嵌套一个grid
Ext.onReady(function(){
var _docview = new DocViewPanel() ;
var win;
var button = Ext.get('addButton');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
//layout:'fit',
650,
autoHeight: true,
closeAction:'hide',
plain: true,
items:[
form,gridform
],
buttons: [{
text: 'Save',
handler: function(){
if(gridform.getForm().isValid()){
gridform.getForm().submit({
url: 'file-upload.php',
waitMsg: 'Uploading your photo...',
success: deleteall()//function(fp, o){
//msg('Success', 'Processed file "'+o.result.file+'" on the server');
/*Ext.Ajax.request({
url : '/GameImprotMgr/QueryImport' ,
params : { action : 'getDate'},
method: 'get',
success: function ( result, request ) {
//init(result.responseText);
showGrid(result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', '获取信息失败');
}
});
}*/,
failure : function(grid, action) {
alert("上传失败");
}
});
}
}
/* },{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}*/
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
}) ; =====================
上传：
//上传文件
function do_upload()
{
$xmlfile = $this->input->post("xmlfile"); //获取值。
$gameid= $this->input->post("gameid");
//判断文件名称是否存在
$filename = $this->db->where('filename',$xmlfile)->get('interface_template')->row('id');
if($filename){
echo "{error:'name'}";
return;
}
$config['upload_path'] = 'system/uploads/'; //配置上传相关信息。
$config['allowed_types'] = 'xml';
$config['max_size'] = '1000';
$config['overwrite'] = true;
//$config['encrypt_name'] = true;
//$config['file_name'] = $gameid;
$this->load->library('upload',$config);
$ret=$this->upload->do_upload();
if (!$ret)
{
echo "{error:'type'}";
return;
}
}
==============================
将grid嵌套在form里面
var grid;
//测试使用
var data ="[['3','90','HUG','hug_idip.xml','2012-01-02 11:38:08','']]";
var ds = new Ext.data.Store({ //定义本地数据缓存器。
proxy:new Ext.data.MemoryProxy(parseJson(data)), //代理读取器。
reader:new Ext.data.ArrayReader({}, //数组读取器 用这个把上边定义好的data通过代理器读进来。
[
{name:'id',mapping:0}, //定义数据集中的字段name是字段名称，mapping是data数据中的位置映射。
{name:'inter_name',mapping:1},
{name:'inter_opt_type',mapping:2} /*,
{name:'filename',mapping:3},
{name:'uploadtime',mapping:4},
{name:'operator',mapping:5},
{name:'opt',convert:opt}*/
])
});
ds.load(); //载入数据。
var sm = new Ext.grid.CheckboxSelectionModel(); //创建一个复选框。
var colModel = new Ext.grid.ColumnModel([ //创建GridPanel中的列集合。
new Ext.grid.RowNumberer(), //自动编号。
sm, //复选框。
{header:'接口名称',dataIndex:'inter_name'}, //这个编号是ds中的创建的id。
{header:'接口类型',dataIndex:'inter_opt_type'}/*,
{header:'文件名称',dataIndex:'filename'},
{header:'更新时间',dataIndex:'uploadtime'},
{header:'操作员',dataIndex:'operator'},
{header:'操作',dataIndex:'opt'}*/
]);
grid = new Ext.grid.GridPanel({store:ds, //创建GridPanel 并设置store数据。
cm:colModel, //绑定行。
sm:sm, //复选框，有了这个可以全选
650,
height:200,
//title:'导入文件信息'
});
//grid.render('import'); //开始渲染，grid-div 是一个html页面中的一个div标签的ID。
var gridform = new Ext.FormPanel({
id: 'import',
//frame: true,
//labelAlign: 'left',
title:'请选择接口',
// bodyStyle:'padding:5px',
// 750,
//layout: 'column', // Specifies that the items will now be arranged in columns
items: [
grid
]
}); ==========================================
单独form pannel
Ext.MyForm=Ext.extend(Ext.form.FormPanel ,{
xtype:"formpanel",
title:"",
labelWidth:100,
labelAlign:"left",
layout:"absolute",
height:50,
650,
fileUpload : true,
id:"uploadform",
x:0,
y:0,
frame:true,
initComponent: function(){
this.items=[
{
xtype:"label",
text:"文件名称：",
x:10,
y:10
},
{
xtype:"textfield",
name:"userfile",
id:"userfile",
x:70,
y:6,
250,
inputType:"file"
},
{
xtype:"textfield",
x:390,
name:"gameid",
id:"gameid",
y:6,
50
},
{
xtype:"button",
text:" 读取...",
x:470,
y:6,
30,
//handler : submit ,
listeners:{
'click':function(){
if(Ext.getCmp("userfile").getValue()=="")
{
alert("你还没有选择要导入的文件！");
return;
}
if(Ext.getCmp("gameid").getValue()=="")
{
alert("业务编号不能为空！");
return;
}
/*Ext.Ajax.request({
url : '/DocViewMgr/CheckFileName' ,
method: 'post',
headers: {
'enctype': 'multipart/form-data'
},
success: function ( result, request ) {
datastr=result.responseText;
Ext.MessageBox.alert("success",datastr);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', '获取信息失败');
}
}); */
Ext.getCmp("uploadform").getForm().submit({
params : {
xmlfile : Ext.getCmp("userfile").getValue()
},
url : "ViewTemplate/do_upload",
method : "POST",
fileUpload:true,
success : function(form, action) {
Flushtab();
alert("上传成功！");
},
failure : function(form, action) {
if(action.result.error == 'name'){
Ext.MessageBox.alert('Failed', '文件名重复,请更换。');
return;
}
if(action.result.error == 'type'){
Ext.MessageBox.alert('Failed', '文件名重复,请更换。');
return;
}
}
});
}
}
},
{
xtype:"label",
text:"业务编号：",
x:330,
y:10
}
]
Ext.MyForm.superclass.initComponent.call(this);
}
});
var form=new Ext.MyForm(); ===============================
比较大一点的一个pannel 里面可以直接利用handler指定函数
DocViewPanel = Ext.extend(Ext.idip.CrudPanel, {
baseUrl: '/ViewTemplate',
storeMapping: ["id","name","en_name","opt_type","gameid"],
ID: "id",
render_div:'docview-div',
toolbar : {},
mark : 1,
createForm: function(){
var formPanel = new Ext.form.FormPanel({
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:65,
baseCls:"x-plain",
//锚点布局-
defaults:{anchor:"90%",msgTarget:"side"},
buttonAlign:"center",
bodyStyle:"padding:0 0 0 0",
monitorValid : true,
items:[{
name:"name",
fieldLabel:"<font color=red>接口名称</font>",
allowBlank:false,
blankText:"类别名称不允许为空",
readOnly:false
},{
name: "opt_type",
fieldLabel:"<font color=red>接口类型</font>",
allowBlank:true
},{
name: "en_name",
fieldLabel:"<font color=red>英文名称</font>",
allowBlank:true
},{
name: "gameid",
xtype: "hidden"
},{
name: "id",
xtype: "hidden"
}]
});
return formPanel;
},
createWin: function(status){
return this.initWin(245, 300, status);
},
constructor: function(){
this.sm = '';
this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//获得行号
{
header:" <font color=red>接口名称</font>",
tooltip:"接口的中文名称",
dataIndex:"name",
sortable:false,
menuDisabled : true,
align:'left',
resizable:false,
200
},{
header:" <font color=red>接口类型</font>",
tooltip:"接口类型",
dataIndex:"opt_type",
sortable:false,
menuDisabled : true,
align:'left',
resizable:false,
200
},{
header:" <font color=red>英文名称</font>",
tooltip:"接口的英文名称",
dataIndex:"en_name",
sortable:false,
menuDisabled : true,
align:'left',
resizable:false,
200
},{
header:'业务ID',
dataIndex:'gameid',
menuDisabled : false,
align:'center',
10,
resizable:false,
hidden:true
},{
header:'编号',
dataIndex:'id',
menuDisabled : false,
align:'center',
10,
resizable:false,
hidden:true
}
]);
this.toolbar = [{
id: 'addinterface',
text: '添加接口',
iconCls: 'add',
tooltip: this.addtooltip,
handler: this.addinterface,
scope: this
}, '-',{
id: 'modifyinterface',
text: '修改接口',
iconCls: 'modify2',
//tooltip: this.addtooltip,
handler: this.modifyinterface,
scope: this
}, '-',{
id: 'delinterface',
text: '删除接口',
iconCls: 'remove',
//tooltip: this.addtooltip,
handler: this.delinterface,
scope: this
}, '-',{
id: 'addButton',
text: '导入',
iconCls: 'add',
// tooltip: this.addtooltip,
// handler: this.upload,
scope: this
}, '-',{
id: 'viewfileinfo',
text: '查看文件信息',
iconCls: 'view',
menu : [{
text : '查看接口基本信息' ,
handler : this.onViewBaseDetail ,
scope : this
},'-',{
text : '查看接口详细信息',
handler : this.onViewDetail,
scope : this
},'-',{
text : '查看模板详细信息',
handler : this.onViewFileDetail,
scope : this
}]
},'-',{
id:'help',
text : '帮助' ,
iconCls : 'con-add',
handler: this.help,
scope: this
/* },'-',{
id:'download',
text : '帮助' ,
iconCls : 'download',
handler: this.onDownLoad,
scope: this
*/
},'-',{
text: '刷新',
iconCls: 'refresh',
tooltip: this.refreshtooltip,
handler: this.onRefresh,
scope: this
}];
DocViewPanel.superclass.constructor.call(this);
} ,
onGetGrid : function(){
return this.gridPanel;
},
onGetWhat : function(what){
gridpanel = this.onGetGrid();
if(gridpanel.selModel.hasSelection()){
var record = gridpanel.selModel. getSelected().get(what);
return record;
}
else
return 0;
},
addinterface:function()
{
var postWindow = new Ext.Window({
title: '添加接口',
1000,
height:450,
collapsible:true,
maximizable:true,
layout: 'fit',
closeAction : 'hide',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=/IdipMgr/add_template></iframe>'
});
postWindow.show();
},
modifyinterface:function()
{
var id = this.onGetWhat('id');
if (id) {
var postWindow = new Ext.Window({
title: '接口修改',
1000,
height:600,
collapsible:true,
maximizable:true,
layout: 'fit',
closeAction : 'hide',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=IdIpMgrEdit/edit_tem/'+id+'></iframe>'
});
postWindow.show();
} else {
Ext.Msg.alert('错误', '请选择一条记录查看！');
}
},
/*upload : function(){
},*/
onViewFileDetail:function()
{
var postWindow = new Ext.Window({
title: '查看模板详细信息',
550,
height:300,
collapsible:true,
maximizable:true,
layout: 'fit',
closeAction : 'hide',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=/DocViewMgr/ViewFileDetail/'+id+'></iframe>'
});
postWindow.show();
},
onViewBaseDetail:function()
{
var id = this.onGetWhat('id');
if (id) {
var postWindow = new Ext.Window({
title: '查看接口基本信息',
250,
height:180,
collapsible:true,
maximizable:true,
layout: 'fit',
closeAction : 'hide',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=/InterfaceMgr/InterfaceView_tem/'+id+'></iframe>'
});
postWindow.show();
} else {
Ext.Msg.alert('错误', '请选择一条记录查看！');
}
},
onViewDetail:function()
{
var id = this.onGetWhat('id');
var gameid = this.onGetWhat('gameid');
if (id) {
var postWindow = new Ext.Window({
title: '查看接口详细信息',
400,
height:400,
collapsible:true,
maximizable:true,
layout: 'fit',
closeAction : 'hide',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=/InterfaceMgr/InterFaceViewDetail_tem/'+id+'/'+gameid+'></iframe>'
});
postWindow.show();
} else {
Ext.Msg.alert('错误', '请选择一条记录查看！');
}
},
onDownLoad:function()
{
var id = this.onGetWhat('id');
var gameid = this.onGetWhat('gameid');
if (id) {
// document.getElementById("downlogDir").value = "public/xmlpath/";
document.getElementById("fileid").value = id;
$('#downform').submit();
/*Ext.Ajax.request({
url : '/DocViewMgr/DownLoad' ,
method: 'post',
headers: {
'enctype': 'multipart/form-data'
},
success: function ( result, request ) {
datastr=result.responseText;
Ext.MessageBox.alert("success",datastr);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', '获取信息失败');
}
}); */
} else {
Ext.Msg.alert('错误', '请选择一条记录查看！');
}
},
onEdit:function()
{
this.onViewFileDetail();
}
});