PDA

View Full Version : How can i make a reusable Custom Component



bhaidaya
21 Feb 2012, 2:10 PM
How do i add a custom component to my toolbox correctly?..

I'm new to designer. I've been with Extjs since it was called yui-ext.

I am currently as an exercise taking an existing application and trying to implement it into the sencha 2 beta designer. So far so good! But I can't wrap my brain around the approach for this next part..

I have a library of reusable custom components ( don't we all?) and i am unable to decipher how to get them into my toolbox correctly.

I've re-created my custom component lets call it 'XGridPanel' in a normal Ext.grid.Panel. I then right click and save to toolbox.

Q1: How do I get the custom component to correctly extend the base class eg.extend: 'Ext.grid.Panel' instead of extend: 'MyApp.view.ui.XGridPanel'

Q2: Can someone illuminate why when i reuse this component elsewhere it extends 'MyApp.view.ui.XGridPanel'?

Q3: How can i get it to simply extend my existing lib/namespace (lets call it XYZ) 'xyz.grid.Panel'

Are there any resources or help related to the toolbox and custom component management?

bhaidaya
21 Feb 2012, 4:40 PM
After Re-watching the video i can see the use of the userAlias and userClassName in conjunction with the drag drop of the panel. That all makes sense.

I'm still a bit confused on the namespacing but this helps me in the right direction.

bhaidaya
21 Feb 2012, 5:30 PM
I was able to add several custom components in but am unable to do a certain few.

Is it possible to introduce a custom reader extended from the Ext.data.reader.Json?

I need to override the extractData function and can't seem to see a way.

aconran
21 Feb 2012, 5:38 PM
I'm new to designer. I've been with Extjs since it was called yui-ext.

I am currently as an exercise taking an existing application and trying to implement it into the sencha 2 beta designer.
Great, glad you've been around since the beginning and are taking the designer for a spin. We are certainly interested as to where we fall short of providing you everything you need to build a full application.



Q1: How do I get the custom component to correctly extend the base class eg.extend: 'Ext.grid.Panel' instead of extend: 'MyApp.view.ui.XGridPanel'

Q2: Can someone illuminate why when i reuse this component elsewhere it extends 'MyApp.view.ui.XGridPanel'?

Designer is going to create two files/subclasses for you. The .ui.js version directly extends whatever you are extending. The .js file extends the ui file. So they both inherit from Grid.



Q3: How can i get it to simply extend my existing lib/namespace (lets call it XYZ) 'xyz.grid.Panel'

You cannot currently extend from anything that is not already inside of the designer.

aconran
21 Feb 2012, 5:39 PM
I was able to add several custom components in but am unable to do a certain few.

Is it possible to introduce a custom reader extended from the Ext.data.reader.Json?

I need to override the extractData function and can't seem to see a way.

The ability to override functions will be coming in a release in the near future. You will be able to add a Basic Function to that particular reader instance, name it extractData, setup the appropriate arguments and implement your custom behavior.

bhaidaya
21 Feb 2012, 5:54 PM
We are certainly interested as to where we fall short of providing you everything you need to build a full application.

...



The ability to override functions will be coming in a release in the near future. You will be able to add a Basic Function to that particular reader instance, name it extractData, setup the appropriate arguments and implement your custom behavior.

GREAT! I can't wait to see whats ahead! For now i'll have to wait though as all of the applications i build are served up on systems that require me to edit the readers and proxies because of the proprietary data formats served up by the backend. not much to do there... but wait.



Designer is going to create two files/subclasses for you. The .ui.js version directly extends whatever you are extending. The .js file extends the ui file. So they both inherit from Grid.

Got it.. thanks!

terryfritsch
11 May 2012, 9:01 AM
Are there any examples on how to implement an override component like this (http://www.sencha.com/forum/showthread.php?137711-Vertical-Tabs-in-ExtJS4-Ext.ux.tab.VerticalPanel&p=800527#post800527) in Architect?

binarygiant
6 Sep 2012, 5:36 AM
Is there a way to define an xtype with components in Architect?

apsq
6 Sep 2012, 7:07 AM
I think the "userAlias" or what it's called (in the Architect-specific settings of your view classes) is used to generate xtypes.

mfreund
19 Oct 2012, 12:22 AM
I'm using this feature, its nice, but i've got ONE problem....

i exported a grid with a window and many components AND a store for the grid.
when i import and use this component, everything is fine, except, the store isn't added to app.js

when i add it manually, everything works, but i have to do it everytime i save in architect

aconran
19 Oct 2012, 10:10 AM
when i add it manually, everything works, but i have to do it everytime i save in architect

Add it manually meaning click on the Application node and add it under stores? Or adding it manually meaning typing the code in?

If its the first, we need to get more details on the bug. If its the second, do it the first way.