I'm trying to change ComboBox configuration by reinitializing:
Ext.onReady(function(){
var mycb = new Ext.form.ComboBox({
//params
});
//here is other component initizing
var other = ....
onChange: function() {
//here I'm trying to reinitialize ComboBox
mycb = new Ext.form.ComboBox({
// other params
});
}
});
But after onChange event my ComboBox's disapeared. I tried to invoke mycb.destroy() methods, but there's the same result.
Should I unregister or something like that ComboBox? Why my component is disapearing?
use below code ..
mycb.reset();
mycb.removeAll();
// for loading new data
mycb.loadData("new data store");
// to load attributes
mycb.load({params:{start:0, limit:25, reset:true}});
this is working in my code. Please change as per your need.
Probably a better idea would be to remove the original combobox from its container and add a new one in its place. Also perhaps all you need is to reload the store with new data?
Wrap this combo in panel with fit layout. In onChange handler remove combo from that panel, destroy it (combo), and add new combo to the panel. Having additional panel will give you easy way to put it in right place in the layout.
Related
(Snapshoots are here for more details)
i got this : a combobox in the main view and 3 tabs that use the combobox to load their store.
The files Mathrice*.js describe the whole view and the others (in directories) are the tabs.
My question is if there is a way to get the combobox in the tabs controller
If your combobox has an ID as displayed below
Ext.create('Ext.form.ComboBox', {
id: 'mycombobox',
renderTo: Ext.getBody()
});
Then you can get the combobox component anywhere in the controller using:
var cb = Ext.getCmp("mycombobox")
//note the name is the id of the combobox
//here cb will be the combobox instance that you need.
Solution :
Just need to to understand how viewModel works in sencha (cf sencha doc)
In tab's controller, i tried to get the parent controller which contains the combobox and then i play like i'm in that view.
Below the controller of one tabs
,mathrice : this.getViewModel().getParent().getView().getController()
,init:function () {
console.log(" VPN Tab Controller");
var me=this
,selectALab = me.mathrice.lookupReference('comboboxLab')
}
If the combo and tabs are under different controllers, there's no need for the tabs controller to be aware of the combo. You want to have the combo's controller fire an event when the combo's change that you are interested in happens. The tabs controller should listen to this event and take action. This approach reduces coupling and makes your app more maintainable.
The case is pretty common, when you dbl click a cell in a grid, modal window with a form appearing, there you make changes, click the Save button, and having the store in a grid updated. In 4-th I did it via loadRecord from grid to form, and then used set-method to apply changes to grid store. Now I'm trying to do it with MVVM approach, and having some stucks. Because when I set the same VM to the grid and form, after form destroying (Save or Cancel button) the VM is also destroying, and the app ruining. And so, we can't use one VM instanse in multiple components. We have to place it in a container, where a grid and a form are. All official examples are of such a type.
And the question is, if anybody resolved this issue?
fiddle
answer from sencha forum
ExtJs 5 ViewModel has nested structure for components, all sub-objects can to use parent's ViewModel. So you could try to add window object to ViewController view:
var form = Ext.create('Plus.view.FormbetV');
var window = Ext.create('Ext.Window', {
frame: true,
width: 350,
height: 200,
modal: true,
layout: 'fit'
});
window.add(form);
this.getView().add(window); // <--- add parent 'scope'
window.show();
And don't forget to remove this code:
//var viewModel = Ext.getCmp('gridbet').getViewModel();
//this.setViewModel(viewModel);
It works for me, but in this case windows size will be limited by grid size.
In addition to user1638582's answer, my own solution was to add selected record to ViewModel of form:
var form = Ext.create('Plus.view.FormbetV',{
viewModel:{
data:{
currentRec:this.getView().getSelectionModel().getSelection()[0]
}
}
});
https://fiddle.sencha.com/#fiddle/jp6
Looking at the examples, the "Data Binding -> Isolated Child Sessions" seems to be what we're looking for:
http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#binding-child-session
Have you read through this blog post, in which an MVVM example for the grid is used?
I'm trying to build an app which edits simple graphics on screen, fabricjs is the canvas library I use, and angularjs is the MVW framework I use.
Now, the bindings from DOM to fabric work just fine (I click a div, and corresponding object on canvas gets selected), but not the other way around. When I click an object on canvas, and it gets selected the corresponding DOM isn't updated. I've read here that I should be using $scope.$apply();, but I'm not sure where to put that.
How do I make fabric update $scope state?
You can see the code here, click the Add Rect button to add elements to the canvas, and notice that when you click the element's name on the right it get's selected on the canvas, but if you select it directly on the canvas it's button isn't high-lit.
code: http://plnkr.co/edit/lMogPGjJOXx9HLAdiYqB
FabricJS implements events on its classes, so one could bind arbitrary listeners to them. In your case, you could bind a listener to the "object:selected" event, which would call $scope.$apply() and would be fired whenever a object is selected on canvas.
See the Event Inspector Demo and the Observable Class Documentation. The Canvas class inherits all these methods, so you could bind listeners to it. You can even retrieve the selected object, as in the example:
var canvas = new Fabric.Canvas('canvas_container');
canvas.on("object:selected", function (options, event) {
var object = options.target; //This is the object selected
// You can do anything you want and then call...
$scope.$apply()
});
Based on the answer from Bernardo Domingues and MeLight's comment, it took me still some time to figure out.
The final solution for above is:
var canvas;
window.onload = function() {
canvas = new fabric.Canvas('canvas');
canvas.on("object:selected", function (options, event) {
//var object = options.target; //This is the object selected
var scope = angular.element(document.getElementById('canvas')).scope();
// You can do anything you want and then call...
scope.$apply();
});
};
The answer on AngularJS access scope from outside js function was very helpfull, together with http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
If you also want to see the position-information change when moving, add:
canvas.on("object:moving", function (options, event) {
var scope = angular.element(document.getElementById('canvas')).scope();
scope.$apply();
});
I would like , how to puts data in grid Panel when i clik on a tree's node ?
When , i clik on a node, it fires a itemclick events, i have model on parameters ...
now, i want to "write" the data's model on my gridPanel. I want to had one line on my grid !
With a grid Panel, i must to use store , so i have tested with memory store who contains an empty data properties .. ! I thought , i can putting data on the fly in my grid ... maybe i can't !
I need helps, thanks a lot :) !
To add data to a grid, you need to add the data to the grid's Store. There is a ton of documentation about adding new items, but you would do something like this:
var Item = grid.getStore().recordType;
var newItem = new Banner(
{
// attributes of your newItem here
// these would be the same as your Store
});
store.insert(0, newItem);
That would insert your new item as the first item in your store, and should automatically fire the grid to refresh. If it doesn't, you can manually fire a refresh by doing:
bannerGrid.getView().refresh();
Documentation for Store. Take a look at the add() and insert() methods.
has anybody had the need to add an extra button to the grid panel header menu(sorting\columns)?
potentially I would like to add another button to the menu that resets to the default columns model. I can accomplish this using Jquery but I was wondering if there is an EXTjs way to do it.
Thanks
You need to dig through the source to see it's there, but a GridPanel has a view property which is its GridView which in turn has a hmenu property which is the menu it shows when you click on one of those column headers.
So, with a GridPanel called gridpanel (once it's rendered) you can do the following:
gridpanel.view.hmenu.add({
text: 'reset',
handler: function() {
// reset magicks
}
});