JavaScript DHTML/Ext JS/ArrayStore

Материал из Web эксперт
Версия от 07:21, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Create a grid from Array data

  

<!--
/*!
 * 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(){
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var myData = [
        ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
        ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
        ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
        ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
        ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
        ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
        ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
        ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
        ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
        ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
        ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
        ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
        ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
        ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
        ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
        ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
        ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
        ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
        ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
        ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
        ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
        ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
        ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
        ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
        ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
        ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
        ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
        ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],            
        ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
    ];
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return "<span style="color:green;">" + val + "</span>";
        }else if(val < 0){
            return "<span style="color:red;">" + val + "</span>";
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return "<span style="color:green;">" + val + "%</span>";
        }else if(val < 0){
            return "<span style="color:red;">" + val + "%</span>";
        }
        return val;
    }
    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: "company"},
           {name: "price", type: "float"},
           {name: "change", type: "float"},
           {name: "pctChange", type: "float"},
           {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
        ]
    });
    store.loadData(myData);
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
            {header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
        ],
        stripeRows: true,
        autoExpandColumn: "company",
        height:350,
        width:600,
        title:"Array Grid"
    });
    grid.render("grid-example");
});
</script> 
<div id="grid-example"></div>
</body>
</html>



Create ArrayStore, set data and field

  
<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 names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



dateFormat for Ext.data.ArrayStore

   
        
<!--
/*!
 * 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(){
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var myData = [
        ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
        ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
        ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
        ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
        ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
        ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
        ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
        ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
        ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
        ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
        ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
        ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
        ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
        ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
        ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
        ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
        ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
        ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
        ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
        ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
        ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
        ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
        ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
        ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
        ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
        ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
        ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
        ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],            
        ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
    ];
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return "<span style="color:green;">" + val + "</span>";
        }else if(val < 0){
            return "<span style="color:red;">" + val + "</span>";
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return "<span style="color:green;">" + val + "%</span>";
        }else if(val < 0){
            return "<span style="color:red;">" + val + "%</span>";
        }
        return val;
    }
    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: "company"},
           {name: "price", type: "float"},
           {name: "change", type: "float"},
           {name: "pctChange", type: "float"},
           {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
        ]
    });
    store.loadData(myData);
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
            {header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
        ],
        stripeRows: true,
        autoExpandColumn: "company",
        height:350,
        width:600,
        title:"Array Grid"
    });
    grid.render("grid-example");
});
</script> 
<div id="grid-example"></div>
</body>
</html>



Set display field from ArrayStore for a field

  
<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 names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Set type for ArrayStore

  
<!--
/*!
 * 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(){
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var myData = [
        ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
        ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
        ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
        ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
        ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
        ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
        ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
        ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
        ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
        ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
        ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
        ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
        ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
        ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
        ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
        ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
        ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
        ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
        ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
        ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
        ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
        ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
        ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
        ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
        ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
        ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
        ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
        ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],            
        ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
    ];
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return "<span style="color:green;">" + val + "</span>";
        }else if(val < 0){
            return "<span style="color:red;">" + val + "</span>";
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return "<span style="color:green;">" + val + "%</span>";
        }else if(val < 0){
            return "<span style="color:red;">" + val + "%</span>";
        }
        return val;
    }
    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: "company"},
           {name: "price", type: "float"},
           {name: "change", type: "float"},
           {name: "pctChange", type: "float"},
           {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
        ]
    });
    store.loadData(myData);
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
            {header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
        ],
        stripeRows: true,
        autoExpandColumn: "company",
        height:350,
        width:600,
        title:"Array Grid"
    });
    grid.render("grid-example");
});
</script> 
<div id="grid-example"></div>
</body>
</html>



Use ArrayStore to create a combobox field

  
<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 names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Use Ext.data.ArrayStore with Ext.form.ComboBox

  
<!--
/*!
 * 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
 */
