JavaScript DHTML/Ext JS/Grid Editor
Содержание
ComboBox cell editor
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
<!-- the custom editor for the "Light" column references the id="light" -->
<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>
<div id="editor-grid"></div>
</body>
</html>
DatePicker field cell editor
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
<!-- the custom editor for the "Light" column references the id="light" -->
<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>
<div id="editor-grid"></div>
</body>
</html>
Number field cell editor
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
<!-- the custom editor for the "Light" column references the id="light" -->
<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>
<div id="editor-grid"></div>
</body>
</html>
Property Grid
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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(){
var propsGrid = new Ext.grid.PropertyGrid({
renderTo: "prop-grid",
width: 300,
autoHeight: true,
propertyNames: {
tested: "QA",
borderWidth: "Border Width"
},
source: {
"(name)": "Properties Grid",
grouping: false,
autoFitColumns: true,
productionQuality: false,
created: new Date(Date.parse("10/15/2006")),
tested: false,
version: 0.01,
borderWidth: 1
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});
});
</script>
<p id="button-container"></p>
<div id="prop-grid"></div>
</body>
</html>
Row editor
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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/RowEditor.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<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();
var Employee = Ext.data.Record.create([{
name: "name",
type: "string"
}, {
name: "email",
type: "string"
}, {
name: "start",
type: "date",
dateFormat: "n/j/Y"
},{
name: "salary",
type: "float"
},{
name: "active",
type: "bool"
}]);
// hideous function to generate employee data
var genData = function(){
var data = [];
var s = new Date(2007, 0, 1);
var now = new Date(), i = -1;
while(s.getTime() < now.getTime()){
var ecount = Ext.ux.getRandomInt(0, 3);
for(var i = 0; i < ecount; i++){
var name = Ext.ux.generateName();
data.push({
start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(" ", ".") + "@exttest.ru",
active: true,
salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
});
}
s = s.add(Date.MONTH, 1);
}
return data;
}
var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: Employee}),
data: genData(),
sortInfo: {field: "start", direction: "ASC"}
});
var editor = new Ext.ux.grid.RowEditor({
saveText: "Update"
});
var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
region:"center",
margins: "0 5 5 5",
autoExpandColumn: "name",
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: "icon-user-add",
text: "Add Employee",
handler: function(){
var e = new Employee({
name: "New Guy",
email: "new@exttest.ru",
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: "../removeBtn",
iconCls: "icon-user-delete",
text: "Remove Employee",
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],
columns: [
new Ext.grid.RowNumberer(),
{
id: "name",
header: "First Name",
dataIndex: "name",
width: 220,
sortable: true,
editor: {
xtype: "textfield",
allowBlank: false
}
},{
header: "Email",
dataIndex: "email",
width: 150,
sortable: true,
editor: {
xtype: "textfield",
allowBlank: false,
vtype: "email"
}
},{
xtype: "datecolumn",
header: "Start Date",
dataIndex: "start",
format: "m/d/Y",
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer("M y"),
editor: {
xtype: "datefield",
allowBlank: false,
minValue: "01/01/2006",
minText: "Can\"t have a start date before the company existed!",
maxValue: (new Date()).format("m/d/Y")
}
},{
xtype: "numbercolumn",
header: "Salary",
dataIndex: "salary",
format: "$0,0.00",
width: 100,
sortable: true,
editor: {
xtype: "numberfield",
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
xtype: "booleancolumn",
header: "Active",
dataIndex: "active",
align: "center",
width: 50,
trueText: "Yes",
falseText: "No",
editor: {
xtype: "checkbox"
}
}]
});
var cstore = new Ext.data.JsonStore({
fields:["month", "employees", "salary"],
data:[],
refreshData: function(){
var o = {}, data = [];
var s = new Date(2007, 0, 1);
var now = new Date(), i = -1;
while(s.getTime() < now.getTime()){
var m = {
month: s.format("M y"),
employees: 0,
salary: 0,
index: ++i
}
data.push(m);
o[m.month] = m;
s = s.add(Date.MONTH, 1);
}
store.each(function(r){
var m = o[r.data.start.format("M y")];
for(var i = m.index, mo; mo = data[i]; i++){
mo.employees += 10000;
mo.salary += r.data.salary;
}
});
this.loadData(data);
}
});
cstore.refreshData();
store.on("add", cstore.refreshData, cstore);
store.on("remove", cstore.refreshData, cstore);
store.on("update", cstore.refreshData, cstore);
var chart = new Ext.Panel({
width:600,
height:200,
layout:"fit",
margins: "5 5 0",
region: "north",
split: true,
minHeight: 100,
maxHeight: 500,
items: {
xtype: "columnchart",
store: cstore,
url:"ext-3.0.0/resources/charts.swf",
xField: "month",
yAxis: new Ext.chart.NumericAxis({
displayName: "Employees",
labelRenderer : Ext.util.Format.numberRenderer("0,0")
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == "salary"){
return Ext.util.Format.number(record.data.salary, "$0,0") + " total salary in " + record.data.month;
}else{
return Ext.util.Format.number(Math.floor(record.data.employees/10000), "0,0") + " total employees in " + record.data.month;
}
},
// style chart so it looks pretty
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: "Tahoma",
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: "Tahoma",
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{
type: "column",
displayName: "Salary",
yField: "salary",
style: {
image:"ext-3.0.0/examples/chart/bar.gif",
mode: "stretch",
color:0x99BBE8
}
}]
}
});
var layout = new Ext.Panel({
title: "Employee Salary by Month",
layout: "border",
layoutConfig: {
columns: 1
},
width:600,
height: 600,
items: [ grid]
});
layout.render(Ext.getBody());
grid.getSelectionModel().on("selectionchange", function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});
</script>
<div id="grid-example"></div>
</body>
</html>
TextBox cell editor
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
<!-- the custom editor for the "Light" column references the id="light" -->
<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>
<div id="editor-grid"></div>
</body>
</html>