I use ExtJS 5.0.1 and sencha architect 3.
There is a problem bothering me now. A dataview some of whose filenames are too long and the pics are in a mess.
I want use prepareData to shorten the name, but could not find it in architect.
Is it deprecated? And is there a alternative function?
Sencha Architect doesn't support all features and it has a lot of limitations.
Follow these steps to customize your prepareData.
1 - In your project inspector, click on your Data View
2 - In your config panel, select "Process Config" and click on the + sign next to it.
3 - A process method will be created, click on this method and go to the code editor
4 - add this to the code editor
return Ext.apply(config, {
prepareData : function ( data, recordIndex, record ) {
// your code here
}
});
This should customize your prepareData method.
Related
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
Drupal 7 with TinyMCE included via the Wysiwyg module. "Paste" is enabled in the Wysiwyg config screen. The editor is in general working fine, but now I'm attempting to modify TinyMCE's paste feature to strip all attributes from HTML tags. (Client requirement, don't ask.)
Have added the following to the module file:
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'tinymce') {
drupal_add_js(drupal_get_path('module', 'MYMODULE').'/js/tinymce_callbacks.js');
$settings['paste_preprocess'] = 'MYMODULE_tinymce_paste_preprocess_callback';
}
}
and have created tinymce_callbacks.js with the following contents:
function MYMODULE_tinymce_paste_preprocess_callback(pl, o) {
alert(o.content);
o.content = "-: CLEANED :-\n" + o.content;
}
The actual TinyMCE paste button only works with IE, but the ctrl-V shortcut works with every browser. However, the callback is not called.
I did some digging around. The paste_preprocess setting is definitely being added to the correct JavaScript object, but the only code that references it -- the TinyMCE Paste plugin -- isn't being loaded. So it looks like the problem is with Drupal, not TinyMCE.
Any help getting Drupal to load TinyMCE plugins correctly would be most appreciated.
Make sure that the "paste" TinyMCE plugin is actually being loaded. For some reason, in Drupal there is an entry under "Buttons and Plugins" titled simply "Paste". This however does NOT enable the "paste" plugin required for the paste preprocess callback to occur.
Instead, make sure either "Paste Text" or "Paste from Word" is enabled. This should cause the "paste" plugin to load, and the paste preprocess callback to occur.
I'm working on UI testing an ExtJS web-app, and I'm a beginner.
I am trying to test the ExtJS widgets by using CasperJS/PhantomJS tool.
Also, I generate the required CasperJs script using Resurrectio and by making necessary changes to it.
Since ExtJs generates unique ids dynamically for the DOM elements that it creates, I want to know how to provide those ids in CasperJs script for testing.
For example, The following Casper Script was generated by Resurrectio:
casper.waitForSelector("#ext-gen1142 .x-tree-icon.x-tree-icon-parent",
function success() {
test.assertExists("#ext-gen1142 .x-tree-icon.x-tree-icon-parent");
this.click("#ext-gen1142 .x-tree-icon.x-tree-icon-parent");
},
function fail() {
test.assertExists("#ext-gen1142 .x-tree-icon.x-tree-icon-parent");
});
casper.waitForSelector("#gridview-1038",
function success() {
test.assertExists("#gridview-1038");
this.click("#gridview-1038");
},
function fail() {
test.assertExists("#gridview-1038");
});
Here #ext-gen1142 and #gridview-1038 are the ids dynamically created. How should one provide data in the tests? Is there any stub or mocking tools which works with ExtJs in the code to provide these ids at runtime during tests?
I came across SinonJS. Can it be used or Do I need to used CSS or XPath Locators as mentioned in this answer? How reliable it is to use CSS or Xpath Locators?
Thanks in advance!
Not so easy to answer this, but here a few thoughts...
Don't rely on generated IDs. Never. They'll change in moments you won't like and if you have luck very much earlier.
Your best friends will probably be pseudo CSS classes you attach to your components. You could also use IDs, but this is only reasonable when you have elements which occur only once in your page. If that is the case, they are very good anchors to start with selections/queries.
XPath with ExtJS is possible, but you have to carefully choose the elements. ExtJS is so verbose in generating little things so your paths can be quite complicated. And when Sencha drops support for problematic browsers (IE < 8) maybe they change their templates and your XPath doesn't find anything.
SinonJS is great. But it won't help you much in DOM problems. But sure you can use it in your tests. I suppose it will payoff most in testing parts of your controllers or non-trivial models.
Model your test components after your real UI components and screen sections. Don't just record a script. Test code should be engineered like production code. If you create reusable components of test code and logic, you don't have to fear changes. In the best case the changes in one component will only touch the testing code of that particular component.
I know you have ExtJS. But take some time to look at AngularJS and see how easy it can be to test all parts of a JavaScript web application. I'm not saying you should switch to AngularJS, but you can learn a lot. Have a look at Deft JS as it has many concepts which enhance testability of ExtJS applications.
I use Siesta for my ExtJs testing. It works amazingly good for all JavaScript (jQuery based and others), but is specifically designed for ExtJS/Sencha Touch.
It has the feature to combine CSSquery and ComponentQuery to select your elements I think that will fix a lot of problems for you.
In the paid version there is even a test recorder to record scenario's and use them for your tests.
Here's a demo
Here's some sample code:
StartTest(function(t) {
t.chain(
{ waitFor : 'CQ', args : 'gridpanel' },
function(next, grids) {
var userGrid = grids[0];
t.willFireNTimes(userGrid.store, 'write', 1);
next();
},
{ waitFor : 'rowsVisible', args : 'gridpanel' },
{ action : 'doubleclick', target : 'gridpanel => .x-grid-cell' },
// waiting for popup window to appear
{ waitFor : 'CQ', args : 'useredit' },
// When using target, >> specifies a Component Query
{ action : 'click', target : '>>field[name=firstname]'},
function(next) {
// Manually clear text field
t.cq1('field[name=firstname]').setValue();
next();
},
{ action : 'type', target : '>>field[name=firstname]', text : 'foo' },
{ action : 'click', target : '>>useredit button[text=Save]'},
function(next) {
t.matchGridCellContent(t.cq1('gridpanel'), 0, 0, 'foo Spencer', 'Updated name found in grid');
}
);
})
I've got an ExtJS3 application which could benefit from the ExtJS4 SVG stuffs. Online there is an example of how to use sandbox mode to include ExtJS4 components in an ExtJS3 application... but in the example the ExtJS4 components are in their own floating window, so the ExtJS4 components aren't really added to ExtJS3 components; they just co-exist rather independently.
Is there a way to add an ExtJS4 component to an ExtJS3 component while running in sandbox mode? For example:
var item = Ext4.create("Ext.panel.Panel", { // ExtJS4
/* config */
});
var parent = new Ext.Panel({ // ExtJS3
items:[item],
/* more config */
});
If I try something like this, I usually get an error like...
this.container is null (http://localhost:4000/path/ext-4.0.0/builds/ext-all-sandbox-debug.js:27723)
It would seem that some Ext4 components can renderTo DOM elements in Ext3 components, with limited success:
var ext3Panel = new Ext.Panel({
title:'Ext3'
});
ext3Panel.on('afterrender', function() {
var ext4Panel = Ext4.create('Ext.panel.Panel', {
title:'Ext4',
renderTo:ext3Panel.body.dom,
});
ext3Panel.add(ext4Panel);
});
This seems to be most useful when using Ext4 charts in an Ext3 project.
Citations:
Sencha Forum: ExtJs3 and ExtJs4 in One App
Sencha Forum archives: Using Ext JS 4 Charts in Ext JS 3?
I don't think what you're doing is possible. ExtJS 4 has a completely new rendering engine, and so it's looking for a layout container that doesn't exist.
You'd be far better off migrating from ExtJS 3 -> 4.