PDA

View Full Version : Example Projects



aconran
23 Mar 2010, 2:55 AM
I've put together a few simple example project files (.xds files) which you can load up and test within the designer.

Feel free to share .xds with the community to illustrate how to achieve some common layouts.

Also feel free to ask about how to achieve certain types of layouts and what type of templates you'd like to see.

aconran
23 Mar 2010, 3:39 AM
@ExtKD Any particular steps you're taking to get this project to crash? Not seeing any issues here.

goldkey
23 Mar 2010, 5:45 AM
I'm running Vista and when I attempt to extract files from the zip file, I have no luck. Has anyone else had any issues with this?
http://www.31ocean.com/images/zip.jpg

rommik
23 Mar 2010, 8:52 AM
Hello Aconran:

Thank you for these examples. They are very helpful to the first time users (like myself) :)
However, I can't seem to find the ../common/ folder.
I'd really like to take a look at the data files in it.

Also, it seems that when I unzip exampleproject.zip it contains exampleproject file that has to be renamed into exampleproject.zip and unzipped again.
Only then, I see the project folders. Was this done on purpose?

Thank you,

~rommik

rommik
23 Mar 2010, 9:13 AM
Download http://www.7-zip.org/ and try again. The issue is in Vista's and XP's zip program.



I'm running Vista and when I attempt to extract files from the zip file, I have no luck. Has anyone else had any issues with this?
http://www.31ocean.com/images/zip.jpg

wemerson.januario
23 Mar 2010, 9:16 AM
Works well. very good

tjyang
25 Mar 2010, 3:51 AM
Can you provide a complete example like the CRUD one in R1 ?
or my expectation of Ext Designer is too high ?
ie I am hoping Ext Designer is not only an User Interface Builder.

R1: http://www.extjs.com/learn/Tutorial:Grid_PHP_SQL_Part1

