makuixuan 发表于 2013-1-29 11:32:51

表单提交

extjs表单的提交

//ExtJs 表单提交   
form.getForm().submit({   
    success:function(){   
    },   
    failure:function(){   
    }   
});   
//ExtJs Ajax表单提交   
form.form.doAction('submit', {      
    url : 'user.do?method=login',         
    method : 'post',      
    // 如果有表单以外的其它参数,可以加在这里。我这里暂时为空,也可以将下面这句省略         
    params : '',      
    // 第一个参数是传入该表单,第二个是Ext.form.Action对象用来取得服务器端传过来的json数据         
    success : function(form, action) {      
      Ext.Msg.alert('操作', action.result.data);   //result为json对象      
      this.disabled = false;         
    },         
    failure : function(form, action) {      
      Ext.Msg.alert('警告', '用户名或密码错误!');         
      // 登录失败,将提交按钮重新设为可操作         
      this.disabled = false;         
    }         
});         


//ExtJs Ajax普通提交   
Ext.Ajax.request({               
   url: 'login.do',    //请求地址      
   //提交参数组         
   params: {         
         form.getForm().getValues()   //取出表单所有值      
   },         
   //成功时回调         
   success: function(response, options) {         
      //获取响应的json字符串         
       var responseArray = Ext.util.JSON.decode(response.responseText);                                                      
      if(responseArray.success==true){         
            Ext.Msg.alert('恭喜','您已成功登录!');               
      } else{         
            Ext.Msg.alert('失败','登录失败,请重新登录');               
      }         
    }         
});      

