CODEWITHSUNDEEP
javascriptextjs
Sparhawk
Sparhawk

Reputation: 1577

Ext JS 4.2 primer

My company just bought a third party application which is based on the ext js 4.2. framework.

The software is closed source, but it is web based such that I can add a .js file to change the UI to my needs.

I want to add some controls to the rendered page. The software is showing IDs everywhere instead of text. Example: "Issue created by: ID123". When I hover the field is get "ID123. John Doe". Ok, I am a JS ninja, so I can just add a field to the HTML DOM which will display "John Doe"in the correct spot.

I looked at the HTML code to get the correct control and see the the IDs are generated. The code I would write is prone to break with each new release of the third party software.

Now, since the is an Ext JS application I can probably solve the issue much more elegantly like adding a field not to the DOM directly but to the Ext JS container.

Question: In Javascript I have a reference to the Ext JS app. How would I access the current view or viewmodel or model to query data and add a field?

Rough idea/Pseudo code: 

var id = app.getCurrentModel.getValue("creatorID");
var name = myserver.getPersonData(id).name;
app.currentView.addLabelControl(name);

I googled a lot but all examples I found assumed that you are writing the ext js app and you are already in the controller or the view. But I only got the reference to the app.

Sorry for the newbie question :)

Upvotes: 2

Views: 107

Answers (1)

Alexander
Alexander

Reputation: 20244

"App Inspector for Sencha"

For a quick glance over component hierarchy, you can use the Sencha browser plugin,

Find a certain ExtJS component programmatically

To quickly search ExtJS components or transform your findings into code, your main tool will be the browser console and the command Ext.ComponentQuery.query(xtype), e.g.

Ext.ComponentQuery.query("grid")
Ext.ComponentQuery.query("panel")
Ext.ComponentQuery.query("form")

You will then find in browser console an array of all components of that type. Select the right one, and check whether it has an id or itemId that is not auto-generated (everything like xtype-1234 is auto-generated). For form fields, the name attribute could be useful. Commands like

Ext.ComponentQuery.query("[itemId=ABC]")
Ext.ComponentQuery.query("[name=DEF]")
Ext.getCmp(id)

are far more readable and not as prone to side effects as Ext.ComponentQuery.query("panel")[12].

Most of the time, it can also be useful to think in tree structure. If you want a certain container which contains the only slider you see, trying 

Ext.ComponentQuery.query("slider")
Ext.ComponentQuery.query("slider")[0].up()

could be easier than sifting through dozens or even hundreds of containers. Ways to traverse the component structure include up(xtype), down(xtype), nextSibling(xtype), previousSibling(xtype). If an xtype is provided, the next component of the corresponding xtype is selected; if it isn't provided, the next component is selected regardless of the type (e.g. direct parent, adjacent sibling).

Change anything you want.

You can extend, debug or modify any existing behaviour, including but not limited to ExtJS's own code, using a so-called override over any component, including the views or stores that make up this app. override makes a great search term for further information.

Or you can add new components to existing components, like a button to an existing form, from outside the app. For example, open sencha docs and then insert in console:

Ext.ComponentQuery.query("searchcontainer")[0].up().insert(1,{xtype:'button',text:'Test',handler:function(){Ext.Msg.alert('Test Button clicked');}});

You should then find a button on the top left, right of the Sencha logo. Click it.

Find existing controllers

For this, you have to find the name of the app namespace.

If it is e.g. MyApp, then MyApp.app.controllers.items contains the list of controllers. Controllers contain control logic, and the mapping between the components and the logic. When components are created, controllers attach their events to these new components. Many changes can and should be made in the component layer, because controller overrides are messy.

Find viewmodels

You're already done, ExtJS 4.2 does not support them.

Changing models

If you want to change models, be cautious: There is no supported function to add fields to a model. You can override the model prototype, and push more entries into the fields array. But if you have any model instances (records) already running around by that time, they are not updated and any existing warranty is voided.

That said, you find them in MyApp.model. You can e.g. get all fields of the Sencha Docs' Comment model using Docs.model.Comment.prototype.fields, or even push another field in.

Upvotes: 4

Related Questions