[extjs.git] / extjs / build / examples / classic / grid / force-fit-grid.js

Ext.require([\r
    'Ext.window.*',\r
    'Ext.grid.*',\r
    'Ext.data.*',\r
    'Ext.util.*',\r
    'Ext.state.*'\r
]);\r
\r
// Define Company entity\r
// Null out built in convert functions for performance *because the raw data is known to be valid*\r
// Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*\r
Ext.define('Company', {\r
    extend: 'Ext.data.Model',\r
    fields: [\r
       {name: 'company'},\r
       {name: 'price',      type: 'float', convert: null,     defaultValue: undefined},\r
       {name: 'change',     type: 'float', convert: null,     defaultValue: undefined},\r
       {name: 'pctChange',  type: 'float', convert: null,     defaultValue: undefined},\r
       {name: 'lastChange', type: 'date',  dateFormat: 'n/j h:ia', defaultValue: undefined}\r
    ],\r
    idProperty: 'company'\r
});\r
\r
Ext.onReady(function() {\r
    Ext.QuickTips.init();\r
\r
    // sample static data for the store\r
    var myData = [\r
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],\r
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],\r
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],\r
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],\r
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],\r
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],\r
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],\r
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],\r
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],\r
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],\r
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],\r
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],\r
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],\r
        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],\r
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],\r
        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],\r
        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],\r
        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],\r
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],\r
        ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],\r
        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],\r
        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],\r
        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],\r
        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],\r
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],\r
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],\r
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],\r
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],\r
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']\r
    ];\r
\r
    /**\r
     * Custom function used for column renderer\r
     * @param {Object} val\r
     */\r
    function change(val) {\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '</span>';\r
        } else if (val < 0) {\r
            return '<span style="color:red;">' + val + '</span>';\r
        }\r
        return val;\r
    }\r
\r
    /**\r
     * Custom function used for column renderer\r
     * @param {Object} val\r
     */\r
    function pctChange(val) {\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '%</span>';\r
        } else if (val < 0) {\r
            return '<span style="color:red;">' + val + '%</span>';\r
        }\r
        return val;\r
    }\r
\r
    // create the data store\r
    var store = Ext.create('Ext.data.Store', {\r
        model: 'Company',\r
        proxy: {\r
            type: 'memory',\r
            reader: 'array',\r
            data: myData\r
        },\r
        autoLoad: true\r
    });\r
\r
    // create the Grid\r
    var grid = Ext.create('Ext.grid.Panel', {\r
        store: store,\r
        collapsible: true,\r
        multiSelect: true,\r
        forceFit: true,\r
        border: false,\r
        header: false,\r
        columns: [\r
            {\r
                text     : 'Company',\r
                width: 200,\r
                sortable : false,\r
                dataIndex: 'company'\r
            },\r
            {\r
                text     : 'Price',\r
                width    : 75,\r
                sortable : true,\r
                formatter: 'usMoney',\r
                dataIndex: 'price'\r
            },\r
            {\r
                text     : 'Change',\r
                width    : 75,\r
                sortable : true,\r
                renderer : change,\r
                dataIndex: 'change'\r
            },\r
            {\r
                text     : '% Change',\r
                width    : 75,\r
                sortable : true,\r
                renderer : pctChange,\r
                dataIndex: 'pctChange'\r
            },\r
            {\r
                text     : 'Last Updated',\r
                width    : 85,\r
                sortable : true,\r
                formatter: 'date("m/d/Y")',\r
                dataIndex: 'lastChange'\r
            },\r
            {\r
                menuDisabled: true,\r
                sortable: false,\r
                xtype: 'actioncolumn',\r
                width: 50,\r
                items: [{\r
                    icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config\r
                    tooltip: 'Sell stock',\r
                    handler: function(grid, rowIndex, colIndex) {\r
                        var rec = store.getAt(rowIndex);\r
                        alert("Sell " + rec.get('company'));\r
                    }\r
                }, {\r
                    getClass: function(v, meta, rec) {          // Or return a class from a function\r
                        if (rec.get('change') < 0) {\r
                            return 'alert-col';\r
                        } else {\r
                            return 'buy-col';\r
                        }\r
                    },\r
                    getTip: function(v, meta, rec) {\r
                        if (rec.get('change') < 0) {\r
                            return 'Hold stock';\r
                        } else {\r
                            return 'Buy stock';\r
                        }\r
                    },\r
                    handler: function(grid, rowIndex, colIndex) {\r
                        var rec = store.getAt(rowIndex);\r
                        alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));\r
                    }\r
                }]\r
            }\r
        ],\r
        viewConfig: {\r
            stripeRows: true,\r
            enableTextSelection: true\r
        }\r
    });\r
