I am creating a ExtJS 6 package to reuse a library across my extjs app. I need to extend Ext.field.TextArea functionality. could someone have a simple example to start with?
Like this:
Ext.define('MyPackage.form.field.MyTextArea', {
extend: 'Ext.form.field.TextArea',
xtype: 'my-textarea'
});
And in your package.json verify you've got the following values:
"type": "code",
"toolkit": "classic",
Related
I am trying to get my site setup with Gatsby + MDX. I am looking at the documentation here and want to make use of the autolink-header-option. I have tried using the rehype and remark plugins for this, but I can only get the Rehype plugin to work and only with the wrap option. I would much prefer the GitHub (default) style with the link coming before the title.
I am using the below config in gatsby-config.js and cleared .cache and public after updating the file to be sure nothing was cached. Also I am not getting any errors, everything builds and runs successfully, there just is not any link to the headers.
{
resolve: `gatsby-plugin-mdx`,
options: {
rehypePlugins: [
// To pass options, use a 2-element array with the
// configuration in an object in the second element
require("rehype-autolink-headings"),
],
},
},
UPDATE
After trying multiple configurations, the way I was able to get it working as expected was with a different plugin config.
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [ `gatsby-remark-autolink-headers` ],
plugins: [ `gatsby-remark-autolink-headers` ],
},
}
Both gatsbyRemarkPlugins and plugins are required as per: https://github.com/gatsbyjs/gatsby/issues/15486
The README for rehype-autolink-headings mentions that:
This package works with headings that have IDs. One way to add IDs to headings is by using remark-slug before this plugin.
Changing your config to the following should fix it:
{
resolve: `gatsby-plugin-mdx`,
options: {
rehypePlugins: [
require("rehype-slug"),
// To pass options, use a 2-element array with the
// configuration in an object in the second element
require("rehype-autolink-headings"),
],
},
},
In fact, the documentation you linked to has this additional require line as well, but it doesn't clarify what it is used for.
I was under the impression that using '*' in require will allow you to import all classes in that package.
This does not work :
Ext.define('EM.app.myController', {
extend: 'Ext.app.Controller',
requires: [
'EM.app.controlUnit.searchModule.*'
],
However this does work :
Ext.define('EM.app.myController', {
extend: 'Ext.app.Controller',
requires: [
'EM.app.controlUnit.searchModule.SearchPanel'
],
This does not work as expected.
I am using SearchPanel as an xtype and a very obscure error is thrown pertaining to some substring on undefined on some rewrite objects in some parseNamespace method (that's a whole other story... 5 hours down the drain trying to figure that one out)
Is this maybe because I am using an old version of Extjs (4.1) ?
I use ExtJS 5. I use Sencha Architect.
I have 2 views: View1 (alias: widget.view1) and View2 (alias widget.view2). Those views are declared in views folder but are not linked in application. One of them is created at runtime and added to container in beforerender:
component.add({xtype: 'view' + type});
where type variable is calculated earlier.
I build app with
sencha app build testing
and in created JS file there is no View1 neither View2 included. Also there is no appropriate ViewController neither ViewModel.
Then I've added subsections in app.json file in section js:
{
"path": "app/view/View1.js",
"x-compile": true,
"includeInBundle": true
},
{
"path": "app/view/View1ViewController.js",
"x-compile": true,
"includeInBundle": true
},
{
"path": "app/view/View1ViewModel.js",
"x-compile": true,
"includeInBundle": true
},
and rebuild app. Now the View1 class is available in compiled JS and also during runtime.
Question: how can I make SA to modify app.json file? There is a file app.json.meta created by SA (I guess). The content of both files is similar.
I've found solution.
I need to add AppName.view.View1 and AppName.view.View2 to requires table of container where I need to add views.
I just started supporting a huge Backbone and Marionette application. Currently using Underscore and the version is 1.7.0.
I would like to switch to Lodash latest version to take advantage of new features like the one I learned today from my other post, _.has()'s deep search. Also I'm using RequireJS
What is the safest way to switch to Lodash? Do I
1. bower install lodash
2. update require.confg
"underscore": "../components/underscore/underscore",
"underscore.string": "../components/underscore.string/lib/underscore.string",
and update the values to point to `lodash` paths but keep the property names?
Here is one example that may or may not work with Lodash. It's just an example.
convertModels: function convertModels() {
_.each(this.models, _.bind(function (model) {
model = this.convertItem(model);
}, this));
},
This post is also about "will I need to change some of the Underscore codes" or will Lodash be able to handle and produce the same output. Or I will just need to check the application and see what happens?
faced same task some time ago and did this via require config:
require.config({
paths: {
// ..
"lodash": "libs/lodash-3.9.3",
"backbone": "libs/backbone-1.2.0",
// ..
},
map: {
"*": {
// use lodash instead of underscore
"underscore": "lodash"
}
}
}
..details here: http://requirejs.org/docs/api.html#config-map
I use _ functions a lot and didn't have to change anything after the switch.
I have an ExtJs TreePanel in which i've set the enableDrop as true and set the property ddGroup to one of the groups. I have this another ExtJs view from where i need to drag and drop the images. And i know that ddGroup defined for this is media
However the drag and drop never happens. This is my code snippet:
var treePanel = new Ext.tree.TreePanel({
"id": "myTree",
"lines": true,
"animate": true,
"enableDrop": true,
"enableDrag": false,
"ddGroup": "media",
"containerScroll": true,
"autoScroll": true,
"split": true,
"stateful": true,
"renderTo": "treeStruc",
"loader": //my loader,
"root": new Ext.tree.AsyncTreeNode(treeRootConfig),
"dropConfig": {
"ddGroup": 'media'
},
"listeners": {
"nodedrop": function(e) {
//do the check
}
}
});
Is there anything else that needs to be done?
Thanks.
Although the documentation states that nodedrop is fired when a "DD object" is dropped on a tree node, the source seems to indicate that it's still expecting a valid node.
In order to implement the drag-drop from view to tree, I believe you would have to initialize your own TreeDropZone to handle dropped DD items that are not tree-compatible nodes.
This example: http://dev.sencha.com/deploy/dev/examples/dd/dragdropzones.html shows something similar (although it is a view to grid drag-drop), but you'll likely have to use a TreeDropZone instantiation where they've used a straight out Ext.dd.DropZone object.
Also, make sure that your source view and the target tree share the same ddGroup - although I think you mentioned that they do.
I hope this is in any way helpful!