Sencha Touch 2.3.1 Basic Grid Example

Developer
Shayne Trosdahl
Size
2,770 Kb
Views
22,264
  1. Sencha Touch 2.3.1 Basic Grid Example Previews
  2. Sencha Touch 2.3.1 Basic Grid Example HTML Codes
  3. Sencha Touch 2.3.1 Basic Grid Example CSS Codes
  4. Sencha Touch 2.3.1 Basic Grid Example JS Codes

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,264
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
Textfield PlaceHolder as Icon
Push to Nested Array
Sencha Touch Button Icon Size CSS
Fiddling with Drag and Drop
Test Prof Mode
Viewport Text Width CSS
Varied Size Text Centered Vertically
Basic JS Callback Examples
1em Sizing Side-by-Side Comparison
A Pen by Shayne Trosdahl
Create amazing web content 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!