\r
    new Ext.window.Window({\r
        title: 'Force fit grid - columns will always fit',\r
        maximizable: true,\r
        closable: false,\r
        animateTarget: true,\r
        width: 600,\r
        height: 400,\r
        minWidth: 300,\r
        minHeight: 200,\r
        layout: 'fit',\r
        items: grid\r
    }).show()\r
});\r
Commit	Line	Data
6527f429 DM	1	Ext.require([\r
	2	'Ext.window.*',\r
	3	'Ext.grid.*',\r
	4	'Ext.data.*',\r
	5	'Ext.util.*',\r
	6	'Ext.state.*'\r
	7	]);\r
	8	\r
	9	// Define Company entity\r
	10	// Null out built in convert functions for performance because the raw data is known to be valid\r
	11	// Specifying defaultValue as undefined will also save code. As long as there will always be values in the data, or the app tolerates undefined field values\r
	12	Ext.define('Company', {\r
	13	extend: 'Ext.data.Model',\r
	14	fields: [\r
	15	{name: 'company'},\r
	16	{name: 'price', type: 'float', convert: null, defaultValue: undefined},\r
	17	{name: 'change', type: 'float', convert: null, defaultValue: undefined},\r
	18	{name: 'pctChange', type: 'float', convert: null, defaultValue: undefined},\r
	19	{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia', defaultValue: undefined}\r
	20	],\r
	21	idProperty: 'company'\r
	22	});\r
	23	\r
	24	Ext.onReady(function() {\r
	25	Ext.QuickTips.init();\r
	26	\r
	27	// sample static data for the store\r
	28	var myData = [\r
	29	['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],\r
	30	['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],\r
	31	['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],\r
	32	['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],\r
	33	['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],\r
	34	['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],\r
	35	['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],\r
	36	['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],\r
	37	['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],\r
	38	['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],\r
	39	['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],\r
	40	['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],\r
	41	['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],\r
	42	['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],\r
	43	['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],\r
	44	['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],\r
	45	['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],\r
	46	['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],\r
	47	['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],\r
	48	['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],\r
	49	['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],\r
	50	['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],\r
	51	['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],\r
	52	['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],\r
	53	['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],\r
	54	['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],\r
	55	['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],\r
	56	['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],\r
	57	['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']\r
	58	];\r
	59	\r
	60	/**\r
	61	* Custom function used for column renderer\r
	62	* @param {Object} val\r
	63	*/\r
	64	function change(val) {\r
65	if (val > 0) {\r
66	return '<span style="color:green;">' + val + '</span>';\r
67	} else if (val < 0) {\r
68	return '<span style="color:red;">' + val + '</span>';\r
69	}\r
70	return val;\r
71	}\r
72	\r
73	/**\r
74	* Custom function used for column renderer\r
75	* @param {Object} val\r
76	*/\r
77	function pctChange(val) {\r
78	if (val > 0) {\r
79	return '<span style="color:green;">' + val + '%</span>';\r
80	} else if (val < 0) {\r
81	return '<span style="color:red;">' + val + '%</span>';\r
82	}\r
83	return val;\r
84	}\r
85	\r
86	// create the data store\r
87	var store = Ext.create('Ext.data.Store', {\r
88	model: 'Company',\r
89	proxy: {\r
90	type: 'memory',\r
91	reader: 'array',\r
92	data: myData\r
93	},\r
94	autoLoad: true\r
95	});\r
96	\r
97	// create the Grid\r
98	var grid = Ext.create('Ext.grid.Panel', {\r
99	store: store,\r
100	collapsible: true,\r
101	multiSelect: true,\r
102	forceFit: true,\r
103	border: false,\r
104	header: false,\r
105	columns: [\r
106	{\r
107	text : 'Company',\r
108	width: 200,\r
109	sortable : false,\r
110	dataIndex: 'company'\r
111	},\r
112	{\r
113	text : 'Price',\r
114	width : 75,\r
115	sortable : true,\r
116	formatter: 'usMoney',\r
117	dataIndex: 'price'\r
118	},\r
119	{\r
120	text : 'Change',\r
121	width : 75,\r
122	sortable : true,\r
123	renderer : change,\r
124	dataIndex: 'change'\r
125	},\r
126	{\r
127	text : '% Change',\r
128	width : 75,\r
129	sortable : true,\r
130	renderer : pctChange,\r
131	dataIndex: 'pctChange'\r
132	},\r
133	{\r
134	text : 'Last Updated',\r
135	width : 85,\r
136	sortable : true,\r
137	formatter: 'date("m/d/Y")',\r
138	dataIndex: 'lastChange'\r
139	},\r
140	{\r
141	menuDisabled: true,\r
142	sortable: false,\r
143	xtype: 'actioncolumn',\r
144	width: 50,\r
145	items: [{\r
146	icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config\r
147	tooltip: 'Sell stock',\r
148	handler: function(grid, rowIndex, colIndex) {\r
149	var rec = store.getAt(rowIndex);\r
150	alert("Sell " + rec.get('company'));\r
151	}\r
152	}, {\r
153	getClass: function(v, meta, rec) { // Or return a class from a function\r
154	if (rec.get('change') < 0) {\r
155	return 'alert-col';\r
156	} else {\r
157	return 'buy-col';\r
158	}\r
159	},\r
160	getTip: function(v, meta, rec) {\r
161	if (rec.get('change') < 0) {\r
162	return 'Hold stock';\r
163	} else {\r
164	return 'Buy stock';\r
165	}\r
166	},\r
167	handler: function(grid, rowIndex, colIndex) {\r
168	var rec = store.getAt(rowIndex);\r
169	alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));\r
170	}\r
171	}]\r
172	}\r
173	],\r
174	viewConfig: {\r
175	stripeRows: true,\r
176	enableTextSelection: true\r
177	}\r
178	});\r
179	\r
180	new Ext.window.Window({\r
181	title: 'Force fit grid - columns will always fit',\r
182	maximizable: true,\r
183	closable: false,\r
184	animateTarget: true,\r
185	width: 600,\r
186	height: 400,\r
187	minWidth: 300,\r
188	minHeight: 200,\r
189	layout: 'fit',\r
190	items: grid\r
191	}).show()\r
192	});\r