EXTJS2.2 FormPane对象研究

function cForm()
{

    ///------------------------数据源
        var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'],[6, '笨.1'],[7, '笨.2'],[8, '笨.3'],[4,'无敌了'],[5,'无人了'] ];
        var reader = new Ext.data.ArrayReader(
       {id: 0},
       [
        {name: 'value'},       
        {name: 'key'}  
        ]);
        var store=new Ext.data.Store({
          reader:reader
       });
       store.loadData(arr);
    //--------------------------
    //测试面板
        var xform = new Ext.form.FormPanel({
        ///applyTo:"MXT",
        ///基本样式
        baseCls: 'x-plain',
        ///布局凡是
        layout:'absolute',
        ///提交的数据
url:'save-form.php',
        //闭合时的效果
        animCollapse:true,
        ///默认的 输入类型
        defaultType: 'textfield',
        items: [{
            x: 0,
            y: 5,
            xtype:'label',
            text: '测试中...:'
        },{
         ///是否允许为空
           allowBlank: false,
         //验证的提示文字内容
            blankText:'验证的提示内容,不能为空',
            x: 60,
            y: 0,
            name: 'to',
            fieldLabel:'text',
            maskRe:/[a-zA-z]/gi,
            anchor:'50%'  // anchor width by percentage
        },
        ///CLASS
        {
            x: 300,
            y: 0,
            name: 'tozcxv',
            anchor:'100%'  // anchor width by percentage
        },
        {
            x: 0,
            y: 35,
            xtype:'label',
            text: '测试中:'
        },{
            x: 60,
            y: 30,
            //maskRe:'/[a-zA-z]/gi',
            name: '开始中',
            anchor: '100%'  // anchor width by percentage
        },{
            x:0,
            y: 60,
            xtype: 'textarea',
            name: 'msg',
            anchor: '100% 40%'  // anchor width and height
        },
        ///时间按钮
        {
            x:0,
            y:200,
            xtype: 'datefield',
            name: 'msgzcx',
            anchor: '50% 100%'  // anchor width and height
        },
//           ///时间
        {
            x:240,
            y:200,
            xtype: 'timefield',
            name: 'msgzcxdt',
            ///时间的递增
            increment:10,
            ///验证失败的文字提示
            invalidText:'时间格式不正确',
            anchor: '50% 100%'  // anchor width and height
        },
        ///下拉选项框
            {
                x:0,
                y:230,
                xtype: 'combo',
                ///定义具体的类型 select  ComboBox
                fieldLabel:'ComboBox',
                ///是否可编辑 true ComboBox false select
                editable:true,
                //至少几个字时开始检索并显示检索结果 注意冲突
                minChars:2,
                ///每页显示的大小
                pageSize:3,
                ///值不存在时的显示
                valueNotFoundText:'无此选项',
                ///显示的字段
                displayField:'key',
                ///数据类型类型 本地
                mode: 'local',
                ///数据源
                store:store
            },
            {
            x:0,
            y: 260,
            xtype: 'numberfield',
            name: 'msgzcx',
            anchor: '100% 100%'  // anchor width and height
        },
        //数字
        {
            x:0,
            y: 300,
            xtype: 'numberfield',
            name: 'msgzcx',
            anchor: '100% 100%'  // anchor width and height
        }
        ],
        buttons: [{
     text: '登陆',
     type: 'submit',
     //定义表单提交事件
     handler:function(){
     ///提交表单
            xform.getForm().submit({
url:'Operator.aspx?Action=1SAVE',
                               method:'post',
                               success:function(form,action){
           alert('adsf');
          },
          //提交失败的回调函数
          failure:function(){
           alert('失败');
          }
                                 });
                                 //提交成功的回调函数
           //alert(xform.getForm());
     }
     }]
    });
     var window = new Ext.Window({
        ///标题
        title: '操作人员管理',
        ///宽
        width: 500,
        ///高
        height:500,
        ///最小的宽带
        minWidth: 300,
        ///最小的高度
        minHeight: 200,
        ///布局的方式
        layout: 'fit',
        ///是否允许调整大小
        resizable:false,
        ///是否准许拖动
        draggable:true,
        ///关闭按钮
        closable:true,
        ///是否视图中显示
        constrain:true,
        ///是否为透明背景
        plain:true,
        ///显示最小化按钮
        minimizable:true,
        ///最大化按钮
        maximizable:true,
        ///是否显示收缩按钮
        expandOnShow:true,
        ///是否显示关闭按钮
        closable:false,
        ///关闭按钮样式
        collapsedCls:"x-plain",
         ///不可用时  是否进行遮挡
        maskDisabled:true,
        ///头部文本
        headerAsText:"头部标题",
        ///表
        bodyStyle:'padding:5px;',
        ///按钮的对其方式
        buttonAlign:'center',
         items: xform,

        buttons: [{
            text: '关闭'
        },{
            text: '取消'
        }]
    });

    window.show();

posted @ 2009-02-03 23:59  zfh424  阅读(553)  评论(0编辑  收藏  举报