Develop Reference

ExtJs Access to a controller by a view

I have an extjs app with the MVC model, in the view I have a panel and a pager, in the controller of the view, I have all events of the view, but I don't know why the deselect event doesn't active, all other events are normally activated (select event works ok), why is the problem with this event?
I have this code:
The view:
Ext.define('app.view.ViewResultados', {
extend: 'Ext.window.Window',
alias: 'widget.viewResultados',
id: 'viewVentanaResultado',
height: 295,
width: 690,
layout: 'fit',
collapsible: true,
constrain: true,
resizable: true,
closeAction: 'hide',
initComponent: function() {
var paginador = Ext.create('Ext.PagingToolbar', {
// store: dataStore,
id:this.id+'_paginador',
displayInfo: true,
displayMsg: 'Mostrando resultados {0} - {1} de {2}',
emptyMsg: "No hay resultados para mostrar",
items:['-',],
pageSize: 10,
action: 'paginador',
resizable: false,
height: 50,
});
var grid = Ext.create('Ext.grid.Panel', {
id: this.id+"_tabla",
alternateClassName: 'Ext.grid.Column',
sortable: true,
selModel: Ext.create('Ext.selection.CheckboxModel'),
action: 'tabla',
bbar: paginador
});
Ext.apply(this, {
items: [grid],
buttons: [
{
text:'Borrar selección',
action: 'borrar'
}]
});
this.callParent(arguments);
}
});
The controller:
Ext.define('app.controller.ControlResultados', {
extend: 'Ext.app.Controller',
views : ['ViewResultados'],
init: function() {
this.control({
'viewResultados button[action=borrar]': {
click: this.borrar
},
'viewResultados button[action=exportar_xls]': {
click: this.exportar_xls
},
'viewResultados button[action=reporte]': {
click: this.reporte
},
'viewResultados grid[action=tabla]': {
select: this.seleccionRegistros,
},
'viewResultados':{
close: this.cerrar
},
'#resultados_tabla':{
deselect: this.test
}
});
},
borrar: function (b, e, eOpts){
},
exportar_xls: function (b, e, eOpts){
},
reporte: function (b, e, eOpts){
},
seleccionRegistros: function(grilla, record, index, eOpts){
console.log("ACCESS SELECT EVENT");
},
eliminarSeleccion :function(grilla, record, index, eOpts){
},
adicionarFeatureSeleccionado : function(registro){
var ventana = Ext.getCmp('resultados_tabla');
console.log(ventana);
},
removerFeatureSeleccionado: function(registro){
console.log(registro.data["id_interno"]);
},
acercamientoSeleccion: function() {
},
abrirVentana: function(titulo, resultados){
},
cargarCapaConsulta: function(listadoDatos){
},
construirTablaResultado: function(listadoDatos, geom,idConsulta, idElemento, tipo){
},
construirColumnas_DataStore: function(objeto,geom, tipo,idElemento ){
},
acercamientoSeleccion: function() {
},
acercamientoSeleccionCompleta: function() {
},
contiene: function(a, obj) {
},
buscarcapa: function(id){
},
cerrar: function(){
},
test: function(){
console.log("FUNCION!");
}
});

I solved mi problem with this:
Ext.define('Ext.overrides.selection.CheckboxModel', {
override: 'Ext.selection.CheckboxModel',
compatibility: '5.1.0',
privates: {
selectWithEventMulti: function(record, e, isSelected) {
var me = this;
if (!e.shiftKey && !e.ctrlKey && e.getTarget(me.checkSelector)) {
if (isSelected) {
me.doDeselect(record); // Second param here is suppress event, not "keep selection"
} else {
me.doSelect(record, true);
}
} else {
me.callParent([record, e, isSelected]);
}
}
}
});

Different buttons in same jQuery dialog

