JavaScript DHTML/Ext JS/CheckBox
Содержание
Add check boxes to form panel
<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 checkboxes = [ { xtype : "checkbox", fieldLabel : "", boxLabel : "A", inputValue : "a" }, { xtype : "checkbox", fieldLabel : "", labelSeparator : " ", boxLabel : "B", inputValue : "b" }, { xtype : "checkbox", fieldLabel : "", labelSeparator : " ", boxLabel : "C", inputValue : "c" }, { xtype : "checkbox", fieldLabel : "", labelSeparator : " ", boxLabel : "D", inputValue : "d" } ] var fp = { xtype : "form", labelWidth : 110, items : checkboxes, frame : true } new Ext.Window({ title : "", layout : "fit", height : 180, width : 320, borde : false, items : fp }).show();
}); </script>
</body> </html>
</source>
Add checkbox to FormPanel
<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: "checkbox", fieldLabel: "True", name: "e" } ] });
}); </script>
</body> </html>
</source>
CheckBox cell editor
<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> <script type="text/javascript" src="ext-3.0.0/examples/ux/CheckColumn.js"></script> <style type="text/css"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
- grid-example .x-grid-col-1 {
text-align: right;
}
- grid-example .x-grid-col-2{
text-align: right;
}
- grid-example .x-grid-col-3 {
text-align: right;
}
- grid-example .x-grid-col-4 {
text-align: right;
}
- grid-example.x-grid-mso{
border: 1px solid #6593cf;
}
- grid-example.x-grid-vista{
border: 1px solid #b3bcc0;
}
- xml-grid-example{
border: 1px solid #cbc7b8; left: 0; position: relative; top: 0;
}
- editor-grid .x-grid-col-2{
text-align:right;
} .x-grid3-td-topic b {
font-family:tahoma, verdana; display:block;
} .x-grid3-td-topic b i {
font-weight:normal; font-style: normal; color:#000;
} .x-grid3-td-topic .x-grid3-cell-inner {
white-space:normal;
} .x-grid3-td-topic a {
color: #385F95; text-decoration:none;
} .x-grid3-td-topic a:hover {
text-decoration:underline;
} .details .x-btn-text {
background-image: url(details.gif);
} .x-resizable-pinned .x-resizable-handle-south{
background:url(ext-3.0.0/resources/images/default/sizer/s-handle-dark.gif); background-position: top;
}
</style>
</head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); function formatDate(value){ return value ? value.dateFormat("M d, Y") : ""; } // shorthand alias var fm = Ext.form; // custom column plugin example var checkColumn = new Ext.grid.CheckColumn({ header: "Indoor?", dataIndex: "indoor", width: 55 }); // the column model has information about grid columns // dataIndex maps the column to the specific data field in // the data store (created below) var cm = new Ext.grid.ColumnModel([{ id: "common", header: "Common Name", dataIndex: "common", width: 220, // use shorthand alias defined above editor: new fm.TextField({ allowBlank: false }) },{ header: "Light", dataIndex: "light", width: 130, editor: new fm.ruboBox({ typeAhead: true, triggerAction: "all", transform:"light", lazyRender: true, listClass: "x-combo-list-small" }) },{ header: "Price", dataIndex: "price", width: 70, align: "right", renderer: "usMoney", editor: new fm.NumberField({ allowBlank: false, allowNegative: false, maxValue: 100000 }) },{ header: "Available", dataIndex: "availDate", width: 95, renderer: formatDate, editor: new fm.DateField({ format: "m/d/y", minValue: "01/01/06", disabledDays: [0, 6], disabledDaysText: "Plants are not available on the weekends" }) }, checkColumn ]); // by default columns are sortable cm.defaultSortable = true; // create the Data Store var store = new Ext.data.Store({ // load remote data using HTTP url: "ext-3.0.0/examples/grid/plants.xml", // specify a XmlReader (coincides with the XML format of the returned data) reader: new Ext.data.XmlReader( { // records will have a "plant" tag record: "plant" }, // use an Array of field definition objects to implicitly create a Record constructor [ // the "name" below matches the tag name to read, except "availDate" // which is mapped to the tag "availability" {name: "common", type: "string"}, {name: "botanical", type: "string"}, {name: "light"}, {name: "price", type: "float"}, // dates can be automatically converted by specifying dateFormat {name: "availDate", mapping: "availability", type: "date", dateFormat: "m/d/Y"}, {name: "indoor", type: "bool"} ] ), sortInfo: {field:"common", direction:"ASC"} }); // create the editor grid var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, renderTo: "editor-grid", width: 600, height: 300, autoExpandColumn: "common", title: "Edit Plants?", frame: true, plugins: checkColumn, clicksToEdit: 1, tbar: [{ text: "Add Plant", handler : function(){ // access the Record constructor through the grid"s store var Plant = grid.getStore().recordType; var p = new Plant({ common: "New Plant 1", light: "Mostly Shade", price: 0, availDate: (new Date()).clearTime(), indoor: false }); grid.stopEditing(); store.insert(0, p); grid.startEditing(0, 0); } }] }); // trigger the data store load store.load();
}); </script>
<select name="light" id="light" style="display: none;"> <option value="Shade">Shade</option> <option value="Mostly Shady">Mostly Shady</option> <option value="Sun or Shade">Sun or Shade</option> <option value="Mostly Sunny">Mostly Sunny</option> <option value="Sunny">Sunny</option> </select>
</body> </html>
</source>
Use checkbox group to hold the check boxes
<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 checkboxes = { xtype : "checkboxgroup", fieldLabel : "Choices", defaults : { bodyStyle : "background-color: #DFE8F6;", }, anchor : "100%", items : [ { boxLabel : "A", inputValue : "a" }, { boxLabel : "B", inputValue : "b" }, { boxLabel : "C", inputValue : "c" }, { boxLabel : "D", inputValue : "d" } ] } new Ext.Window({ title : "Available choices", layout : "form", labelWidth : 50, height : 90, width : 320, bodyStyle : "padding: 5px", items : checkboxes }).show();
}); </script>
</body> </html>
</source>