How to do a documentation page like sencha's? - extjs

In the sencha documentation page, when I click a class, a class tap appears, and there will be a toobar up there usually features two buttons (are they buttons) "properties" and "methods". When the mouse is on these two buttons, a overall properties/methods list will appear.
It seems that list is dynamically generated. Can anyone please help. I'd like to do a similar page on my site, but I don't know how to do this.

Sencha uses JSDuck (https://github.com/senchalabs/jsduck) to generate the documentation. There are instructions in the repo regarding how to add your own classes to it, and it's pretty easy to do. Additionally, you should be able to see the source for how they are handling the menus/dropdowns.

Related

Looking for an elegant multi-state (open/close/pin/hover) side drawer react component to recommend for my dev team to reference. I'm UX - whacha got?

Examples I have found show OPEN/PIN and CLOSE (a la side-nav/menu) but nothing that includes a hover or a floating state. Think JIRA side menu, where the left panel overlaps the page contents/backlog table, where youhover and look where you are and then it closes on you....that comes the closest to an example to what I'm looking for.
Example of Jira panel
Only, I'd like to have a 3-click + hover system:
1-click to pin (ie: have page contents responsive 'stick' to the panel)
1-click to float (ie: have page contents scroll behind the floating open panel)
1 click to close.
I'd also like the ability to hover over the closed panel and have it open.
I know I'm asking a lot....
If you find an example, I need to be able to see a working example of react libraries without a dev computer - I'm on a mac. We're building a component library together and I need to see what's out there and available as a source (starting point) so that we can then discuss tweaks and changes for our use.
I love sites like this: https://www.ag-grid.com/react-data-grid/
or this: https://reactjsexample.com/
That provide me with a menu and examples to click though so that I can speak intelligently with my team and have proper visuals and examples.
Anything you find that has this functionality would be great... thank you!
Marlene

Salesforce Case Feed - Creating/Adding Custom Tools

Within the console on a feed layout, we can add tools to the page such as the inline article tool. The feed view setting options with the page layout edit suggest (i.e. help text says "select the tools to make available in the center column of the page") that more than one tool can be created using code and added to the page layout (i.e. within the feed directly below the publisher actions but above the feed items). There is even a multi-select control to move the tools from available to selected, but...
I cannot find any documentation that discusses how to create the tools or how to make them available within the setup menu. Can you provide any insight to if this is possible and if so how to do it?
See example screens below...
thanks
jf
Please chk it - https://resources.docs.salesforce.com/200/10/en-us/sfdc/pdf/salesforce_case_interaction_setup_cheatsheet.pdf
Hope it helps.

Is there a Tool Tip for CodenameOne?

Is there a button property that is analogous to swing's tool tip? I want the user to be able to long press a button and see a message describing the button, but I can't find any such property. (The button doesn't and can't have a visible name.) Tool tips are so useful to users, so I assumed there must be one, but I can't find it.
The ToastBar (https://www.codenameone.com/blog/toastbar-gaussian-blur.html) might work.
There was also an old demo using the GlassPane for a tutorial overlay which allowed some quite neat effects. Can't find it on the CN1 website now though.

How to reuse content with Sencha Touch

I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.

Silverlight - How to implement this functionality? Nice feature

I don't know what this is called in SL, but I would like to replicate this functionality. If you go to this site: http://www.mscui.com/PatientJourneyDemonstrator/PrimaryCareAdmin.htm and click on the "Show Details" button located on the top, right-hand corder of the screen. When you click on this, there should be a "Scene Details" button-like feature on the right side. When you click on this, this is what I would like to implement. Can someone direct me please? Either to an online article, etc...
I'm not precisely sure what feature of the site you'r referring to (I'm blind so the description doesn't make much sense to me). However, two useful links - some of the MSCUI source code is available on Codeplex http://mscui.codeplex.com. Also, the Silverlight developer/designer on this project created Blacklight http://blacklight.codeplex.com which includes visual assets to use with Silverlight.
Although I don't know the specifics of the implementation, as far as I can guess, this is done by having a second Grid that follows the Grid for the page. Then, simply change the visiblity on the "guide" grid when the button toggles.
I believe that is simple, although it'll require you to work to figure out the positioning of the underlying page - but it's more flexible. With Blend it'll be easy.
Alternatively you could have a ton of additional UI elements on the page next to their respective controls, and either Tag or name them in a way that you can iterate over them to control visibility and interaction.
I think you're talking about a the grey overlay with a modal window on top. I think the best way to do that in Silverlight 3 is with the ChildWindow control.

Resources