в 09:59, 26 мая 2010

2010-05-26T09:59:51Z

Admin: 1 версия

2010-05-26T07:21:21Z

1 версия

Новая страница

==Define and use radio button group==



<source lang="html4strict">

<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>

</source>

==Mark one radioButton as checked==



<source lang="html4strict">

<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>

</source>

==Radio button type form field==



<source lang="html4strict">

<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>

</source>

==Set inputValue for radio button==



<source lang="html4strict">

<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>

</source>

==Set name for radio button==



<source lang="html4strict">

<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>

</source>

← Предыдущая	Версия 09:59, 26 мая 2010
(нет различий)

JavaScript DHTML/Ext JS/RadioButton - История изменений

в 09:59, 26 мая 2010

Admin: 1 версия