JavaScript DHTML/Ext JS/Label

Материал из Web эксперт
Перейти к: навигация, поиск

Add new line tag to form label

   
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var radioGroup = {
        xtype: "fieldset",
        title: "Groups",
        autoHeight: true,
        items: [
            {
                xtype: "radiogroup",
                fieldLabel: "Multi-Column<br/>(second line)",
                columns: 3,
                items: [
                    {boxLabel: "Item 1", name: "yourName", inputValue: 1},
                    {boxLabel: "Item 2", name: "yourName", inputValue: 2, checked: true},
                    {boxLabel: "Item 3", name: "yourName", inputValue: 3},
                    {boxLabel: "Item 4", name: "yourName", inputValue: 4},
                    {boxLabel: "Item 5", name: "yourName", inputValue: 5}
                ]
            }
        ]
    };
    var fp = new Ext.FormPanel({
        title: "Title",
        frame: true,
        labelWidth: 110,
        width: 600,
        renderTo:Ext.getBody(),
        bodyStyle: "padding:0 10px 0;",
        items: [
           radioGroup
        ],
        buttons: [{
            text: "Save",
            handler: function(){
               if(fp.getForm().isValid()){
                    Ext.Msg.alert("asdf");
                }
            }
        },{
            text: "Reset",
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Set label width for a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Label&oldid=2419»