//老grid   
var myData = ${jobs}; //二维数组   
var store = new Ext.data.ArrayStore({   
    fields: [   
       {name: 'group'},   
       {name: 'name'},   
       {name: 'description'},   
       {name: 'jobClass'},   
       {name: 'namegroup'}   
    ]   
});   
store.loadData(myData);   
var grid = new Ext.grid.GridPanel({   
    title:"<fmt:message key='title.listAllJobs'/>",   
    store: store,   
    width:all_width,   
    autoHeight : true,   
    autoExpandColumn : 'namegroup',   
    viewConfig : {   
       forceFit : true   
    },   
    stripeRows: true,   
    columns: [   
      {header: "<fmt:message key='label.job.group'/>", width: 140, sortable: true, dataIndex: 'group'},   
      {header: "<fmt:message key='label.job.name'/>", width: 140, sortable: true, dataIndex: 'name'},   
      {header: "<fmt:message key='label.job.description'/>", width: 180, sortable: true, dataIndex: 'description'},   
      {header: "<fmt:message key='label.job.jobClass'/>", width: 200, sortable: true, dataIndex: 'jobClass'},
      {id : 'namegroup',header: "<fmt:message key='label.global.actions'/>", dataIndex: 'namegroup', renderer: change}   
    ],   
    bbar: new Ext.PagingToolbar({ afterPageText: '/ {0}',beforePageText: '页',firstText: '第一页'
      ,prevText: '前一页',nextText: '后一页',lastText: '最后一页',refreshText: '刷新',store: store   
      , pageSize: 20,displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条', emptyMsg: "没有数据"})   
});   

//如果store设置了url属性,可重新指定url的参数:   
store.load({params:{a:1, b:2}});   

//如果store的内容只是普通的数组:   
store.loadData([...]);   

//如果store没有单独的变量定义,可以用   
comboBox.initialConfig.store   
//或   
Ext.getCmp('comboId').initialConfig.store   
                  
//窗口   
var win;   

win = new Ext.Window({//添加/修改菜单弹出窗口   
    id:'winId',   
    title:'',   
    width: '',   
    height:'',   
    layout: 'fit',   
    modal:true,   
    closeAction:'hide',   
    buttonAlign:'center',   
    resizable:false,   
    items: ,   
    listeners:{   
      'hide':function(){}   
    }         
});   
Ext.getCmp('winId').show();   

listeners:{   
    render:function(){},   
    click:function(a,e){}   
}   

//按钮   
var button = new Ext.Button({   
    text:'查询',   
    listeners:{click:function(a,e){   
    }}   
})   

//表单   
var form = new Ext.FormPanel({   
    id:'form',   
    width: '',   
    height:42,   
    labelWidth: '',             //标签宽度   
    layout:'column',            //分列   
    style:'padding:4 4 2 4',   
    defaults:{layout:'form'},   //子项默认使用form样式   
    colspan:2,   
    frame:true,   
    submit: function(){   
       this.getEl().dom.action = '${pageContext.request.contextPath}/layout.table?method=addData'; //连接到服务器的url地址   
       this.getEl().dom.method = 'post';   
       this.getEl().dom.submit();   
    },   
    items:[   
    {      
      columnWidth:.17,   
      items: [{   
            xtype:'label',   
            text:'',   
            emptyText:'',   
            allowBlank:false,   
            blankText:'',   
            regex:/^+$/,   
            regexText:'',   
            maxLength:20,   
            maxLengthText:''
      }]   
    },{   
      columnWidth:.04,   
      items:    
    }]   
});   
//form.getForm().isValid()   

//表格   
var table = new Ext.Panel({   
    renderTo:'content',   
    layout:'table',   
    width:'',   
    border:false,   
    layoutConfig: {columns:2},      //划分两列   
    bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',   
    defaults: {frame:true},         //填充文本背景颜色   
    items:   
})   

//标签页   
var tabs = new Ext.TabPanel({   
    resizeTabs:true, // tab宽度自动调整   
    minTabWidth: 115,   //tab最小宽度值   
    tabWidth:135,       //tab初始宽度   
    enableTabScroll:true,//tab超出范围出现横向滚动条   
    frame:true,   
    activeTab:0,   
    defaults: {bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6'},   
    items:[{   
      id:'tab1_1',   
      title:'',   
      items: //添加table   
    },{   
      id:'tab1_2',   
      title:'',   
      items:   
    }]   
});   

var tools = [{   
    id:'gear',   
    qtip :'为表单分配权限',   
    handler: function(e, target, panel){   
      //获得grid中所选的表单编号(即id值)   
      sRows = grid.getSelections('id_');   
      if(sRows==null)   
      {   
            Ext.Msg.show({   
                        title:'提示',   
                        msg: '<b>请选择表单后再分配权限!</b>',   
                        buttons: {ok:'确定'},   
                        icon: Ext.MessageBox.INFO,   
                        maxWidth :300,   
                        minWidth :300,   
                        closable:false,   
                        defaultTextHeight :100   
                        });   
            return;   
      }   
    }   
}]   

//框架面板   
var border = new Ext.Panel({   
    layout:'border',   
    renderTo:'content',   
    width:'',   
    height:'',   
    items:[{   
      region:'north',   
      xtype:'panel',   
      margins: '4 4 2 4',   
      height:42,   
      bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',   
      items:   
    },{   
      region:'west',   
      id:'west-panel',   
      width: '',   
      style:'padding:2 2 4 4',   
      collapsible: true,   
      defaults:{border:false},   
      layoutConfig:{   
            animate:true
      },   
      items:    
    },{   
      region:'center',   
      style:'padding:2 4 4 2',   
      border:false,   
      items:   
    }]   
});   

//日期控件   
var dateSign_start = new Ext.form.DateField({   
    value:startTime,   
    format:"Y-m",   
    fieldLabel:'开始时间',   
    listeners:{   
      change:function(){   
      }   
    }   
});   

//下拉列表   
//静态   
var fields=["name","valtext"];   
var data_branchCompany=[['01','1月'],['02','2月']];   
var store_branchCompany = new Ext.data.SimpleStore({   
    fields:fields,   
    data:data_month   
});   
//动态   
var dsUrl_branchCompany ="${pageContext.request.contextPath}/adapter2Table.table?key=branchCompany&dropdownlist=true";   
var store_branchCompany = new Ext.data.Store({   
    url:dsUrl_branchCompany,   
    autoLoad: true,   
    reader: new Ext.data.JsonReader({},[   
   //设置如何解析   
    {name:'name'},   
    {name:'valtext'}   
    ])   
    ,listeners:{   
      "load":function()   
      {   
      }   
    }   
});   
var comboBox_branchCompany = new Ext.form.ComboBox({   
    id:'comboBox_branchCompanyId',   
    width: 75,   
    selectOnFocus : true,      
    allowBlank:false,   
    readOnly:true,   
    emptyText: '',   
    fieldLabel:'',   
    store:store_branchCompany,   
    triggerAction: "all", //不加该语句选中某项后   
    mode: "local",   //动态需要   
    displayField: "name",   
    valueField: "valtext",   
    listeners: {   
      "select": function (combo,record,index){   
            //record.get("name");   
         }   
    }            
});   

//隐藏div   
type.on("select",function(combo,record,index){   
    if(record.get('valtext') == 0){   
    }   
});   


//树   
var tree = new Ext.tree.TreePanel({   
    id:'tree',   
    border: false,   
    containerScroll: true,   
    enableDD:false,//设置是否允许拖拽   
    useArrows: false,//是否使用箭头记号,默认为false   
    rootVisible :true,//设置是否显示根节点   
    autoScroll:true,   
    loader: new Ext.tree.TreeLoader({   
      dataUrl: '${pageContext.request.contextPath}/treeQuery.tree?method=queryNode&key=product_order',   
      listeners:{beforeload:function(treeLoader, node) {   
                  this.baseParams.id = node.id;   
      }}   
    }),   
    root: {   
      nodeType: 'async',   
      text: '付费节目',   
      draggable: false,   
      id: '1'
    },   
    listeners:{   
      click:function(node,ev){   
            id=node.id;   
      }   
    }   
});   
tree.getRootNode().expand();      

tree_org.on("append",function(tree,parentNode,node,index)   
{   
    for(var i=0,len=roles.length;i<len;i++)   
    {   
      if(roles.编号 == node.id)   
      {   
            node.attributes.checked=true;   
            break;   
      }   
    }   
});   

//滑动菜单   
{   
    region:'west',   
    id:'west-panel',   
    title:'West',   
    width: 200,   
    style:'padding:4 2 4 4',   
    collapsible: true,   
    layout:'accordion',   
    defaults:{border:false},   
    layoutConfig:{   
      animate:true
    },   
    items: [{   
      title:'菜单1',   
      items:   
    },{   
      title:'菜单2',   
      contentEl:'hw'
    }]   
}   

//表单中控件   
{   
    fieldLabel: '性别',   
    xtype:'radiogroup',   
    items:[{   
            boxLabel:'男',   
            name: 'SEX_',   
            value:"${SEX_}",   
            checked:true,   
            inputValue: 1   
      },{   
            boxLabel:'女',   
            name: 'SEX_',   
            inputValue: 2   
      }]   
},{   
    fieldLabel: 'SHOURU',   
    xtype:'checkboxgroup',   
    items:[{   
            boxLabel:'SHOURU1',   
            name: 'SHOURU',   
            checked:true,   
            inputValue: 1   
      },{   
            boxLabel:'SHOURU2',   
            name: 'SHOURU',   
            inputValue: 2   
      },{   
            boxLabel:'SHOURU3',   
            name: 'SHOURU',   
            inputValue: 3   
      }]   
},{   
    xtype:'field',   
    inputType:'file',   
    name:'SHUISHOU',   
    fieldLabel:'上传'
},{   
    xtype:'textfield',   
    name:"",   
    hidden:true,   
    hideMode:"display",   
    hideLabel:true,   
    value:""
},{   
    frame:false,border:false,baseCls:'x-plain',items:[{   
    xtype:'htmleditor',   
    id:'id_htmleditor',   
    width:500,   
    height:350,   
    name:'rulecontent_',   
    fieldLabel:'规则信息'
}]}   

//Ext dom操作   
Ext.getDom('')//返回Js对象   
Ext.getCmp('').getValue();   
Ext.getCmp("org-tree-panel").getChecked("id");//获得树节点   
Ext.getCmp('form').form.findField("name").setValue('1',true);   
Ext.getCmp('form').form.findField('name').getValue().inputValue;//radio选中值   
grid.getSelections('列名');//获得选中   
//checkbox选中值   
var checkbox = Ext.getCmp('form').form.findField('name');   
if(checkbox.items.get(i).checked){   
    checkbox.items.get(i).inputValue;   
}
页: [1]
查看完整版本: 表单提交