I am new to Extjs,I create a grid panel in extjs, with toolbar. I give a add button, in controller the button name is given. in view, i create a tool bar in create function, not in define. Using alias i create one name also, by using that widget name i used to call in controller, by using button action value give thew function foropen a new, but it notworking. If i use panel within init function in view part means it will not disply any panels.
and my coding is
Ext.create('Ext.toolbar.Toolbar', {
alias : 'widget.toolbar',
renderTo: document.body,
items: [
{
itemId : 'addtab',
text: 'Add',
iconCls: 'add',
action: 'addtab'
}]
})
this is the view part. action here i given as addtab
and my controller is
init: function() {this.control({
'toolbar button[itemId=grid-add]': {
click: function(){
top.addTab(true,"../medias/add","Media","common",0,'add');
}
}
})
button is working.. and my add page is also working fine. but the calling function that is cal by alias is not working. can anyone give the solution.
i want to give the function in controller file only.
thank you..
Related
I have a partialview "selectUser". On this partial view a user can search for other users. The user id will be stored in a hidden field or as a var on my view. I need to use this partial view in many places. Lets say I need to return the id of the selected user on the close event of my dialog. My question is, how do I make this partial view, loaded as a modal dialog with jquery ui, to retrun the selected value to its parent view? Is there a way to access the value directly from the parent view?
I think I follow what you are needing now. So on your button click you do an ajax call back to the server and include the destination field name in the call
$.ajax({
url: "#(Url.Action("Action", "Controller"))",
type: "POST",
cache: false,
async: true,
data: { destination: 'fieldName' },
success: function (result) {
$(".Content").html(result);
AttachScript();
Dialog.load();
}
});
On your controller send that field to the partial view through your view model or viewbag and on the partial view put that field name in a hidden field. then in your button click you should be able to do something like this (untested)
function AttachScript(){
$('.btnSubmit').on('click', function(){
var data = $('.sharedField').val();
$($('.HiddenField').val()).val(data);
});
}
which will set the value of whatever field is named in your hidden field to the data. Hopefully this helps.
I am not able to get combobox value in a controller. The getter method of combobox view returns
function i(){
return this.constructor.apply(this,arguments)||null
}
instead of view object instance. If I use
var combo=this.getColumnTypeComboView().create()
then I don't get selected value of the combobox combo.getValue().
To get view reference in a controller simply use getView() method from the Controller class. To create a connection between view and a controller make sure that you follow MVC aplication architecture principals, found here
var view = this.getView('Contact'); //=> getView( name ) : Ext.Base
if a combobox is a item of a view that your controller is in charge off, then use control method also from Controller class.
Ext.define('My.controller.Contact', {
extend: 'Ext.app.Controller',
views: ['Contact'],
init: function() {
//reference the view
var view = this.getView('Contact');
//reference the combobox change event
this.control({
'mywin combobox': {
change: this.onChangeContinent
}
});
},
onChangeContinent:function (field, value, options) {
//here you can get combobox component and its value
Ext.Msg.alert('Continent', value);
}
});
here is a fiddle example
EDIT:
To reference one component from another, you can use Controller ref method, like this:
refs: [{
ref: 'combo',
selector: 'mywin combobox'
}]
here is a fiddle example 2
I've a function in controller of extjs4.0 MVC it called on button
which is in view page but when I open another tab then this function not called
on button
Kindly help me in this matter
//------------- Code
init: function() {
var controller = this;
this.control({
'leftPanel button[action=reset]': {
click: this.resetForm
},'leftPanel button[action=search]' : {
click: this.searchForm
}
})
}
these 2 function will not call again if open another tab on my site
Kindly help me in this matter
Thanks
actually the fields are in view page like
this
buttons: [{
text: 'Reset Filter',
name :'btnReset',
id:'btnReset',
action:'reset'
},{
text: 'Perform Search',
name:'btnSearch',
id:'btnSearch',
action:'search'
}
]
you can see in config option defined
the name of the function 'search , rest' which is defined in controller of the page (as I posted on my question). this function works
properly when page load and if we not perform any action of this page where these function called but when I' opening a tab (by Using Ajax Request) after that the above function not called no error messages appear.
hopefully you can understand the problem
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
I have a TabPanel with a Tabbar and four panels inside. I want to load the HTML content for the fourth panel with an AJAX call when the panel becomes visible.
The AJAX function fetches the data from the server and places it inside the panel, which uses the panel update function. The problem is how to call this function when the panel becomes visible. A simplified version is:
Pages.Contact = new Ext.Panel({
title: 'Contact',
html: 'test data',
iconCls: 'user',
cls: 'cHome',
activate: function () {
Pages.Contact.update("my ajax data");
}
});
When I go to my panel the body content is not affected. Does anyone know what goes wrong here? I've already tried to replace activate with render and show.
To add event's listeners you need to do
listeners: {
activate: function(){
console.log('activate fired');
}
},
But that's not the event you want to listen. It's better to listen for beforecardswitch on the TapPanel object, example:
listeners: {
beforecardswitch:function(newCard, oldCard, index, anim){
if(index == 3){
//loadJson and update card.
// you may want to use this also
newCard.setLoading(true);
//and after the json request has finished set it to false.
}
}
},
The solution was to use:
beforecardswitch:function(object, newCard, oldCard, index, anim) {
As shown by Ilya139 by with the object parameter as first parameter.
Then the index variable returns the correct cardnumber.