// some data used in the examples
Ext.namespace("Ext.exampledata");
Ext.exampledata.states = [
        ["AL", "Alabama", "The Heart of Dixie"],
        ["AK", "Alaska", "The Land of the Midnight Sun"],
        ["AZ", "Arizona", "The Grand Canyon State"],
        ["AR", "Arkansas", "The Natural State"],
        ["CA", "California", "The Golden State"],
        ["CO", "Colorado", "The Mountain State"],
        ["CT", "Connecticut", "The Constitution State"],
        ["DE", "Delaware", "The First State"],
        ["DC", "District of Columbia", "The Nation"s Capital"],
        ["FL", "Florida", "The Sunshine State"],
        ["GA", "Georgia", "The Peach State"],
        ["HI", "Hawaii", "The Aloha State"],
        ["ID", "Idaho", "Famous Potatoes"],
        ["IL", "Illinois", "The Prairie State"],
        ["IN", "Indiana", "The Hospitality State"],
        ["IA", "Iowa", "The Corn State"],
        ["KS", "Kansas", "The Sunflower State"],
        ["KY", "Kentucky", "The Bluegrass State"],
        ["LA", "Louisiana", "The Bayou State"],
        ["ME", "Maine", "The Pine Tree State"],
        ["MD", "Maryland", "Chesapeake State"],
        ["MA", "Massachusetts", "The Spirit of America"],
        ["MI", "Michigan", "Great Lakes State"],
        ["MN", "Minnesota", "North Star State"],
        ["MS", "Mississippi", "Magnolia State"],
        ["MO", "Missouri", "Show Me State"],
        ["MT", "Montana", "Big Sky Country"],
        ["NE", "Nebraska", "Beef State"],
        ["NV", "Nevada", "Silver State"],
        ["NH", "New Hampshire", "Granite State"],
        ["NJ", "New Jersey", "Garden State"],
        ["NM", "New Mexico", "Land of Enchantment"],
        ["NY", "New York", "Empire State"],
        ["NC", "North Carolina", "First in Freedom"],
        ["ND", "North Dakota", "Peace Garden State"],
        ["OH", "Ohio", "The Heart of it All"],
        ["OK", "Oklahoma", "Oklahoma is OK"],
        ["OR", "Oregon", "Pacific Wonderland"],
        ["PA", "Pennsylvania", "Keystone State"],
        ["RI", "Rhode Island", "Ocean State"],
        ["SC", "South Carolina", "Nothing Could be Finer"],
        ["SD", "South Dakota", "Great Faces, Great Places"],
        ["TN", "Tennessee", "Volunteer State"],
        ["TX", "Texas", "Lone Star State"],
        ["UT", "Utah", "Salt Lake State"],
        ["VT", "Vermont", "Green Mountain State"],
        ["VA", "Virginia", "Mother of States"],
        ["WA", "Washington", "Green Tree State"],
        ["WV", "West Virginia", "Mountain State"],
        ["WI", "Wisconsin", "America"s Dairyland"],
        ["WY", "Wyoming", "Like No Place on Earth"]
    ];
/*!
 * 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();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var fs = new Ext.FormPanel({
        frame: true,
        title:"XML Form",
        labelAlign: "right",
        labelWidth: 85,
        width:340,
        waitMsgTarget: true,
        // configure how to read the XML Data
        reader : new Ext.data.XmlReader({
            record : "contact",
            success: "@success"
        }, [
            {name: "first", mapping:"name/first"}, // custom mapping
            {name: "last", mapping:"name/last"},
            "company", "email", "state",
            {name: "dob", type:"date", dateFormat:"m/d/Y"} // custom data types
        ]),
        // reusable eror reader class defined at the end of this file
        errorReader: new Ext.form.XmlErrorReader(),
        items: [
            new Ext.form.FieldSet({
                title: "Contact Information",
                autoHeight: true,
                defaultType: "textfield",
                items: [{
                        fieldLabel: "First Name",
                        name: "first",
                        width:190
                    }, {
                        fieldLabel: "Last Name",
                        name: "last",
                        width:190
                    }, {
                        fieldLabel: "Company",
                        name: "company",
                        width:190
                    }, {
                        fieldLabel: "Email",
                        name: "email",
                        vtype:"email",
                        width:190
                    },
                    new Ext.form.ruboBox({
                        fieldLabel: "State",
                        hiddenName:"state",
                        store: new Ext.data.ArrayStore({
                            fields: ["abbr", "state"],
                            data : Ext.exampledata.states // from states.js
                        }),
                        valueField:"abbr",
                        displayField:"state",
                        typeAhead: true,
                        mode: "local",
                        triggerAction: "all",
                        emptyText:"Select a state...",
                        selectOnFocus:true,
                        width:190
                    }),
                    new Ext.form.DateField({
                        fieldLabel: "Date of Birth",
                        name: "dob",
                        width:190,
                        allowBlank:false
                    })
                ]
            })
        ]
    });
    // simple button add
    fs.addButton("Load", function(){
        fs.getForm().load({url:"ext-3.0.0/examples/form/xml-form.xml", waitMsg:"Loading"});
    });
    // explicit add
    var submit = fs.addButton({
        text: "Submit",
        disabled:true,
        handler: function(){
            fs.getForm().submit({url:"ext-3.0.0/examples/form/xml-errors.xml", waitMsg:"Saving Data..."});
        }
    });
    fs.render("form-ct");
    fs.on({
        actioncomplete: function(form, action){
            if(action.type == "load"){
                submit.enable();
            }
        }
    });
});
// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){
    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
            record : "field",
            success: "@success"
        }, [
            "id", "msg"
        ]
    );
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
</script> 
<div id="form-ct"></div>
</body>
</html>