I'm transitioning a corporate web page into a new xpage platform. It consists of a number of department-specific databases each with their separate ACL's with the old forms and docs, and one new xpage db front end presenting data from across the other db's read only. The content is regulations and resources for the rest of the organization to relate to.
The design consists of just a few custom controls which collects data sources dynamically via properties on the various department specific xpages. So like 30 xpages collecting data from separate db's utilizing the same handful of cc's
My scoped variable issue is related to my cc_dataViewLocal . This dataView presents the documents from the corresponding views in the source db's. To let the user know their present location in the application I pull in the name of the current view and display the name above the Data View as a headline on the DataView xpage:
<xp:text escape="true" id="computedField1" styleClass="ksHeading2">
<xp:this.value><![CDATA[#{javascript:getComponent("dataView1").getData ().getView()
}]]></xp:this.value>
</xp:text>
All documents from all databases are presented using the same documentDisplay xpage with a dynamic document data source. Thus this xpage does not have any properties but is referenced trough the data view xpage:
<xe:dataView id="dataView1" collapsibleCategory="false"
rows="50" style="font-size:8pt" rowStyle="font-size:8pt"
collapsibleDetail="true" pageName="/**ks_documentDisplay.xsp**"
var="rowHandle">
--
When I open a document from the data view in documentDisplay.xsp I want the same headline/name of the original view displayed there as well. To make that happen I try to catch the view name in a scoped variable in an afterPageLoad event in the data view xpage, to redisplay it on the documentDisplay xpage.
<xp:this.afterPageLoad>
<xp:setValue binding="#{sessionScope.ksView}">
<xp:this.value><![CDATA[#{javascript:getComponent
("computedField1").value}]] ></xp:this.value>
</xp:setValue>
</xp:this.afterPageLoad>
After all the view name is not part of the document data source, and I have no other handle to the parent view at this point as I can see.
--
When I display the scoped variable on the dataView xpage in a computed field it works fine:
<xp:text escape="true" id="computedField2"
styleClass="ksHeading1" value="#{sessionScope.ksView}">
However, when I try to display the same session variable in the documentDispay xpage using the same computed field coding it turns up empty. Like the sessionVariable is lost to the next xpage?
I started out with a viewScope, and tried both request and session with same results. What am I missing??
Any input greatly appreciated! Including workarounds but would like to get a grip on the scoped variables...:-)
Regards to all who read this somewhat long post and thanks in advance!
Vidar Solevag
Thanks again for pointing me in the right direction. The problem clearly was I wiped the sessionScope in some way or other, exactly how I still don't know.
But as often is the case the solution was to do something else to get the same thing done...
What I found not to work:
-Moving the event to onClientLoad didn't work it threw an exception "cannot handle". In addition my original approach afterPageLoad did't really work either as it didn't update properly as other dataViews were chosen via Navigator on the page. Also setting the variable via the "Set" option on the simpleAction list turned out to be a problem. I got several "Not allowed to set the value of a read only computed expression"
What I did that worked:
-I set the value not by "Set"Simple action but by "Excecute script" and code
sessionScope.ksView=context.getSubmittedValue(). This in the onClick event in Navigator that selects which Dataview to display On the DataView xpage Then the SessionScope remains alive all the way into the documentDisplay xpage and until a different Dataview is selected back in the Nav back on the DataView xpage.
Now using the same sessionScope as the viewName property on the xpage I also set the sessionScope initially on afterPageLoad to have a default value when page is first opened...
So thanks again, a lot of headbanging into the wall here but that's what you learn from I guess :-))
I'm currently developing a Windows 8 Store app that uses a Grouped GridView in the HubPage showing Highlights for some Categories. So far, when clicking the Header you see More Highlights for this Category.
Now i want to add a control at the end of every Group leading the User to the "non-highlight" Category site, where just all the Items of this category are displayed.
Is there an easy and elegant way to do this - propably with a Template is suppose.
( i think the latest Bing-News-App has a similar feature )
Thanks in advance for every help.
There are a couple of ways you can do this.
You can add an arbitrary object to the end of your group, then use a DataTemplateSelector to style it.
You can create your own VariableSizedWrapGrid with the control added to the end in the constructor (slash "Arrange"). You can then add an arbitrary click handler as a dependency property and only show the button if the click handler is set, so you can reuse this on other pages, etc.
You can change the GroupStyle to include something similar at the end of the group, but it likely won't animate with the other items in the group (if that's important to you).
The easiest one to do is probably the first one. If your group is a list of SampleItems then make a subclass of the SampleItem class called something similar to TerminalSampleItem. Create a template for it (like you've made other data templates). Make an ItemTemplateSelector that has two properties, NonTerminalDataTemplate and TerminalDataTemplate (assuming you only have two data templates). Have the SelectTemplateOverride function check for (item is TerminalSampleItem);
I am trying to create a tabbed property view as per given article : The Eclipse Tabbed Properties View
As per article, org.eclipse.ui.views.properties.tabbed.propertyTabs extension point can be used to add new tabs.
<extension point="org.eclipse.ui.views.properties.tabbed.propertyTabs">
<propertyTabs contributorId="mview.views.SampleView">
<propertyTab
category="sample"
id="mview.ButtonTab"
label="Button"/>
<propertyTab
afterTab="mview.ButtonTab"
category="sample"
id="mview.AdvancedTab"
label="Advanced"/>
</propertyTabs>
</extension>
However in my case the tabs of property view vary depending on the item selected in view. So I have to add the tabs dynamically into extension depening on the item selected.
Please suggest how to do so.
Update:
One of the way to do so (I am not sure if its adviced) is using IExtensionRegistry.addContribution() method. Here I provided an inputstream object containing desired extension details. This added tabs to property view at run time. However with change in selection of item in list viewer, the property view is not updated. Please suggest if this is the right approach to do so.
Ok, I got the solution Its a two step process. Using this one can dyanamically add tabs (and their sections):
Step 1: Associate a tab descriptor provider with the view.
Add an extension point - org.eclipse.ui.views.properties.tabbed.propertyContributor to the view (if not already added). In the propertyContributor section, add a class for tabDescriptorProvider item. This class will implement ITabDescriptorProvider interface.
Step 2: Provide Tabs and Sections:
TabDescriptor provider will return array of TabDescriptors when its getTabDescriptor() method is called. Each TabDescriptor return a list of SectionDecriptors and each SectionDescriptor is linked to a Section. Finally it is the Section class that contains widgets to be displayed on screen. Each widget in Section class has a modify listner which updates the properties of selected items.
While the answer from Viral may not match the specific needs of the OP, the provided answer is likely acceptable to many.
If a tab does not have any sections to display, the default TabbedPropertySheetPage will not show that tab. Thus, if the problem domain is specified in terms of IFilter implementing classes, "dynamic" tabs may be achieved.
Tabs will be added or be removed as the selection changes depending upon whether any sections are present. A visible tab may have one or more sections present on it, and the number of sections on a visible tab may change from selection to selection.
As I came across this page with the same basic issue, I was a bit disappointed that I would need to intervene in the way the OP suggested. After some experimentation, I was able to achieve what I needed purely through the IFilter approach as suggested by Viral.
A tutorial is provided at http://www.eclipse.org/articles/Article-Tabbed-Properties/tabbed_properties_view.html
You need to define a new YourPropertySection derived fromAbstract PropertySection . Also define a filter derived from IFilter and override the select method to return true only for the desired type of selection. Then in plugin.xml write an extension point which would map your PropertySection to the required PropertyTab and will also associate your filter. So this section & tab will only show when your filter returns true.
I have encountered a problem with the MVC pattern in ExtJS 4. At least, I think I have. Having approached multiple people with this question, and having posted numerous times in the Sencha forums, I am now turning to a broader audience in hopes of getting either a light bulb or a confirmation.
Problem
Your application has the ability to open many different views, some of which themselves are mini-applications. Additionally, a user may wish to have multiple concurrent copies of a view open.
This application is a single-page client-side Javascript application.
The ExtJS 4 MVC model expects you to define all of your controllers in your Application class. These controllers are then initialized when the Application loads. Controllers keep track of views, models and stores.
When you initialize controller A multiple times, say to create more than one copy of a view, you end up with two views that reference the same data stores, and functionally send duplicate events to the Application event bus.
I have refactored my application by adding new prototype methods to Component and Controller to allow for both a) sub controllers (some of my controllers were getting pretty huge) and b) defining stores specifically for the view they work with. The models can still be defined on the controller, just for ease of use by handlers if you need to do something like grab a record from the server.
Question
My understanding of MVC would lead me to believe that models more directly relate to the View than then Controller. I asssssume that ExtJS 4 decides to attach stores (which I think can be seen as wrappers to a more classic model) to Controllers for purposes of encouraging re-use of loaded data, and to optimize away from having many copies of the same class instantiated. It seems to me, however, that one cannot do this if one intends to have many instances of a view available to the user. To my thinking, having many instances is an important option in an OO framework, hence why I have bucked the trend and implemented prototypes on some of the Ext base classes. (Thank you Ext.implement!).
Is there any way to have multiple concurrent instances of a view with different data loaded into them using the out of the box MVC classes and making uses of the provided setters, getters, etc?
I was faced with a similar problem:
Consider a tabpanel for a CRM type application which opens new instances of a view for each client. And say that tab view contains 3 or 4 row-editing gridpanels for interacting with different collections of data relating to that client.
The solution I came up with was based on this from the Sencha forums. In a nut shell, almost all events that are dispatched from a view contain a reference to the view itself. The handlers in my controller's control function all use these to get a reference to the correct view instance.
For dealing with the multiple instances of the same store needed for this, I took this to heart from that post:
For the Store instance on the view or a global one... depends on the
needs. If you are going to use globally then make it global. If you
only are going to need it on the view then put it on the view. MVC is
not a law, you can change it to fit your needs. Technically the
Controller part of MVC is suppose to be the middle man between the
View and Model parts but sometimes that's just not needed. I create
the Store in the view 95% of the time. I'll give you an example...
If you have a Store for products, you probably only need to reference
that Store in your Grid. That usually isn't needed for other parts of
the application. However, if you have a Store to load countries, I
often need it globally so I only have to load it once and can then
set/use that Store in several views.
So I just created the needed store's that relate to a view instance specifically, inside the view's initComponent method. The application did have a few global stores that I created as store classes following the MVC recommendations. It worked out nicely to encapsulate the view instance stores inside the view. Then I only needed one instance of the controller.
To answer your question specifically, currently, there is no ExtJS official recommendation or config for dealing with multiple instances of the same view that use the same store constructor. I have spent some time looking for something like that and the best I have found was this recommendation from one of their forum moderators.
I don't think you ever need more than 1 instance of a controller, regardless of how many views/models you have. See functional example here:
http://whatisextjs.com/extjs-4-extension/fieldset-w-dynamic-controls-7
This can be done, reasonably easily. You need to follow a few rules:
load your controllers at app startup. Don't unload them. Don't worry about the memory or time, it's pretty small even for hundreds of controllers, as long as you minimize and concatenate your js.
Never use the refs or views properties of a controller. You are going to use one instance of a controller, but multiple instances of views, so you never want a reference to a view.
only use event listeners in controllers. You are only going to listen to events on your views. You can always get a (temporary) reference to a view in the event handler via the "cmp" parameter in the handler.
To "launch" a view, create it and add it to another view. To destroy it, destroy it. You don't use a controller to launch a view. You can use the afterrender and beforedestroy events in the controller to add logic.
In ExtJS' MVC the controller is a Singleton for you view. I like how DeftJS thinks about MVC. Each instance of a view has an own instance of a controller. In this way you can put all "controlling rules" in a controller for a particular part of your view, and this will be instantiated only when the view opens.
I did not have any experience how I could use multiple Defts JS apps in the same project.
Of course. What led you to believe otherwise?
Here is an example of creating a custom View which extends from a Window component. You can run this method many times from the same controller and each time you will get a new instance of a View.
"this" refers to a controller that code runs in:
this.getRequestModel().load(requestID,{ //load from server (async)
success: function(record, operation) {
var view = Ext.widget('requestEdit',{
title: 'MyRequest '+requestID
});
var form = view.down('form');
form.loadRecord(record);
}
});
How do you create your views? I see no reason why you cannot pass a different store or config data to every object. Some code samples would help for what exactly you are doing. For example, we have a similar sounding application, and everything is done with extensions. So, if we need a grid, we run
Ext.define('MyApp.grids.something',{
extends:'Ext.grid.panel'
//...
These classes are predefined. Then, when a controller or view is loading this grid, they are using
var grid=Ext.create('MyApp.grids.something',{id:'unique',store:mystore});
As you can see, we can pass in different config options to the same grid each time it is created. We can treat this exactly as you would treat
Ext.create('Ext.grid.Panel');
Except of course that we make some options predefined, and some non-override-able, and so on.
Hope this helped.
Check out this post. The idea there is to take some configuration (like store and itemId) from view config and put it into the viewport config:
// .../app/view/Viewport.js
Ext.define('MyApp.view.Viewport', {
// ...
items: [
// ...
{ xtype: 'testview', store: 'Store1', itemId: 'instance1' },
{ xtype: 'testview', store: 'Store2', itemId: 'instance2' }
]
});
The problem with store will be solved, obviously. Different itemIds will enable you to handle events properly.
How can I post a FormPanel as well as an EditorGrid ( Grid Panel) as a single JSON object in ExtJS with Rails 3.0.3?
For Ex: I have a FormPanel and a GridPanel, when it's submitted, it goes as a single JSON Store into the controller.
P.S: Any way to do that without using Arrays?
Thanks in advance !
you might want to split the submit event into two elements.
In other words, you can encapsulate the form and the grid on 2 separate elements you can check for all fields during the submit. That would create 2 separate post events.
However, why would you want to do that. you should just redirect the events of each individually as an action happens.
And no, extjs formats everything in a JSON that you would have to decode out to break the array.