Mark changed field : GridPanel « Ext JS « JavaScript DHTML






Mark changed field

   

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/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.com
 * http://www.extjs.com/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.com
 * http://www.extjs.com/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.ComboBox({
               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>

   
    
    
  








Related examples in the same category

1.Sort table by name
2.Add row to a table
3.Remove a row from a table
4.Remove all data from GridPanel
5.Layout GridPanel(table) and FormPanel in border layout
6.Using a Grid with a Form
7.Table Selection
8.The Grid demonstrates the use of creation of derived fields in a Record created using a custom convert function, and the use of column renderers.
9.Set column name, width, height, title for Ext.grid.GridPanel
10.Set column to sortable
11.Add rowselect event handler to a GridPanel
12.GridPanel: framing
13.GridPanel: buttons
14.GridPanel: toolbars
15.Add buttons to GridPanel
16.Static data grid
17.Reload data to GridPanel
18.Grid Plugins
19.stripeRows: true,
20.Grouping GridPanel
21.Buffer Grid Example
22.GridPanel Framed with Checkbox Selection and Horizontal Scrolling
23.Grid with Numbered Rows and Force Fit
24.Set autoExpandColumn for GridPanel
25.autoExpandColumn: 'column name',
26.Set up data, column for Ext.grid.GridPanel
27.Set RowSelectionModel for Ext.grid.GridPanel
28.Data Binding Example - Implemented with classes
29.Updating the grid data via a button click
30.Define RowSelectionModel and set single selection
31.Define column model and set header, dataIndex and sortable
32.Create a grid with from an existing, unformatted HTML table.