I have a button #create-user that opens a dialog with 2 buttons(submit, cancel). Is it possible to add another button #edit-user on the page that opens the same dialog but with different buttons (edit, delete, cancel)? This is my code so far:
$(function () {
var dialog, form,
name = $("#name"),
birthdate = $("#student-datepicker"),
allFields = $([]).add(name).add(birthdate),
tips = $(".validateTips");
function addStudent() {
var data = {
'action': 'add_student',
'name': name.val(),
'birth': birthdate.val(),
'add-student': true
};
var valid = false;
allFields.removeClass("ui-state-error");
if (valid) {
$.post(ajaxurl, data, function (studentId) {
dialog.dialog("close");
});
} else {
}
}
dialog = $("#dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit": addStudent,
,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[ 0 ].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addStudent();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});

Acctually i solved it differently ...here is the solution and the code I added:
$(function(){
dialog2= $(".dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
$(".edit-student").button().on("click", function () {
dialog2.dialog(
'option',
'buttons', [{
text: 'A brand new button!',
click: function () {
$(this).dialog('close');
}
}]);
dialog2.dialog("open");
return false;
});});
I'm returning false on the button click event just to make sure the page isn't posting/refreshing.

Sencha Touch Load a different View on click

This is my first attempt on Sencha Touch. So please excuse me if I am asking any silly questions.
I am trying to follow clean MVC pattern from Sencha. on Home page when user clicks I want to load AdboutView, I am not sure what is wrong in this code, but it doesn't fire "onGoToAboutMeCommand"
app.js
Ext.application({
name: "HaBoMobile",
models: ["HomeModel"],
stores: ["HomeStore"],
controllers:["HomeController"],
views: ["HomeView", "AboutView"],
launch: function () {
var homeLandingView = {
xtype: "LandingView"
};
var aboutView = {
xtype: "AboutView"
};
Ext.Viewport.add([homeLandingView, aboutView]);
}
});
HomeView.js
Ext.define("HaBoMobile.view.HomeView", {
extend: "Ext.navigation.View",
fullscreen:true,
requires: "Ext.form.FieldSet",
alias: "widget.LandingView",
config: {
//scrollable: 'vertical',
items: [
{
title: 'Harsha Bopuri',
padding: 10,
items: [
{
itemId: "aboutButton",
xtype: 'button',
text: 'About me',
handler: function () {
this.fireEvent("goToAboutMeCommand", this);
}
}
]
}
],
//Not sure when I have handler, if I still need listeners?
listeners: [
{
delegate: "#aboutButton",
event: "tap",
fn: "onAboutButtonTap"
}
]
},
onAboutButtonTap:function(){
this.fireEvent("goToAboutMeCommand", this);
},
onBackButtonTap: function () {
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
HomeController.js
Ext.define("HaBoMobile.controller.HomeController", {
extend: "Ext.app.Controller",
config: {
refs: {
homeView: "HomeView"
},
control: {
homeView: {
goToAboutMeCommand: "onGoToAboutMeCommand"
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
// Commands.
onGoToAboutMeCommand: function () {
console.log("onBackToHomeCommand");
this.showAboutMe();
},
onBackToHomeCommand: function () {
console.log("onBackToHomeCommand");
this.shoHomePage();
},
showAboutMe: function () {
Ext.Viewport.animateActiveItem(this.getAboutView(), this.slideRightTransition);
},
shoHomePage: function () {
Ext.Viewport.animateActiveItem(this.getHomeView(), this.slideRightTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
var homeStore = Ext.getStore("HomeStore");
homeStore.load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
});

I think the problem is in your refs section of your controller,refs takes key value pair.key can be any reference and while value is used in ComponentQuery.
I would suggest to add xtype in your HomeView.js file,like below.
Ext.define("HaBoMobile.view.HomeView", {
extend: "Ext.navigation.View",
xtype: 'HomeView',
//-----

Button handler that fires goToAboutMeCommand event runs in the scope of the button but in the controller you listen to homeView so the event is never caught.
This button handler should work:
handler: function (btn) {
var hv = btn.up('homeView');
hv.fireEvent("goToAboutMeCommand", hv);
}

how to close plugin dialog with tinymce 4.0b3

I'd like to close the dialog within the onclick function of the first button, I've tried running the close() function that I've found on the windowManager object through console.log but it doesn't work.
when I do:
console.log(editor.windowManager);
I see the following output:
Object {windows: Array[1], open: function, alert: function, confirm: function, close: function}
and then I call that close function you see in the output above like so
editor.windowManager.close();
and then I get:
Uncaught TypeError: Cannot call method 'close' of undefined
here is my code
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}]
})
}
});

You can close the popup like so:
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: editor.windowManager.close()
}]
})
}
});
Looking at the provided plugins, the more common way it to assign editor.dom to a var and call close on that, like so:
var win = editor.dom
...
win.close()

How do i get a class instance in Extjs?

I defined a class 'IMS.SellMgt.testForm'.when i click the button 'submit',i want to get 'var test = this.formPanel;',why test is null? if i want to get this.formPanel,how can i do?Thank you!
Ext.define('IMS.SellMgt.testForm', {
formPanel: null,
LoadForm: function () {
this.formPanel = new Ext.form.Panel({
renderTo: 'form-ct',
frame: true,
title: 'XML Form',
width: 300,
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}
]
}],
buttons: [{
text: 'Submit',
handler: function () {
var test = this.formPanel;
}
}]
});
}
});
Ext.onReady(function () {
var frmTest = Ext.create('IMS.SellMgt.testForm', {});
frmTest.LoadForm();
});

try something like:
......
handler: function () {
var test = this.findParentByType(Ext.form.FormPanel);
}
....

handler is a simpler way of specifying a click event listener for the button. Since it is short hand, it has some drawbacks.
With handler, the context of the function is always the button. In other words, this inside the handler function is the button, not your form.
In order for this to be your class, use a listener with a scope specified:
buttons: [{
text: 'Submit',
listeners: {
click: function() {
this.formPanel; // will work now
...
},
scope: this // this is the key
}
}]
You can also use up to find the form:
handler: function() {
var form = this.up('form');
...
}