necco
25 Mar 2010, 5:01 AM
hi!
I'm beginner with ExtJS... I'm trying Ext Designer but I do not know how to atach handlers let's say for a button.
I have your example Projects... I studied them and please enlight me how, for example, to have an alert action (Ext.Msg.show({msg:'Hi'+ " the name taken from the form field " }) when I click the "Save" button from your SimpleForm example.

I know that the .ui.js file must remain untouched... so where to attach the handler?
Could you post a demo code or a demo .xds file to download?

Thanks.

andrij
25 Mar 2010, 8:24 AM
Thanks for the samples!

Where can I get ../common/data.json file that is used by Stores in these projects?

sheenashirley
27 Mar 2010, 1:18 AM
Thank you for these examples. They are very helpful to the first time users.
However, I can't seem to find the ../common/ folder.
I'd really like to take a look at the data files in it.

service plumber (http://www.plumberintemecula.info)

aconran
27 Mar 2010, 12:37 PM
We will be releasing some concrete examples of the best practices of tying event handlers to your components designed within the Designer.

konstruktor
28 Mar 2010, 2:19 PM
some concrete examples would be really good.

please post them as soon as possible.

thank you.

celiane
29 Mar 2010, 5:26 AM
Hello,
Great example of your project:)
Could we have demonstration videos + sources download
thank you

FoxTerrier
30 Mar 2010, 12:46 AM
Hi,
Sorry, but the zip file on top of this topic cannot be decompressed.
-with 7zip 4.65 (last) : just a file is extracted, without extension. This file has a "PK" header inside, but cannot be re-extracted.
-with win xp : failed
-with zipgenius : failed.
-linux unzip give this result (for an extraction of the extracted unique file descripted here above):

[root@server3 data]# unzip exampleProjects
Archive: exampleProjects
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Window/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Tabs/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Panel/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/ListView/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Grid/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Form/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/DataView/.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Window/hello.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Window/layout.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Tabs/tabs.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Panel/panel.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/ListView/listview.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Grid/companyarray.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/Form/forms.xds.
checkdir error: exampleProjects exists but is not directory
unable to process exampleProjects/DataView/dataview.xds.

Thanks ...

jaranza
30 Mar 2010, 5:04 PM
I just installed ExtDesigner on my ubuntu 9.10 box, loaded your sample projects without any problem.

Tried creating a project from scratch and did a code export again with no problem!

Great Work guys !!!

I've been waiting for this !

Thanks ...

korantin
1 Apr 2010, 2:22 PM
For people with problems to open the example file, it's a .gz.zip (2 compressions) file but with only the .zip (1 compression) extension.
So you need to add the .gz extension at your first extract, then after the second extraction you will have your files.
(problem occur with windows beause it's a linux compression)
:D

exampleProjects.zip
1 . Extract
=> exampleProjects
2. Rename
=> exampleProjects.gz
3. Extract again
=> project directories
=D>

or rename exampleProjects.zip by exampleProjects.gz.zip

(done with winrar)

dr1811
2 Apr 2010, 3:28 AM
Installed, built simple project, exported, worked!

Very good for assisting and re-enforcing ExtJS concepts in configuring components, etc.

Idea: It would be nice if when you were on a property in the configuration section and you hit f1, that you would be transferred to that property in that class in the API Doc. Just a thought.

Good job guys !!!

aconran
2 Apr 2010, 10:49 AM
Idea: It would be nice if when you were on a property in the configuration section and you hit f1, that you would be transferred to that property in that class in the API Doc. Just a thought.


I like it.

Madk
8 Apr 2010, 5:23 AM
We will be releasing some concrete examples of the best practices of tying event handlers to your components designed within the Designer.

Some news about that? :(

Madk
8 Apr 2010, 6:29 AM
Same here... :(
Thx for the link ExtKD

karlsnyder0
8 Apr 2010, 9:58 AM
This works:


var btn = Ext.getCmp('nameOfButton');
btn.setHandler(function(){
alert('Test nameOfButton');
});

ufologo22
12 Apr 2010, 11:42 AM
Hi there.
The ext examples provided here are great.
I think it would be very helpful to have a Designer example showing an Editable grid for a Mysql database. (php update script).

Nothing fancy, just a basic table.
Suggestions?

joshnesbitt
13 Apr 2010, 8:14 AM
We will be releasing some concrete examples of the best practices of tying event handlers to your components designed within the Designer.

It would be great to see how you guys envisage this working as we are planning on using the designer as the initial phase of creating a fully interactive application. Any suggestions on how to hook up events would be appreciated.

Cheers,
Josh

Pascal KEMAJOU
14 Apr 2010, 3:08 AM
Dear I'm new on Ext, i have a login window and i want to submit the form. Below is the code how to do to submit the form.


LoginWindow = Ext.extend(Ext.Window, {
title: '',
width: 400,
height: 295,
buttonAlign: 'right',
renderTo : 'loadingx',
closable: false,
resizable: false,
onActionComplete : function (f, a){
if(a && a.result && a.result.success){
this.loginPanel.get('lg_msg').setText('');
loginForm=false;
this.hide();
$('#menu').html('');
main_content();
$('#loadingx').fadeOut(500);
$('#loading-maskx').fadeOut(500);
this.destroy();
}
},
onActionFailed : function(f,a){
this.onCapthaChange();
var form = this.loginPanel.getForm();

this.loginPanel.get('lg_msg').setText(a.result.errors.msg);

if (a.result.errors.id){
var f = form.findField(a.result.errors.id);
if(f){
f.focus();
}
}
},
onCapthaChange : function(){
var captchaURL = this.captchaURL;
var curr = Ext.get('activateCodeImg');
curr.slideOut('b', {callback: function(){
Ext.get( 'activateCodeImg' ).dom.src= captchaURL+new Date().getTime();
curr.slideIn('t');
}},this);
},
initComponent: function() {

this.submitUrl = "chklogin.php";
this.captchaURL = "captcha/CaptchaSecurityImages.php?width=160&height=80&characters=4&t=";
var boxCaptcha = new Ext.BoxComponent({
columnWidth:.35,
autoEl: {
tag:'img'
,id: 'activateCodeImg'
,title : 'Cliquez pour changer le code'
,src:this.captchaURL+new Date().getTime()
}
});

boxCaptcha.on('render',function (){
var curr = Ext.get('activateCodeImg');
curr.on('click',this.onCapthaChange,this);
},this);

this.items = [
{
xtype: 'panel',
title: '',
height: 100,
html: '<div class="logox3_bw"></div>',
border: false
},
{
xtype: 'form',
id: 'loginpanel',
name: 'loginpanel',
baseParams : {
task : 'login'
},
listeners: {
'actioncomplete': {
fn: this.onActionComplete,
scope: this
},
'actionfailed': {
fn: this.onActionFailed,
scope: this
}
},
url: this.submitUrl,
title: '',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
bodyStyle: 'padding:5px',
frame: false,
border: false,
footer: false,
buttonAlign: 'right',
items: [
{
xtype: 'panel',
title: '',
layout: 'column',
border: false,
bodyStyle: '',
items: [
{
xtype: 'panel',
title: '',
layout: 'form',
border: false,
columnWidth: 0.65,
layoutConfig: {
labelSeparator: ''
},
items: [
{
xtype: 'textfield',
fieldLabel: 'User Name',
anchor: '100%',
id: 'username'
},
{
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '100%',
inputType: 'password',
id: 'password'
},
{
xtype: 'textfield',
fieldLabel: 'Cryptograph',
anchor: '100%',
id: 'code'
}
]
},
{
xtype: 'panel',
title: '',
layout: 'form',
columnWidth: 0.35,
bodyStyle: 'padding-left:5px',
border: false,
items: [
boxCaptcha
]
}
]
},
{
xtype: 'tbtext',
text: ' ',
style: '',
cls: 'lgErr',
id: 'lg_msg'
},
{
xtype: 'button',
text: 'Login',
type: 'submit',
iconCls: 'keymenu',
handler: onSubmit
}
]
}
];
this.bbar = {
xtype: 'toolbar',
items: [
{
xtype: 'tbtext',
text: 'Copyright (c) 2010 Concept SARL'
}
]
};

var form = Ext.getCmp('loginpanel').getForm();
function onSubmit() {
//form.submit({
// reset : true
//});
};

LoginWindow.superclass.initComponent.call(this);
}
});



Bests Regards.

treadmill
19 Apr 2010, 5:27 AM
Yes, I would really like to know how to do this. I'm currently working on a project using Ext Designer, so I'm pretty desperate to see examples.

Madk
19 Apr 2010, 5:33 AM
+1

Manar
26 Apr 2010, 3:15 AM
hi,

me too, want some concret example with php files.
thanks alot

devtig
30 Apr 2010, 11:41 PM
Can you provide a complete example like the CRUD one in R1 ?
or my expectation of Ext Designer is too high ?
ie I am hoping Ext Designer is not only an User Interface Builder.

R1: http://www.extjs.com/learn/Tutorial:Grid_PHP_SQL_Part1

I believe Ext Designer still is just a ui builder. As well as a lot of other users here on the forum, I expect more of the Designer in the near future. Ext Direct integration, basic crud operations on grid or forms, event handling...

RoyW
12 May 2010, 3:16 PM
This is a conversion of the Array Grid Example (http://www.extjs.com/deploy/dev/examples/grid/array-grid.html) to use the Ext Designer

Instructions
- put the 2 files in the same directory.
- rename ArrayGrid.js.txt to ArrayGrid.js
- Start Ext Designer
- File->Open Project
- browse to and open "array_grid.xds"
- click "Export Project"
- open "xds_index.html" in a web browser

Notes:
The file ArrayGrid.js shows how to add custom renderers to the grid without touching the ArrayGridUi.js code

RoyW
12 May 2010, 3:27 PM
This is a conversion of the XML Grid Example (http://www.extjs.com/deploy/dev/examples/grid/xml-grid.html) to use the Ext Designer

Instructions
- put the 2 files in the same directory (NOTE: The files need to be on a web server).
- rename sheldon.xml.txt to sheldon.xml
- Start Ext Designer
- File->Open Project
- browse to and open "xml_grid.xds"
- click "Export Project"
- open "xds_index.html" in a web browser

joshnesbitt
12 May 2010, 3:28 PM
Thanks for the examples. Much appreciated.

RoyW
12 May 2010, 3:37 PM
This is a conversion of the Editor Grid Example (http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html) to use ExtJS Designer.
This was very difficult to convert and is not a complete conversion because I could not find an easy way to add an editable checkbox column.

Instructions
- put the 3 files in the same directory (NOTE: The files need to be on a web server).
- rename sheldon.xml.txt to sheldon.xml
- rename PlantEditorGrid.js.txt to PlantEditor.js
- Start Ext Designer
- File->Open Project
- browse to and open "project.xds"
- click "Export Project"
- open "xds_index.html" in a web browser

lorezyra
18 Jul 2010, 3:50 AM
Hey Aconran,
Can we get these bundled with the XDS install?

wang888
27 Aug 2010, 12:58 AM
I'm running Vista and when I attempt to extract files from the zip file

nadim59
16 Sep 2010, 5:50 AM
Hi, aconran.
I cannot download exampleProjects.zip. Firefox saves always a attachment.php.html instead of the zip file

xonixx
16 Sep 2010, 7:50 AM
Use wget ;)

stewardman
23 Sep 2010, 8:17 AM
I thought this might be a "Getting Started" kind of thing. But no instructions for what to do after download. If you can't say where to put it or open it, perhaps a link to some getting started page that will explain what we do with xds files.

JimR
2 Nov 2010, 6:39 AM
I missed these examples the first time -- -- thanks! I do understand why people are getting stuck though, because I am. Let me go through this step by step and ask what I'm doing wrong:

1. Download the files.
2. Put them in their own directory (e.g., "/array") in web root.
3. Take the .txt of the ends of the appropriate files.
4. Open the .xds file (just double-click, assuming you have Designer installed).
5. In Designer, go to Edit --> Edit preferences. Set the "Ext JS Path" appropriately. I use ../js/extjs/ (that is, I have a folder in the web root called js, and in it is extjs, so that one copy of ext js is available to all projects).
6. Save the project to commit the Preference changes.
7. Export the project.

That's where the problem comes in... Nothing exports. No error. No files written. The preview works fine and the settings are the same as what I usefor working projects. Don't understand how it can simply not export anything.

RoyW
2 Nov 2010, 7:45 AM
All the files should be exported to your /array directory unless you change "Export Path" in the preferences.
When you click export there should be a message at the bottom of the designer in the status window showing where the files have been exported. You have to be quick as the message is displayed only briefly.

JimR
2 Nov 2010, 7:59 AM
Yes, I saw the message, and it appeared to be correct - but no files are exported.
23110

JimR
4 Nov 2010, 2:56 PM
Never mind -- my mistake. This was a permission issue. Somehow the different project folders got created with different permissions. Just one suggestion: Have Designer check that the files were actually written, else give an error.

eric_burcham
12 Nov 2010, 12:51 PM
We will be releasing some concrete examples of the best practices of tying event handlers to your components designed within the Designer.

Did this happen, and if so, where can we find them?

aiso
26 Nov 2010, 2:39 AM
Hi guys,

Great example, but is something available in this forum like a tuto or a project (.xsd) where I could find the way to develop this following example?
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

It is exactly what I need and I have some difficulties to do it with the developer tool.

PS: Not with each options I mean, but just the Tree and the navigation in 2-3 different forms.

nikky
29 Nov 2010, 2:07 PM
how I can activate the EXT designer because I installed it and when I run it I have to put username and password and I put it says (Unable Ext designer comunication with server license)

JimR
29 Nov 2010, 3:01 PM
Having recently activated Designer I can say I did not see that issue. It does beg the question though of troubleshooting license activation. I'd suggest that you submit a trouble ticket, but it would also be nice if the devs could document the process for us, such as whether license activation requires certain ports to be open, and if there is a way to activate on a machine without internet access. In short, I can't answer your question, but I think it's an important one to address in more detail than just fixing the immediate issue so that others can avoid the same types of problems.

aiso
8 Dec 2010, 2:09 AM
Hello,

Below, I am trying to precise my question.


Hi guys,

Great example, but is something available in this forum like a tuto or a project (.xsd) where I could find the way to develop this following example?
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

It is exactly what I need and I have some difficulties to do it with the developer tool.

PS: Not with each options I mean, but just the Tree and the navigation in 2-3 different forms.

Create a menu with a TreePanel:
http://www.racontetonvoyage.ch/autre/menu1.jpg

In the panel « My Panel », display:
1. Either the « searchProject » form
http://www.racontetonvoyage.ch/autre/menu2.jpg

2. Or the « searchReport » form
http://www.racontetonvoyage.ch/autre/menu3.jpg

The two forms searchProjectScreen and searchARScreen have to be linked to searchProjectLink and searchARLink treeNodes.
http://www.racontetonvoyage.ch/autre/menu4.jpg

I don't know how to link the two forms with the two links!
And when I try to export and run the appli, the following is displayed.
http://www.racontetonvoyage.ch/autre/menu5.jpg

miklos.vigh
10 Dec 2010, 5:34 AM
Hi RoyW,

I have realized that for feeding Light column's combos you have defined an ArrayStore in PlantEditorGrid.js, however the provided plants.xml contains the same data. Does it mean that there is no way to explicitly map it in Ext Designer itself?

Cheers,
M.

tomdchi
25 Jan 2011, 1:16 PM
We will be releasing some concrete examples of the best practices of tying event handlers to your components designed within the Designer.

Almost a year later and nothing?? What gives?

richardcue
24 Feb 2011, 9:00 AM
Where are the data files "common/data.json"

Why not put them in the .zip file or explain where to find them ?

Also, is there an example project of how to use the TreeLoader - the ExtDesigner documentation is very limited in terms of worked examples.

Thanks

rishi87bachchav
17 May 2011, 11:25 PM
Hello Aconran:

I tried to unzip these projects, but was unable to do so. Actually I'm new to ext js and have developed some screens using form and column layouts. But the look and feel using these layouts is not so good in my case .So can you suggest any other way to achieve same result. Requirement is that I'm having 15-20 fields which are divided in to two columns and two sections and a grid at bottom, to add these above records.

Any help is appreciated.
Thank you in adv.

Rhanxerox
14 Jul 2011, 11:56 AM
How i do that??? I can't put an image icon in my buttons :((

ikkysleepy
5 Aug 2011, 10:28 AM
Can we please get working examples? These don't work for the beta build, 1.2. when I export them.

Also the buttons don't save the data or close or do any actions. I though the purpose of examples were to demonstrate how things work? Can some one please post working examples of EXTJS4.0? A repost with working buttons would work. It's difficult to grasp how the Save button or Close button get executed.

It seems that the designer tool is just that a designer tool and the actual programing is not done in the designer tool? If this is in fact the case, please don't show the Code button. It's frustrating that the code button exist but you can't edit the code. If you don't want to give your users the ability to edit the code then at least have a button to edit the code in a text editor.


Thanks!

tomdchi
5 Aug 2011, 12:01 PM
Designer is not a IDE and you will not be able to make any changes to the code directly in designer. The purpose of designer is for UI design only. I use the show code feature extensively. You can always copy the code to clipboard and paste it into your code editor.

JaredRitchey
26 Sep 2011, 2:04 AM
Yep a good example on the application layout as an XSD file would be great. It would give a serious jump start on setting parameters.

janoah
19 Dec 2011, 10:28 AM
This thread was a good idea, but like the Ext Designer User Guide, these examples need to be updated to the current version of Ext Designer v1.2.2. Otherwise, your customer has to work a lot harder to just do the simple things like handle an event from generated code.... any tips or URLs would be appreciated... :((

wxb_km
3 Jan 2012, 6:46 AM
Hi,you have done a great work!I have a question:in ext designer,how I set up a datastore(direct type) directly connect to a database? thank you very much!

janoah
3 Jan 2012, 6:52 AM
Use an Ajax or Rest Proxy. This may help: http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/ ~o)

extjs@codephd.com
10 Jan 2012, 1:33 PM
Okay, I've watched the videos, read the manuals, read hundreds of posts, loaded and played with the examples. I yet to find a single example of using Ext Designer to build a form and actually submit the form data to the server. Does such an working example exist? Any assistance would be great. I can design great looking forms all day long, but if I can post the form data to the server then what have we really accomplished?

aconran
10 Jan 2012, 1:42 PM
I can design great looking forms all day long, but if I can post the form data to the server then what have we really accomplished?

Set the url param on the form panel. You can then invoke the submit method to submit the form.

paranella
10 Jan 2012, 2:22 PM
Okay, I've watched the videos, read the manuals, read hundreds of posts, loaded and played with the examples. I yet to find a single example of using Ext Designer to build a form and actually submit the form data to the server. Does such an working example exist? Any assistance would be great. I can design great looking forms all day long, but if I can post the form data to the server then what have we really accomplished?

Hi,
try the attachment below, I extracted from a larger project to let you se a form submit.
Just extract content in your webserver

Regards

extjs@codephd.com
10 Jan 2012, 4:48 PM
I did that. It did not work. Clearly I'm missing something. I was hoping for a working example.

extjs@codephd.com
10 Jan 2012, 4:49 PM
Thanks so much for providing an example. I will take a look and see how it works. I do expect to need to change the url of the post action to my server so I can echo back what the form is posting. I'm just trying to crack the surface of this so I can get to work on the project. Thanks again.