Sencha Touch 2.3.1 Basic Grid Example
How do I make an sencha touch 2.3.1 basic grid example?
Here's a basic ST Grid running in 2.3.1. Some people have had issues so here's a working example to reference if your's is not :) . What is a sencha touch 2.3.1 basic grid example? How do you make a sencha touch 2.3.1 basic grid example? This script and codes were developed by Shayne Trosdahl on 18 November 2022, Friday.
Sencha Touch 2.3.1 Basic Grid Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sencha Touch 2.3.1 Basic Grid Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="http://trozdol.com/st-2.3/sencha-touch-all.js"></script> <script type="text/javascript" src="http://trozdol.com/st-2.3/sencha-touch-grid.js"></script> <link rel="stylesheet" type="text/css" href="http://trozdol.com/st-2.3/sencha-touch.css"> <script src="js/index.js"></script>
</body>
</html>
Sencha Touch 2.3.1 Basic Grid Example - Script Codes CSS Codes
@import "compass/css3";
Sencha Touch 2.3.1 Basic Grid Example - Script Codes JS Codes
Ext.setup({ onReady: function() { Ext.Viewport.add({ xtype: 'container', defaults: { margin: 20, padding: 20 }, layout: 'card', items: [{ xtype: 'grid', requires: ['Ext.grid.Grid', 'Ext.grid.HeaderGroup', 'Ext.grid.plugin.Editable', 'Ext.grid.plugin.ViewOptions', 'Ext.grid.plugin.MultiSelection', 'Ext.grid.plugin.ColumnResizing', 'Ext.grid.plugin.SummaryRow' ], // DEMO DATA STORE store: { fields: ['company', 'sales', 'grossprofit', 'something', 'somethingtwo', 'thing3'], data: [{ company: '3m Co', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Exxon', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Frito Lay', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Del Taco', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Coca Cola', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Exxon', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Frito Lay', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Del Taco', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Coca Cola', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Exxon', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Frito Lay', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Del Taco', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }, { company: 'Coca Cola', sales: '000.00', grossprofit: '000.00', something: 'xxxxxx', somethingtwo: 'xxxxxx', thing3: '$123456.12' }] }, // SET THE TITLEBAR OF GRID title: 'Sencha Touch Grid', // DON'T WANT THE TITLEBAR? // titleBar: false, // To Hide the Grid Toolbar // YOU CAN ALSO CONFIGURE THE TITLEBAR LIKE SO.. titleBar: { items: [{ xtype: 'label', html: 'A Label' }, { xtype: 'button', text: 'Toolbar Button', align: 'right' }, { xtype: 'button', text: 'Another Button', align: 'right' }] }, // CONTAINER FOR COLUMN TITLES headerContainer: { height: 65 }, // HEIGHT OF EACH ROW // IF YOU CHANGE THIS YOU NEED TO ADJUST CSS LINE-HEIGHT TO MATCH itemHeight: 60, // GRID COLUMNS CONFIG columns: [{ text: 'Company', dataIndex: 'company', width: 150 }, { text: 'Sales', width: 150, }, { // YOU CAN GROUP COLUMNS LIKE THIS xtype: 'gridheadergroup', text: 'Column Groups', items: [{ text: 'Gross Profit', dataIndex: 'grossprofit', width: 150 }, { text: 'Sales', dataIndex: 'sales', width: 150 }] }, { text: 'Something Two', dataIndex: 'somethingtwo', width: 150 }, { text: 'Thing 3', dataIndex: 'thing3', width: 150 }] }] }); }
});
Developer | Shayne Trosdahl |
Username | Trozdol |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,770 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sencha Touch Grid Text Wrap Test | 2,312 Kb |
1em Sizing Side-by-Side Comparison | 2,397 Kb |
Test Prof Mode | 1,484 Kb |
CSS Size Value Comparison of 10 | 2,279 Kb |
Turn Off Smart Quotes in Mac OS X | 5,299 Kb |
Textfield PlaceHolder as Icon | 2,334 Kb |
SVG Logo Animation | 2,807 Kb |
Viewport Text Width CSS | 1,720 Kb |
Example | 1,306 Kb |
Push to Nested Array | 1,374 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!