I appreciate hearing that you are actively working on the documentation. I nearly cried when I read charlez's comments
. This has been my experience exactly. There are lots of examples and documentation, but none seem to fit what I'm looking for, which is a complete example that explains how and why. I see a lot of one-off examples that create a widget stored in a variable, like
Code:
var chart = Ext.create(...);
What I'd really like to see are examples that show me how to create a maintainable project with reusable components. For example, I downloaded the SA examples archive and opened the Feed Viewer project. This seems to have a reusable component architecture, but out of the box, the example does not work. The Stores pull their data from a php url. It would have been better if you had it pull from a json url, then include a static json file. I could have deployed this directly to my webroot and seen it work. This would eliminate the need for me to swap all this out myself just to get an example working. Even worse, since the php file generated the data on your end, I really don't even know what the structure of that json should look like...I now have to read the API docs to figure out how tree data should look in order to learn how a tree widget works. Me not happy.
Another example is the configuration of components, stores, and models (as one of the previous commenters has pointed out). It's not clear to me where a file should be required in the requires array, or when it should be in the models/stores/controllers array, especially in app.js. Doesn't that load everything at once? I'd like for things to be loaded if a user clicks on a tab or link that requires it...otherwise they load a ton of data that probably will never look at.
It seems to me that the best way to create a maintainable project (i.e., reusable components), is to create a component, assign an xtype to it, and then use the xtype of your component in the items array, dockedItems array, or something similar in the configuration of another panel. Swapping components out or moving them to another area of the application becomes much easier. But when I see
Code:
var chart = Ext.create("Ext.chart.Chart", {...})
(and I see this a lot in the examples), it makes me sad.
Doesn't this lead to one-off sort of component development? It would also be very hard to transfer this sort of example to something that could be replicated in SA. If I'm correct in my thinking (and being new to Sencha, I may well be wrong, so please use this as an opportunity to help me see this better), then a better pattern to follow in your examples would be something like this (I'm not even sure that this is correct):
============================================
"Create the component in view/MyComponent.js:"
Code:
Ext.define("MyApp.view.MyComponent", {
extend: 'Ext.chart.Chart',
xtype: 'mycomponentchart',
...
}
"Then instantiate it and add it to your panel in view/MyPanel.js:"
Code:
myEventAction: function() {
var chart = Ext.create('MyApp.view.MyComponent');
this.add(chart);
...
}
"If you want the component to appear when the panel is displayed, you can add it to the items array:"
Code:
Ext.define("MyApp.view.ChartPanel", {
extend: 'Ext.panel.Panel',
items: [
{
xtype: 'mycomponentchart'
},
...
],
...
}
============================================
I realize that everyone has their own style, and there are times when you must deviate from "best practices". However, I would much rather start with your idea of how things ought to be done, rather than be given 14 ways of how it could be done, and some ways don't work with other ways, and some of which should really never be done.
Far and away, you have the best widget set with an integrated framework than anything else on the market. The one thing you lack is cohesive documentation. This isn't a rant post, but it really is an effort to learn more about Sencha and help you see where I need help. Thanks very much for listening.