Ext中FormPanel面板及Form控件横排测试(CSS)

最新推荐文章于 2024-05-17 11:38:51 发布

dy_paradise

最新推荐文章于 2024-05-17 11:38:51 发布

阅读量888

点赞数

分类专栏： ExtJs 文章标签：测试 css ext stylesheet function float

ExtJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ext中FormPanel面板及Form控件横排测试(CSS)</title>
<link rel="stylesheet" type="text/css" media="all" href="resources/css/ext-all.css" />
<style type="text/css" media="all">
    .allow-float {
        clear: none !important;
    } /* 允许该元素浮动 */
    .stop-float {
        clear: both !important;
    } /* 阻止该元素浮动 */
    .sex-male {
        float: left;
    }

    .sex-female {
        float: left;
        padding: 0 0 0 20px;
    }

    .age-field {
        float: left;
        padding: 0 0 0 58px; *
        padding: 0 0 0 50px !important; *
        padding: 0 0 0 50px;
    }
</style>
</head>
<body>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript"
    src="build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';</script>
<script type="text/javascript">
    Ext.onReady(function() {
        //创建Form面板
        var fp = new Ext.form.FormPanel({
            buttonAlign:'center',
            labelAlign:'right',
            labelWidth:40,
            frame:true,
            bodyStyle:'padding:8px 0 0 0;',
            items:[{
                xtype:'textfield',
                fieldLabel:'姓名',
                name:'n_username',
                id:'i_username',
                width:320
            },{
                xtype:'radio',
                fieldLabel:'性别',
                boxLabel:'男',
                name:'sex',
                id:'male',
                itemCls:'sex-male', //向左边浮动,处理控件横排
                clearCls:'allow-float', //允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动
                checked:true
            },{
                xtype:'radio',
                boxLabel:'女',
                name:'sex',
                id:'female',
                itemCls:'sex-female', //向左浮动,处理控件横排
                clearCls:'allow-float', //允许两边浮动
                hideLabel:true //不显示前面"性别"的标签
            },{
                xtype:'textfield',
                fieldLabel:'年龄',
                name:'n_age',
                id:'i_age',
                itemCls:'age-field', //向左浮动,处理控件横排
                width:133
            },{
                xtype:'textfield',
                fieldLabel:'住址',
                name:'n_address',
                id:'i_address',
                itemCls:'stop-float', //不允许浮动,结束控件横排
                width:320
            }],
            buttons:[{
                text:'确定',
                handler:onOK //实际应用一般是处理fp.getForm.submit()事件
            }, {
                text:'重置',
                handler:function(){ fp.getForm().reset(); }
            }],
            keys:[{ //处理键盘回车事件
                key:Ext.EventObject.ENTER,
                fn:onOK,
                scope:this
            }]
        });

    //确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合
    function onOK() {
        var strMsg;
        strMsg = "姓名：" + fp.getComponent("i_username").getValue() + "，性别：";
        if (fp.getComponent("male").checked)
            strMsg += "男";
        if (fp.getComponent("female").checked)
            strMsg += "女";
        strMsg += "，年龄：" + fp.getComponent("i_age").getValue();
        strMsg += "，住址：" + fp.getComponent("i_address").getValue();
        alert(strMsg);
    }

    //创建主窗口
    new Ext.Window({
        title:"Ext中FormPanel面板及Form控件横排测试(CSS)",
        width:400,
        closable:false,
        collapsible:true,
        draggable:false,
        resizable:false,
        modal:true,
        border:false,
        items:[fp],
        buttons:[]
    }).show();
});
</script>
</body>
</html>

dy_paradise

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ext中FormPanel面板及Form控件横排测试(CSS)

Ext中FormPanel面板及Form控件横排测试(CSS) .allow-float { clear: none !important; } /* 允许该元素浮动 */ .stop-float { clear: both !importan
复制链接

扫一扫