`

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 表单提交登陆实现代码

    首先,实现ExtJs表单提交和登录效果通常涉及以下几个步骤: 1. 在ExtJs子类中添加单击提交事件处理函数。这一过程涉及到使用ExtJs框架提供的事件监听机制,它允许开发者为特定组件绑定自定义事件处理逻辑。 在提供...

    ExtJs4.0 表单提交Demo

    在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...

    如何提交Extjs 中的表单

    这个方法会接收到ExtJS表单提交的数据,并根据业务逻辑进行处理。返回的字符串将作为`action.result.message`显示在前端。 总的来说,提交ExtJS表单涉及前端的表单构建、事件监听以及后端的接收和处理。确保前后端...

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

    ### extjs前后台交互参数出现中文乱码问题的解决方法 #### 问题背景与原因分析 在使用MyEclipse开发工具进行Web应用开发时,尤其是采用ExtJS框架结合Ajax技术进行前后端数据交互的过程中,可能会遇到一个常见的...

    EXT提交表单,ASP.NET

    1. **创建接收端点**:创建一个ASP.NET页面或Web API控制器方法,这个方法会接收EXTJS表单提交的数据。数据通常以POST方式发送,ASP.NET可以通过`Request.Form`或`Request.InputStream`来获取。 2. **处理数据**:...

    learning extjs 中文版 表单提交

    EXTJS表单支持多种事件,如`beforesubmit`、`submit`、`success`和`failure`,这些事件允许开发者在表单提交前后执行自定义操作。例如,`beforesubmit`事件可以在表单提交前进行数据验证或修改,而`success`和`...

    ExtJs 动态添加表单

    console.log('表单提交', action.result); }); ``` 5. **动态移除字段**: 当需要移除某个字段时,可以使用`remove`方法: ```javascript formPanel.remove(textField); formPanel.doLayout(); ``` 6. **...

    php+Extjs+mysql实例

    1. 添加合同:用户填写合同信息后,通过ExtJS表单提交,PHP接收到数据,验证后存入MySQL。 2. 修改合同:用户选择一条合同记录,表单填充当前信息,修改后提交,PHP更新数据库。 3. 删除合同:用户选择要删除的合同...

    extjs表单验证特殊字符

    EXTJS表单验证主要依赖于`Ext.form.field.Base`组件,它是所有表单字段的基础类。每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的...

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

    本篇文章主要介绍了一种优化的EXTJS表单提交方法,通过精简代码,提高了开发效率。下面我们将详细探讨这个优化的表单提交通用实现。 首先,我们来看一下提供的优化代码: ```javascript /** * 提交表单 */ ...

    extjs动态表单

    5. **事件监听**:设置事件监听器来处理用户交互,如表单提交、字段变化等。 6. **渲染和显示**:将表单渲染到页面上,让用户可以操作。 从提供的标签“源码”和“工具”来看,可能包含的资源kk.doc可能是一个示例...

    extjs四种异步提交

    虽然示例中没有给出第四种方式,但EXT JS的FormPanel还支持直接在配置中指定Action,这样在表单提交时,EXT JS会根据Action配置自动处理提交逻辑。Action可以是一个包含处理提交的控制器方法的URL,或者是一个EXT ...

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

    在开发使用Extjs4框架的应用程序时,可能会遇到form表单提交后,无法正确进入success回调函数的问题。针对这个问题,首先需要进行两个方面的检查和确认,以确保form提交操作能够顺利进入success回调函数。 首先,...

    Extjs表单中的通用组件

    这里的`name`属性是表单提交时的数据字段名称,`fieldLabel`则是在表单界面上显示的标签。 ### 密码框(PasswordField) 密码框与文本框类似,但会将输入的字符显示为星号或其他符号,以保护用户的隐私。在Extjs中...

    extjs中的formPanel以及表单的应用

    alert('表单提交成功'); } else { alert('表单提交失败'); } } } } } ``` 对于更复杂的需求,如动态添加或删除表单字段,FormPanel 提供了`add`和`remove`方法。同时,`loadRecord`方法可以用来从记录对象中...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

Global site tag (gtag.js) - Google Analytics