JavaScript DHTML/Ext JS/RadioButton — различия между версиями

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

Версия 09:59, 26 мая 2010

Define and use radio button group

  
<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 radios = [
      {
        xtype      : "radio",
        fieldLabel : "",
        boxLabel   : "A",
        name       : "letter",
        inputValue : "a"
      },
      {
        xtype          : "radio",
        fieldLabel     : "",
        labelSeparator : " ",
        boxLabel       : "B",
        name           : "letter",
        inputValue     : "b"
      },
      {
        xtype          : "radio",
        fieldLabel     : "",
        labelSeparator : " ",
        boxLabel       : "C",
        name           : "letter",
        inputValue     : "c"
      },
      {
        xtype          : "radio",
        fieldLabel     : "",
        labelSeparator : " ",
        boxLabel       : "D",
        name           : "letter",
        inputValue     : "d"
      }
    ]
    
    var fp = {
      xtype      : "form",
      labelWidth : 110,
      items      : radios,
      frame      : true
    }
        
    new Ext.Window({
      title   : "",
      layout  : "fit",
      height  : 300,
      width   : 320,
      borde   : false,
      items   : fp
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Mark one radioButton as checked

   
<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: "Auto Layout",
                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>



Radio button type form field

  
<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() {
    new Ext.FormPanel({ 
      url: "your.php",
      renderTo: Ext.getBody(),
      frame: true,
      title: "Title",
      width: 250,
      items: [
          {
            xtype: "radio",
            fieldLabel: "",
            name: "n",
            boxLabel: "A"
          },
          {
            xtype: "radio",
            hideLabel: false,
            labelSeparator: "",
            name: "n",
            boxLabel: "B"
          }
      ]
    });

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



Set inputValue for radio button

   

<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: "Auto Layout",
                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 name for radio button

   
<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: "Auto Layout",
                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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/RadioButton&oldid=2384»