Custom panel config is not working

[dotskeshav]

initialize a panel with ExtJS 3.4

custom.CustomPanel = Ext.extend(Ext.Panel, {
            constructor: function(config) {
            config = config || {};
            Ext.apply({
                    layout: 'form',
                    labelAlign: 'left',
                    defaultType: 'textfield',
                    width: 600,
                    height: 500,
                    items: [
                            grid
                        ],
            }, config );
            custom.CustomPanel.superclass.constructor.call(this, config);
        };
    })

and implementing with this way

some.elseCustomPanel = new custom.CustomPanel({
                    region:'center',
                    border: '1px'
            });

and gives error `custom.CustomPanel` is not a constructor


what I am missing?

[dotskeshav]

106 Views and not even single reply yet. I have no wonder.

I & everyone else knows that ExtJS sucks badly, very badly.

Why you don't stop this ty version?

People out there do not take too much headache to create a simple form or a simple check box with 30 lines of complex code with no explanation on your documentation page.

No one gives a damn to this fuzzy JS framework.
There is no tutorial what is the difference between `configs`, `properties`, `methods` and `events`, not even a proper example.
In your documentation page If I scroll down to any sections, I cant decide whether it is property or config or method, no classifications , no proper example. Do you think, in this era of web 2.0 , your framework will work. people only using this because they develop their code using your JS .

This forum text editor is not working while I writing this comment...
what kind of community you have.

Go bury this bull Version

[Animal]

I think community members might be put off from responding to such a post.

Where to start?

A config is a property in a configuration object which is passed to the constructor.

These are all documented in their own section for each class. Here is the documentation for the Component class:



A property is just what it says. A property of an instance of that class. This is fundamental JavaScript. If you have a Panel myPanel, the documentation tells you its properties:



So, as this is just regular javascript, you can use

myPanel.body.addCls('new-css-class');

Methods. This is just another fundamental of software nowadays. If you do not know the term "method", then developing in any framework is probably not for you yet.

http://en.wikipedia.org/wiki/Method_...r_programming)

These are also all documented:



So again, to hide your Panel:

myPanel.hide();

Events are another fundamental part of UI programming these days.

http://en.wikipedia.org/wiki/Event-driven_programming

These are also all documented:



So to execute some method when some child Component gets added to your Panel:

myPanel.addListener('add', myController.doThisWhenChildAdded, myController);

"doThisWhenChildAdded" is a method on your controller object which is a class you write to react to events happening in the UI.

As to why your code posted doesn't work, you have posted two very small snippets which cannot be tested outside your app.

But they contain several mistakes. You Ext.apply the passed in configuration object "config" into an object. And then pass the unchanged config var into the superclass constructor.



You can see from this what the correct course should be.

If something is undefined though, you have to make sure that you define it.

To execute a statement like

custom.CustomPanel =

The "custom" namespace must already exist. If it does not, then you'll get an error right there and your class will not be defined.

And you must define your class before you use it, so Ext.extend must have been successfully executed before you can use your new class.

There are many examples available: http://dev.sencha.com/deploy/ext-3.4.0/examples/

And all these are available for you to read through and modify in the SDK which you downloaded.

You should build up slowly from simple things. It may seem like overkill to get very simple things to work with ExtJS. But that's because it is designed for very large applications. It's not designed for websites which just need a little pizzazz sprinkled over them. That's what jQuery is for.

If you want a multi screen, scalable, dynamic, data driven back office application, then taking the time to build up your ExtJS and Javascript expertise is worthwhile. If you just want a website, then maybe not.

You can experiment with simple code snippets in Sencha Fiddle.

I've quickly hacked your code snippet into a fiddle:

https://fiddle.sencha.com/#fiddle/ajj

You can also use the "JSHint" tab in there to syntax check the code before attempting to run it.

The documentation you will need for the 3.4 version is here: http://docs.sencha.com/extjs/3.4.0/

Hope this helps.

[dotskeshav]

Hello,
Thank you for the response. I am very well aware of what is Methods and what is properties. What I asked is , "Is there any significant difference in your documentation for the properties , methods and events?"

SEE this is from Ext.Panel

Ext.grid.GridPanel .jpg


and scrolling down on the same page there is one more .show()


Ext.grid.GridPanel Ext JS 3.4.0 Sencha Docs.jpg

Now only looking on the title of both section, How do i Define that it is property or Events?

So Kindly set some icon so that user can differentiate between these?

Yes there is changes in URL

http://docs.sencha.com/extjs/3.4.0/#...nel-event-show
&
http://docs.sencha.com/extjs/3.4.0/#...el-method-show


But make some icon in front of these, so that user can understand whether this is events or methods or properties.

[dotskeshav]

If you Reread my question carefully then you will find that I haven't ask for the documentation .

I asked

- How to distinguish configs, properties, method with similar name?
There must be any indicator/icon before the configs, properties and methods in documentation page.We forgot what we are looking while scrolling down to the page but you just paste 5 -6 screenshot to make your answer lengthy. Please answer in short and concise.

- Please provide a fiddle which explains configs, properties, methods at one example.

A developer reads and works with various kind of js framework and programming language , sometimes it leads to confusion with configs, properties and methods in terms of ExtJS and it's implementation so if fiddle were there then developer can get it fast.