Using Ext-JS UI widgets

Put your questions here on how to do things in ProtoShare.
eguttman
Posts: 4
Joined: Mon Feb 01, 2010 9:42 pm

Using Ext-JS UI widgets

Postby eguttman » Mon Feb 01, 2010 10:29 pm

Anyone have any examples I can reference to see how to use Ext-JS widgets in my wireframes?

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Using Ext-JS UI widgets

Postby Josh Kristof » Wed Feb 03, 2010 9:07 am

Eguttman,

The link below will take you to a blog posting that has an example using jQuery and I believe in the video several examples use Ext-JS. If you'd like a more specific example of how to use the advanced HTML component with Ext-JS please let me know.

Create & Add Your Own Components in the Sandbox
Josh Kristof
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

thordivel
Posts: 7
Joined: Wed Sep 16, 2009 4:14 am
Location: Norway
Contact:

Re: Using Ext-JS UI widgets

Postby thordivel » Tue Feb 23, 2010 4:49 am

Thanks for the details Josh. Would it be possible for you to show a few examples of how to use some of the grids in http://www.extjs.com/deploy/dev/examples/#sample-3? I'm mostly interested in seeing how the referencing of the .js files are done.

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Using Ext-JS UI widgets

Postby Josh Kristof » Wed Feb 24, 2010 12:39 pm

Thor,

Below is code taken from the Basic Array Grid example on the Ext JS site. You can either host your resources outside of ProtoShare or upload them as assets. In my example I uploaded the CSS and JS to a folder called Grid. You would also need to upload all images referenced in the CSS for the grid to display correctly.

Code: Select all

<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="/Assets/Grid/ext-all.css" />

<!-- overrides to base library -->

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="/Assets/Grid/examples.css" />
<link rel="stylesheet" type="text/css" href="/Assets/Grid/grid-examples.css" />

<style type=text/css>
/* style rows on mouseover */
.x-grid3-row-over .x-grid3-cell-inner {
font-weight: bold;
}
</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="/Assets/Grid/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="/Assets/Grid/ext-all.js"></script>

<!-- overrides to base library -->

<!-- page specific -->
<script type="text/javascript" src="/Assets/Grid/array-grid.js"></script>

</head>
<body style="background-color: transparent !important;">
<div id="grid-example"></div>
</body>
</html>
Josh Kristof
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

vamsi
Posts: 1
Joined: Wed May 25, 2011 8:19 am

Re: Using Ext-JS UI widgets

Postby vamsi » Wed May 25, 2011 8:27 am

How to upload CSS and JS files ?
Documentation says

Uploading Assets

To use images, movies, and other assets in your designs, they must be uploaded into ProtoShare. You can upload assets two ways: using the Assets screen or using content-related components such as Image and Rich Text.

To upload assets, follow these steps:

1 Click the Library tab.
The Library contains all the reusable resources available within the project, including assets.
2 Select the asset folder.
Select the default asset folder or create a new folder. Note that you can move assets around by dragging them from one folder to another.
3 Upload assets.
Click File > Upload Assets, and select the assets to upload from your computer.


But I don't see 'upload Assets' option.

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Using Ext-JS UI widgets

Postby Josh Kristof » Thu May 26, 2011 10:29 am

How to upload CSS and JS files ?
Documentation says

Uploading Assets

To use images, movies, and other assets in your designs, they must be uploaded into ProtoShare. You can upload assets two ways: using the Assets screen or using content-related components such as Image and Rich Text.

To upload assets, follow these steps:

1 Click the Library tab.
The Library contains all the reusable resources available within the project, including assets.
2 Select the asset folder.
Select the default asset folder or create a new folder. Note that you can move assets around by dragging them from one folder to another.
3 Upload assets.
Click File > Upload Assets, and select the assets to upload from your computer.


But I don't see 'upload Assets' option.
Make sure you have the newest version of Flash installed and it's enabled in your browser. This is needed to be able to use the upload assets feature. If after this, you still don't see the control, please post a screenshot of what you're seeing.
Josh Kristof
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare


Return to “How Do I...”

Who is online

Users browsing this forum: No registered users and 1 guest

cron