`

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: [grid],  
    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:/^[A-Za-z0-9]+$/,  
            regexText:'',  
            maxLength:20,   
            maxLengthText:'' 
        }]  
    },{  
        columnWidth:.04,  
        items: [button]  
    }]  
});   
//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:[form,chart,grid]  
})  
 
//标签页  
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:[chart1]  //添加table  
    },{  
        id:'tab1_2',  
        title:'',  
        items:[chart1]  
    }]  
});  
 
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:[form]  
    },{  
        region:'west',  
        id:'west-panel',  
        width: '',  
        style:'padding:2 2 4 4',  
        collapsible: true,  
        defaults:{border:false},  
        layoutConfig:{  
            animate:true 
        },  
        items: [tree]  
    },{  
        region:'center',  
        style:'padding:2 4 4 2',  
        border:false,  
        items:[tabs]  
    }]  
});  
 
//日期控件  
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[i].编号 == 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:[tree]  
    },{  
        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;  
0
0
分享到:
评论

相关推荐

    extjs 表单提交

    extjs 表单提交 需 要 注 意 的 事 项

    extjs表单提交例子

    保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...

    ExtJs 表单提交登陆实现代码

    上一篇简单做了一个用ext写的登陆界面,今天来实现登陆效果,主要是回顾下ext中表单提交方法的使用。

    ExtJs4.0 表单提交Demo

    一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.

    extjs 前后台交互参数出现中文乱码问题的解决方法

    在使用myeclipse过程中,我使用ajax同步请求传递参数到后台却出现中文乱码,这是我解决问题的代码,希望对您有所帮助

    如何提交Extjs 中的表单

    本工程为java Web 工程,旨在演示如何提交Extjs 中的表单。 本工程编码方式:UTF-8; 欢迎下载。

    learning extjs 中文版 表单提交

    NULL 博文链接:https://guoyiqi.iteye.com/blog/324854

    Extjs优化(二)Form表单提交通用实现

    代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...

    Ext_SpringMVC(Ext结合SoringMVC注解)

    1, 基本实现了数据的增删改操作; 2,表格的动态编辑刷新事件; 3,SpringMVC注解应用;...4,ExtJS表单提交,表格复选框,Ajax服务器提交; 5,外加邮件群发技术的实现; 适合初学者!大师就不要下载了!

    轻松搞定Extjs_原创

    三、提交表单至服务器 97 四、小结 100 第十六章:更多表单组件 102 一、您能说出哪些表单组件呢? 102 二、表单组件关系图 102 三、组件配置选项介绍 103 四、完整源代码 107 五、小结 112 第十七章:悬停提示与...

    解决Extjs4中form表单提交后无法进入success函数问题

    form表单提交后无法进入success函数的问题,很是常见,下面有个不错的解决方法,感兴趣的朋友可以参考下

    精通JS脚本之ExtJS框架.part2.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    ExtJSWeb应用程序开发指南(第2版)

    4.3.4 标准模式的表单数据提交 4.3.5 使用Direct技术 4.4 本章小结 第5章 面板及布局类 5.1 面板panel 5.1.1 认识Ext.panel.Panel 5.1.2 Ext.panel.Panel的主要功能 5.1.3 使用Ext.panel.Panel 5.2 标准...

    Extjs 的form load

    ext form 提交表单介绍 个个属性的介绍 两个函数介绍

    ExtJs与Java通信

    最完善的ExtJS与Java后台通信,两种数据传输第一种采用的是JSon,第二种是采用直接提交Form表单,个人觉得ExtJS比Flex与Java通信要简单写,呵呵。谁有WebService学习资料告诉我啊,要自己写WebService了哈。

    精通JS脚本之ExtJS框架.part1.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。Extjs也对...

Global site tag (gtag.js) - Google Analytics