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?
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.
I am using Kendo UI grid for AngularJS. The scenario is; I have expanded one master row which contains another grid in its detail template. When I insert new item in the detail template grid, the master row automatically collapsed. what I want is when I making changes to detail template grid than there must be no affect on master row(I mean should not be collapsed). any help will be appreciated.
I know the question is old but I have faced the same scenario and come up with this, when you rebind/refresh grid by any mean, the grid get re rendered and thus you got collapse your row. apparently this behavior is of kendo ui. the only thing you can do is take that expanded row id and then rebind grid, after rebind expand that row again
Try adding a dataBinding function to the grid to cancel the default action on the item Change event.
Example Below:
$("#grid").kendoGrid({
navigatable: true,
sortable: true,
dataBinding: function (e) {
if (e.action == "itemchange") {
e.preventDefault();
}
},
});
I have a table with a button to add a new element and another in the row to edit the element. Those actions shares the same form with the only difference that in edit mode the form is filled. When the user clicks on the button a new window is shown with the form.
The first time that i click the button, for example, to add a new element, works fine. The form is shown. But... if i close the window and i try to edit a user, appears an extrange window without content and an error "TypeError: b is null" Is it a problem with the definition of the form? Maybe the form istance is deleted with the window?
I've a form defined in a var:
var formPanel = Ext.create('Ext.form.Panel',{
extend: 'Ext.form.Panel',
id: 'policyForm',
...
I have a button in the tbar of the grid to show the window in order to add an user and another button in the row to edit him. This is the handler of the button:
handler : function(){
Ext.create('Ext.window.Window',{
layout: 'fit',
title: 'New Policy',
items: [formPanel],
width: 650,
height: 500,
id: 'myPolicyWindow'
}).show();
}
It is very likely that those ids that you have set in your Panel and Window code are causing you to not be able to reuse the same form in different windows. You should try to avoid using the id property on Ext components, it can cause issues like this one since IDs should be unique. Use the itemId property in conjunction with Ext.ComponentQuery to allow for getting references to components without using Ext.getCmp(compId).
I agree that you shouldn't use ids. However, the actual issue is probably what you suspect: the instance of the form is getting destroyed. This is because the default closeAction of Ext.window.Window is "destroy", which will wipe out any child components as well. Either change closeAction to "hide", or create a new instance of the form panel along with the new instance of the window.
i stuck with a problem which is really important i guess.
In a simple Sencha Touch App I have many views. My Mainview is a TabPanel with docking icons in the bottom. Sometimes in my App I switch to another views which are outside of the Tabpanel. I don't want the DOM to overload with views, i don't need anymore so i'm searching for a solution to destroy a view, when its inactive.
I've tried this, while switching into another view in my controller:
this.getMainview().destroy();
It seems that the Mainview gets deleted but I get an error:
Uncaught TypeError: Cannot read property 'dom' of null
So i guess something's wrong with the .destroy() - Method or is there a better way to handle this problem?
Before moving to new view you can call bellow code to remove current view
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
or you can also provide item object instead ActiveItem
I've got stucked with this problem many times before. It seems that currently, there's no efficient and actually bug-free solution in Sencha Touch 2. When the view is added again at second time, that unpleasant error will show again.
A possible solution:
This code snippet:
your_container(your_container.getActiveItem(), false);
will not actually destroy your sub-component from memory but from the DOM. Later when you add it, there will be no error (as I've tested).
Hope it helps.
I'll expose my situation and how I solved it.
I have a TabPanel with icons. One of those tabs shows a List of items. When you click on an item you're taken to a new Panel that shows its description. If you click a Back button, that Panel is destroyed and you return to the List. This way you destroy the "description" Panel which is unused now.
So what I did was creating a function to instantiate the Description Panels depending on the index of the Item clicked:
function project(i) {
var v;
switch(i) {
case 0:
v = Ext.create( 'Ext.Panel', {
title: 'title',
layout: { type: 'fit' },
id: 'project0',
iconCls: '',
style: '',
html: 'my html'
});
break;
}
return v;
}
Now, in the 'itemtap' event of the List I have this:
var lastItem = container.add(project(i));
itemsList.hide(); //hide the List and display only the new Panel in the container
Now, I have a button in the header to return to the previous View (i.e. the List), and this is the event 'tap' of that button:
container.remove(lastItem, true); //hide and destroy it
itemList.show(); //show the List again
So if I go back and forth between the List and the Description items (Panels) now there is no problem as I get a new instance everytime I clicked on them and likewise it gets destroyed when I return.
That solved my problem.
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.