Page 1 of 1

Include standard Ext-JS Elements

Posted: Wed Jan 19, 2011 3:29 am
by a.kant

I just started to use Protoshare and I am already a bit frustrated. Hope, it would help me to save time, but so far no luck. Please note, that I only have basic programming skills. Things need to work copy & paste, otherwise I have to switch back to powerpoint...

We are using Ext-Js Framework. They have a very nice page with all sample elements ( I would like to use all these sample elements in Protshare in an advanced html box.

Right now, I would like to include a basic Ext-js grid ( in protoshare. I will poste the EXT-JS code below. Could someone please help me what I have to add before and after this code? Ext-js is hosted by google..

Many thanks...


* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.

// 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());

// sample static data for the store
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']

* Custom function used for column renderer
* @param {Object} val
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;

* Custom function used for column renderer
* @param {Object} val
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{
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

// manually load local data

// 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'
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'

// render the grid to the specified div in the page

Re: Include standard Ext-JS Elements

Posted: Thu Jan 20, 2011 1:14 pm
by Josh Kristof
If you need to use specific Ext-JS components in your wireframe, you'll need to do a couple of things in the Advanced HTML component to get them to work. What you pasted is just the array-grid.js file. The Advanced HTML component should have the basic HTML used on the example page as well as correct links to the appropriate Ext library files and the other various JS and CSS files referenced. You can either host them somewhere or upload them to the Assets section of the Library for your ProtoShare account and then reference them such as /Assets/Ext/adapter/ext/ext-base.js.

Re: Include standard Ext-JS Elements

Posted: Fri May 27, 2011 3:03 pm
by dgardner
I also wanted to use a sample Sencha EXT JS element, the array-grid. After reading all the posts on this forum, I still wasn't able to get the array-grid element to render. Josh's response to my help query cleared everything up.

Here's what I did:

1) Downloaded the required HTML, JS, CSS, and GIF files to my computer. I determined the paths to these files from the 'src' and 'href' locations specified in array-grid.html.

Note: Although you can download and run the bootstrap.js file to your local computer, I couldn't run it on Protoshare. Basically, bootstrap.js determines whether to load the "human readable" ext-all-debug.js file based on whether it is running in a Production or a Development/Test environment. However, Protoshare seemed to have issues executing bootstrap.js, so I modified array-grid.html not to load it.

Download these files:
array-grid.html - ... -grid.html

array-grid.js - ... ay-grid.js
ext-all.js -
ext-all-debug.js -

ext-all.css - ... xt-all.css
ext-all-debuy.css - ... -debug.css

accept.gif - ... accept.gif
delete.gif - ... delete.gif
error.gif - ... /error.gif

2. Upload all of the files except array-grid.html into a folder in your Library > Assets directory. I created new folders with the path: Library > Assets > Sencha > Ext-JS.

3. After dragging an Advanced HTML component onto the canvas, paste the HTML content from the array-grid.html (on your computer) into the component's editor (in Protoshare).

4. Now comes the fun part, editing the HTML (in Protoshare) while also making changes to the Javascript on your computer and uploading the slightly modified assets to Protoshare (Protoshare doesn't allow you to edit JS files). Note: Not all of these steps would be required if I was able to reference the CSS, JS and GIF assets in the /Asset/Sencha/Ext-JS/ path I created, but unfortunately, it didn't work for me, so instead, I had to reference each asset file by it's URL. You can get the asset URL by right-clicking on the asset and selecting "Get URL" from the menu.

Here's what my updated my array-grid.html (in the Advanced HTML component editor) looked like after I finished:

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="/wa/asset?oid=3570" />
<link rel="stylesheet" type="text/css" href="/wa/asset?oid=3571" />
<script type="text/javascript" src="/wa/asset?oid=3569"></script>

<!-- page specific -->
<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
/* shared styles for the ActionColumn icons */
.x-action-col-cell img {
height: 16px;
width: 16px;
cursor: pointer;
/* custom icon for the "buy" ActionColumn icon */
.x-action-col-cell {
background-image: url(/wa/asset?oid=3579);
/* custom icon for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
background-image: url(/wa/asset?oid=3578);
<script type="text/javascript" src="/wa/asset?oid=3581"></script>
<h1>Stateful Array Grid Example</h1>
<p>This example shows how to create a grid from Array data.</p>
<p>The grid is stateful so you can move or hide columns, reload the page, and come
back to the grid in the same state you left it in.</p>
<p>Note that the js is not minified so it is readable. See <a href="/wa/asset?oid=3581">array-grid.js</a>.</p>
<div id="grid-example"></div>
Each "/wa/asset?oid=35xx" string is the URL of the referenced asset. (Obviously, the URL references for your assets will be different). Although it's difficult to tell from the code above, I changed the link to bootstrap.js to instead refer to the ext-all-debug.js by its URL. By doing this, I avoided the issue that caused me problems.

I also updated the array-grid.js as follows:

Code: Select all

items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',

Code: Select all

items: [{
icon : '/wa/asset?oid=3580', // Use a URL in the icon config
tooltip: 'Sell stock',
After making these changes I was able to get the array-grid to render and function properly. Because 3rd party Javascript widgets like Sencha's require appearance or behavioral changes to be made in code, they require a bit more work than simply changing an existing component's attributes.

Thanks to Josh Kristof for helping me work out the kinks!