Sencha Touch 2.3.1 Basic Grid Example

Developer
Shayne Trosdahl
Size
2,770 Kb
Views
22,253

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 Previews
IQ Test

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 }] }] }); }
});
Sencha Touch 2.3.1 Basic Grid Example - Script Codes
Sencha Touch 2.3.1 Basic Grid Example - Script Codes
Home Page Home
Developer Shayne Trosdahl
Username Trozdol
Uploaded November 18, 2022
Rating 3
Size 2,770 Kb
Views 22,253
Do you need developer help for Sencha Touch 2.3.1 Basic Grid Example?

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!

Shayne Trosdahl (Trozdol) Script Codes
Name
How to Set Sencha Touch Chart Legend Labels
Test Prof Mode
Varied Size Text Centered Vertically
List Item
Turn Off Smart Quotes in Mac OS X
Textfield PlaceHolder as Icon
Simple Photo Button Example for Friends Reference
CSS Size Value Comparison of 10
SVG Logo Animation
Sencha Touch Button Icon Size CSS
Create amazing love letters with AI!

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!