I recently started to create custom theme for ExtJS 5 by Sencha.
Following http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html I managed to create ThemeDemoApp, inherit ext-theme-neptune, change $base-color to green and refresh/rebuild ThemeDemoApp with my-custom-theme. All ok.
My problem is, ThemeDemoApp is quite poor for testing a custom theme. A panel, tab, button and a modal window. That's it?
After bit of googling I bumped into http://dev.sencha.com/ext/5.0.0/examples/themes/index.html. (Why isn't this mentioned in the guide?!) Heading says: View and test every Ext component against bundled Ext Themes, or your own custom themes.
My question is: How? How do I test my own custom theme against this example? Do I have to dig into the source (themes.js) and build such page/application myself?
The examples - including the Theme tester - is included in the ExtJS download.
You can modify the list of themes available by editing the shared/options-toolbar.js file.
To get it to find your theme, you'll either need to name it similar to the others (ext-theme-name), or modify themes.js accordingly.
Or you could just hack the theme.js file to hardcode your theme.
(Ext JS 4 used to create an example page for themes automatically - it doesn't seem to do that now, though)
According to advice at How do I include a JavaScript file in another JavaScript file? I decided to load both options-toolbar.js and themes.js (with just minor modification - commenting out Ext.onReady(...) function in themes.js) and I used functions getBasicPanel(), getCollapsedPanel(), etc. in my own application to create the same testing page (absolute-layout container that fits the page).
Anyhow, I guess Robert's answer is the correct one - there is no prearranged, ready-to-use functionality from Sencha :-(
Related
We recently updated the styling of our app to use WinUI 2.x and while we generally like the changes we have found areas that look terrible and will require overriding the defaults. I looked for a file that would have the default XAML implementation/definitions associated with the new styles, something similar to what's in the generic.xaml file, but I was not able to find it. I would appreciate someone pointing me to this file, if it exists.
~Rich
The source code for the WinUI 2 controls and the XAML templates are available on GitHub.
For example, DropDownButton.xaml.
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
I am following this tutorial http://vimeo.com/album/1573372/video/37212149
It seems that there is a way to type "xmodel" and have a standard model's code generated automatically. I am using Webstorm IDE - is there a way of doing this in it, and any configurations I can import?
Thanks
Seems 'Live Templates' is the feature you refer to - it allows expanding abbreviations into code snippets. See http://www.jetbrains.com/webstorm/webhelp/live-templates.html, http://davidtucker.net/articles/live-templates-phpstorm-webstorm/
WebStorm doesn't come with predefined live templates for Sencha, but you can easily create them yourself or search the web for existing templates. See ST2 Power Tools, for example
I have been googling this subject for hours. Does anyone have an examples of a custom plugin being deployed in Dijit's Editor. I'd be really interested to look at it because I have been following this without much success and of the few examples that exist out there none of them come with working examples :(
(I'm looking to create a pulldown menu like the one for font selection)
There's no difference between a custom plugin and a "builtin" plugin, so I suggest just looking at a small builtin example like TabIndent, and then move on to the font selection itself.
I'm re-creating an AIR app with FB 4.5.1. (I've started from scratch, having had trouble importing FB 4 projects).
In the app.xml I have the following defined:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
Having done this I still get a full window with titlebar, min, max, and close buttons.
what gives?
I believe you need to create a skin for the application.
This appears in Adobe's forum, and includes an FXP of a functional transparent app:
http://forums.adobe.com/thread/476699
Setting systemChrome & transparency along with "backgroundAlpha" to "0" would have helped in Flex 3.
But, skinning of components in Flex 4 i.e Spark components is little different and completely customizable.
Following are the steps you need to do make the window transparent.
Set systemChrome to "none" in the XML configuration file
Set transparent to "true" in the XML configuration file
Copy the skin code from <SDK_FOLDER>\frameworks\projects\airframework\src\spark\skins\spark\S parkChromeWindowedApplicationSkin.mxml and paste in a new MXML file.
Set the "alpha" property of "backgroundRect" object inside the skin file to "0".
Assign the newly created skin as the "skinClass" for "s:WindowedApplication" object
Please import the attached FXP file using "File->Import Flex Project" menu and have a look at the code to make it much more clear.
First, I discovered it is easier to interact with app.XML by opening it via "Open With -> Text Editor".
Second, and this is really embarrassing, I had simply failed to remove the comments bracketing
was:
<!-- <systemChrome>none</systemChrome> -->
<!--<transparent>true</transparent>-->
should have been:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
...duh! I knew better, but...
Lastly, for a completely chromeless app, add
showStatusBar="false"
to the app header.
that's it!