*/
Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
- \r
-Roo.onReady(function(){\r
- Roo.QuickTips.init();\r
- function formatBoolean(value){\r
- return value ? 'Yes' : 'No'; \r
- };\r
- \r
- function formatDate(value){\r
- return value ? value.dateFormat('M d, Y') : '';\r
- };\r
- // shorthand alias\r
- var fm = Roo.form, Ed = Roo.grid.GridEditor;\r
-\r
- // the column model has information about grid columns\r
- // dataIndex maps the column to the specific data field in\r
- // the data store (created below)\r
- var cm = new Roo.grid.ColumnModel([{\r
- header: "Common Name",\r
- dataIndex: 'common',\r
- width: 220,\r
- editor: new Ed(new fm.TextField({\r
- allowBlank: false\r
- }))\r
- },{\r
- header: "Light",\r
- dataIndex: 'light',\r
- width: 130,\r
- editor: new Ed(new Roo.form.ComboBox({\r
- typeAhead: true,\r
- triggerAction: 'all',\r
- transform:'light',\r
- lazyRender:true\r
- }))\r
- },{\r
- header: "Price",\r
- dataIndex: 'price',\r
- width: 70,\r
- align: 'right',\r
- renderer: 'usMoney',\r
- editor: new Ed(new fm.NumberField({\r
- allowBlank: false,\r
- allowNegative: false,\r
- maxValue: 10\r
- }))\r
- },{\r
- header: "Available",\r
- dataIndex: 'availDate',\r
- width: 95,\r
- renderer: formatDate,\r
- editor: new Ed(new fm.DateField({\r
- format: 'm/d/y',\r
- minValue: '01/01/06',\r
- disabledDays: [0, 6],\r
- disabledDaysText: 'Plants are not available on the weekends'\r
- }))\r
- },{\r
- header: "Indoor?",\r
- dataIndex: 'indoor',\r
- width: 55,\r
- renderer: formatBoolean,\r
- editor: new Ed(new fm.Checkbox())\r
- }]);\r
-\r
- // by default columns are sortable\r
- cm.defaultSortable = true;\r
-\r
- // this could be inline, but we want to define the Plant record\r
- // type so we can add records dynamically\r
- var Plant = Roo.data.Record.create([\r
- // the "name" below matches the tag name to read, except "availDate"\r
- // which is mapped to the tag "availability"\r
- {name: 'common', type: 'string'},\r
- {name: 'botanical', type: 'string'},\r
- {name: 'light'},\r
- {name: 'price', type: 'float'}, // automatic date conversions\r
- {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
- {name: 'indoor', type: 'bool'}\r
- ]);\r
-\r
- // create the Data Store\r
- var ds = new Roo.data.Store({\r
- // load using HTTP\r
- proxy: new Roo.data.HttpProxy({url: 'plants.xml'}),\r
-\r
- // the return will be XML, so lets set up a reader\r
- reader: new Roo.data.XmlReader({\r
- // records will have a "plant" tag\r
- record: 'plant'\r
- }, Plant)\r
- });\r
-\r
- // create the editor grid\r
- var grid = new Roo.grid.EditorGrid('editor-grid', {\r
- ds: ds,\r
- cm: cm,\r
- enableColLock:false\r
- });\r
-\r
- var layout = Roo.BorderLayout.create({\r
- center: {\r
- margins:{left:3,top:3,right:3,bottom:3},\r
- panels: [new Roo.GridPanel(grid)]\r
- }\r
- }, 'grid-panel');\r
-\r
-\r
- // render it\r
- grid.render();\r
-\r
- \r
- var gridHead = grid.getView().getHeaderPanel(true);\r
- var tb = new Roo.Toolbar(gridHead, [{\r
- text: 'Add Plant',\r
- handler : function(){\r
- var p = new Plant({\r
- common: 'New Plant 1',\r
- light: 'Mostly Shade',\r
- price: 0,\r
- availDate: new Date(),\r
- indoor: false\r
- });\r
- grid.stopEditing();\r
- ds.insert(0, p);\r
- grid.startEditing(0, 0);\r
- }\r
- }]);\r
-\r
- // trigger the data store load\r
- ds.load();\r
+
+Roo.onReady(function(){
+ Roo.QuickTips.init();
+ function formatBoolean(value){
+ return value ? 'Yes' : 'No';
+ };
+
+ function formatDate(value){
+ return value ? value.dateFormat('M d, Y') : '';
+ };
+ // shorthand alias
+ var fm = Roo.form, Ed = Roo.grid.GridEditor;
+
+ // 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 Roo.grid.ColumnModel([{
+ header: "Common Name",
+ dataIndex: 'common',
+ width: 220,
+ editor: new Ed(new fm.TextField({
+ allowBlank: false
+ }))
+ },{
+ header: "Light",
+ dataIndex: 'light',
+ width: 130,
+ editor: new Ed(new Roo.form.ComboBox({
+ typeAhead: true,
+ triggerAction: 'all',
+ transform:'light',
+ lazyRender:true
+ }))
+ },{
+ header: "Price",
+ dataIndex: 'price',
+ width: 70,
+ align: 'right',
+ renderer: 'usMoney',
+ editor: new Ed(new fm.NumberField({
+ allowBlank: false,
+ allowNegative: false,
+ maxValue: 10
+ }))
+ },{
+ header: "Available",
+ dataIndex: 'availDate',
+ width: 95,
+ renderer: formatDate,
+ editor: new Ed(new fm.DateField({
+ format: 'm/d/y',
+ minValue: '01/01/06',
+ disabledDays: [0, 6],
+ disabledDaysText: 'Plants are not available on the weekends'
+ }))
+ },{
+ header: "Indoor?",
+ dataIndex: 'indoor',
+ width: 55,
+ renderer: formatBoolean,
+ editor: new Ed(new fm.Checkbox())
+ }]);
+
+ // by default columns are sortable
+ cm.defaultSortable = true;
+
+ // this could be inline, but we want to define the Plant record
+ // type so we can add records dynamically
+ var Plant = Roo.data.Record.create([
+ // 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'}, // automatic date conversions
+ {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
+ {name: 'indoor', type: 'bool'}
+ ]);
+
+ // create the Data Store
+ var ds = new Roo.data.Store({
+ // load using HTTP
+ proxy: new Roo.data.HttpProxy({url: 'plants.xml'}),
+ remoteSort : true,
+
+ // the return will be XML, so lets set up a reader
+ reader: new Roo.data.XmlReader({
+ // records will have a "plant" tag
+ record: 'plant'
+ }, Plant)
+ });
+
+ // create the editor grid
+ var grid = new Roo.grid.EditorGrid('editor-grid', {
+ ds: ds,
+ cm: cm,
+ enableColLock:false,
+ multiSort : true,
+ });
+
+ var layout = Roo.BorderLayout.create({
+ center: {
+ margins:{left:3,top:3,right:3,bottom:3},
+ panels: [new Roo.GridPanel(grid)]
+ }
+ }, 'grid-panel');
+
+
+ // render it
+ grid.render();
+
+
+ var gridHead = grid.getView().getHeaderPanel(true);
+ var tb = new Roo.Toolbar(gridHead, [{
+ text: 'Add Plant',
+ handler : function(){
+ var p = new Plant({
+ common: 'New Plant 1',
+ light: 'Mostly Shade',
+ price: 0,
+ availDate: new Date(),
+ indoor: false
+ });
+ grid.stopEditing();
+ ds.insert(0, p);
+ grid.startEditing(0, 0);
+ }
+ }]);
+
+ // trigger the data store load
+ ds.load();
});
\ No newline at end of file
projects / roojs1 / commitdiff