[TYPO3-mvc] Few proposals for mvc_extjs view branch

[Dmitri Pisarev]

On 10.06.2010 15:22, Dennis Ahrens wrote:
> Hi Dmitri,
>
> Dmitri Pisarev wrote:
>>> In our new project i'd like to have another gui architecture - with
>>> classes which are responsible for (extjs) object creation and
>>> application flow inside the gui.
>> It's a mystery for me, how to write gui for large applications so it
>> shall remain clean. Do you think it's not possible to do it in pure
>> JS, with only domain model related stuff generated through the
>> viewHelpers?
>> Anyway, this is very important topic, and very relevant to me, let's
>> see if I can provide some feedback on this.
>> BTW, the way you extend ExtJS classes for configuration, seems to be
>> not a very good architecture, ExtJS specialist suggest to use
>> factories for that, and only use Extend when you change some
>> functionality.
>
> I was talking about js related architecture. Your hint related to
> Ext.extend is interesting. ATM i have started to "kickstart" a new gui,
> which will become big. How would you design a factory?
> I've started to write a ComponentFactory Class as a singleton, which has
> public methods for each component i'd like to create.
>
> It looks like this atm:
>
> Ext.ns('FhhQmdocs.Module');
> /**
> * Creates predefinied Components
> *
> * @class FhhQmdocs.Module.ComponentFactory
> * @singleton
> */
> FhhQmdocs.Module.ComponentFactory = function() {
>
> var documentStore;
> var documentGrid;
>
> var createDocumentStore = function() {
> documentStore = new Ext.data.DirectStore({
> storeId: 'DocumentStore',
> reader: new FhhQmdocs.Module.DocumentJsonReader,
> writer: new FhhQmdocs.Module.DocumentJsonWriter,
> api: {
> read: FhhQmdocs.Module.Remote.DocumentController.list
> },
> autoLoad: true,
> restful: false,
> batch: false,
> remoteSort: false
> });
> };
>
> var createDocumentGrid = function() {
> createDocumentStore();
> documentGrid = new Ext.grid.GridPanel({
> columns: FhhQmdocs.Module.DocumentColumns,
> region: 'center',
> id: 'DocumentGrid',
> store: documentStore,
> viewConfig: {
> forceFit: true
> }
> });
> };
>
> return Ext.apply(new Ext.util.Observable, {
> createDocumentGrid: function() {
> return documentGrid;
> }
> })
> }();
Your factory is very interesting:) I simply meant something like this 
instead of Ext.extend:
function createMyPanel(config) {
     return new Ext.Panel(Ext.apply({//Pre-configured config options go here
         width: 300,
         height: 300
     }, config));
};

var myfirstpanel = createMyPanel({
     title: 'My First Panel'
});
>
>>> Another approach may be annotation based code generation. Think about
>>> somthing like this:
>>>
>>> ViewHelper-Code:
>>> <ext:includeDomainAnnotations />
>>>
>>> Class Annotation:
>>> /**
>>> * [...]
>>> * @extjs form gridcolumn
>>> */
>>>
>>> Variable Annotation
>>> /**
>>> * [...]
>>> * @validate StringLength(minimum = 2, maximum = 80)
>>> * @form <configuartion>
>>> * @gridcolumn <configuration>
>>> */
>>>
>>> Maybe it is senseful to inculde information from TCA, too.
>> I didn't quite get this part. Annotations to what class are those?
>> Some viewhelper?
>
> I thought about annotation related to domain model classes.
Are you sure it is a good idea to pollute the model with stuff related 
to the view? Sometimes it may be convinient, but I'm sure it will end up 
bad.
>
>> And one more note, your viewhelper classes should be more easy to
>> extend. For example, to add the 'total' parameter to your
>> StoreReadResponseViewHelper.php class, I had to rewrite the whole
>> class, there was not much to extend. In typo3v4 era, there were hooks,
>> now what?=)
>
> The ViewHelpers in the json-package aren't nice to extend, thats right.
> Those in the jsCode-package are a bit better for this intention. Have a
> look at the StoreViewHelper and i.e. the GroupingStoreViewHelper.
> But i think that those ViewHelpers aren't as useful as i thought when
> writing them down... In the current project i'll try to have the json
> code for a store in pure javascript - as you can see in the factory code
> above.
So be it:) In my next project I'll try to copy your approach, and see if 
I like it. My problem with previous project was my inexperience with 
ExtJS and my laziness, which led me to one 1000++ lines long file. This 
time I shall try to be more careful and bring more OOP into JS 
(http://yuiblog.com/blog/2007/06/12/module-pattern/).

I hope you can contribute some best practices examples latter on, or 
maybe even write a book, it's fashionable now a days;)

Cheers,
Dmitri.