I have a window. and some fields in it (textfield and button). Now i want to submit these details.
I get this error:
TypeError: button.up("form").getValues is not a function
Button function
buClicked : function (button,record) {
var val= button.up('form').getValues();
console.log(val.textfieldValue);
}
My Widow Definition
Ext.define('MyApp.view.WindowForm', {
extend: 'Ext.window.Window',
alias: 'widget.winform',
id: 'winformid',
var val= button.up('form').getForm().getValues();
You are extending Window's class which is okay,but also add items config where ,you will include the xtype:form whose config has the the textfield and the buttons config something like this:
Ext.define('MyApp.view.WindowForm',
{
extend:'Ext.window.Window',
id:'myformvin',
items:[
{xtype:'form',items:[{xtype:'textfield',fieldLabel:'My name',name:'myname'}],
buttons:[{xtype:'button',text:'save',handler:function(btn){
var val = btn.up('form').getForm().getValues();
console.log(val); //to confirm that you have the values
}
}]
}
]
}
);
Related
I am trying to extend the TextField to initialize the value based on the location information. The following code does what i need.
Ext.define("Tasks.view.LatitudeField", {
extend: 'Ext.field.Text',
alias:'widget.latitudeField',
xtype: 'latitudefield',
initialize : function()
{
console.log("Component Initialized ");
this.setValue("123456");
},
});
But when the field is displayed, I can't click on the x icon to clear the text. The x icon is not clickable at all.
Call the parent method in your initialize method:
initialize: function() {
console.log("Component Initialized ");
this.setValue("123456");
this.callParent(arguments);
}
How can I call getView(view_name)` in Sencha touch? I usually do this on extjs but I can't in sencha touch. I could not understand the application concept.
run_edit: function(data) {
$this = this;
this.mode = "update";
this.data = data;
this.win = this.getView('Group_prop').create();
var form = this.win.down('form');
var util = this.getController('controller_Helper');
form.getForm().loadRecord(data);
util.form_lock({
form:form,
items:['GROUP_KODE']
});
util.form_require({
form:form,
items:['GROUP_KODE','GROUP_NAMA']
});
this.win.show();
},
I see you are trying to create a view and set it to window, in sencha touch you can do it like this:
Ext.Viewport.add(Ext.create('MyApp.view.ViewName'));
instead of Viewport you can take any other container and set newly created view to it
Ext.getCmp('myContainerId').add(Ext.create('MyApp.view.ViewName'));
to fetch this view later, you have to specify id config in view and then get it like this:
var view = Ext.getCmp('ViewId');
Ok so it seems like you are trying to get the view: Group_prop. Make sure this view has an id or preferably an itemId set in its config. e.g
Ext.define('MyApp.view.GroupProb', {
extend: 'Ext.Panel',
alias: 'widget.group_prob',
config: {
...
itemId: 'groupProb',
...
},
....
});
Now in your controller you need to create a reference for this view to access it properly. So your controller would look something like this:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs : {
groupProb : {
autoCreate: true,
selector: '#groupProb',
xtype: 'group_prob'
}
},
control: {
...
},
...
},
run_edit: function(data) {
$this = this;
this.mode = "update";
this.data = data;
this.win = this.getView('Group_prop').create();
var form = this.win.down('form');
var util = this.getController('controller_Helper');
form.getForm().loadRecord(data);
util.form_lock({
form:form,
items:['GROUP_KODE']
});
this.win.show();
},
...
});
Now from your run_edit function, its seems like you are working with windows from the this.win variable (correct me if I'm wrong). Well in Sencha Touch, you work with Panels. Also at the end of this function you call the show function on this.win, which suggests that you want to execute run_edit when the this.win is shown. That being said, you may want to your run_edit function to look something like this:
run_edit: function() {
var me = this,
mode = 'update',
data = data,
groupProbPanel = me.getGroupProb();
// This assumes that your form component has an itemId.
// You need one inorder use the down method.
var form = groupProbPanel.down('#form_itemId');
// You may want to double check this. I don't think that is how you
// you get the controller.
var util = this.getController('controller_Helper');
form.getForm().loadRecord(data);
util.form_lock({
form:form,
items:['GROUP_KODE']
});
}
Since we want this to happen when groupProbPanel is shown we need to set a show event listener in our control config. So your controller's config should look like this:
...,
config: {
refs : {
groupProb : {
autoCreate: true,
selector: '#groupProb',
xtype: 'group_prob'
}
},
control: {
groupProb : {
show: 'run_edit'
},
...
},
...
},
...
Two ways is there to call the Views
1.
Ext.Viewport.setActiveItem({xtype:'TwowayMakePayment'}); // view xtype
2.
var getti=Ext.create('VUCFyn.view.AfterLogin'); //create object 4 d view
Ext.Viewport.add(getti); // next add the object
Ext.Viewport.setActiveItem(getti); // final Active that obj
I have a checkitem menu and I want to add icons to each menu item, so I inserted each icon after the menu item is rendered.
peace of my code:
{ xtype: 'menucheckitem',
text: 'First Arrow'
listeners: {
render: {
fn: me.onMenucheckitemRender,
scope: me
}
}
}
onMenucheckitemRender: function (abstractcomponent, options)
{
Ext.DomHelper.insertAfter(abstractcomponent.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "icons/arrow1.png"
});
}
This works just fine, but since I will need it many times with different icons, I would like to know how to create a subclass so I can reuse this functionality.
Thank you
use the Ext.define method and the extend property.
Ext.define('SomeNamespace.menu.menucheckitemWithIcon', {
extand: 'Ext.menu.CheckItem',
alias: 'widget.menucheckitemWithIcon',
.
.
.
});
Am having a delete button in my EXTJS Application. On clicking the button, am opening a confirmation form, asking the user are they sure to delete the item. The delete button is a part of many forms in my Application. And irrespective of the form being used, am opening the confirmation window.
And on clicking the yes button in the confirmation window, i want to do some action. But these actions have to be specific to the form that was opened first.So, am confused about how to use the same view, the same button, but different actions depending upon the first form that was opened.
View: This is the window that opens on clicking the delete button in any of the forms
Ext.define('app.view.GenMessageWin', {
extend : 'Ext.panel.Panel',
alias : 'widget.genmessagewin',
var fp = {
xtype : 'panel',
itemId : 'MSGPANEL',
width : Width,
height : 150,
cls : 'msg effect1',
layout : 'form',
border : false,
items : [{
xtype : 'panel',
//cls : 'winTitle',
html : msgTxt,
border : 0
}, {
xtype : 'form',
itemId : 'MSGFORM',
border : false,
title : '',
buttonAlign : 'center',
fieldDefaults : {
msgTarget : 'side',
labelWidth : 110,
size : 30
},
buttons : [{
text : LANG.BTYES,
iconCls : 'icon-tick-tb',
iconAlign : 'right',
cls : 'tip-btn',
action : 'delete',
id : 'BTYES'
}, {
text : LANG.BTNO,
iconCls : 'icon-cross-tb',
iconAlign : 'right',
cls : 'tip-btn',
action : 'notDelete',
id : 'BTNO'
} ]
Controller
init : function() {
this.control({
'button[action = delete]' : {
click : this.delete
},
'button[action = notDelete]' : {
click : this.notDelete
},
So, in the delete action, we have to determine which form has been opened in the first place, and then delete the data accordingly.
You have 3 options:
1) Make the selector more specific:
'form1 button[action=delete]': {
click: this.form1Delete
},
form1Delete: function(){
this.showMsg(function() {
// form 1 delete
});
}
2) Traverse back up the component hierarchy and find the open form
onDelete: function(btn) {
var form = btn.up('form'); // find an xtype form or subclass
if (form.someCondition) {
//foo
} else {
//bar
}
}
3) As suggested by Dmitry. You'll need to convert it over to 'MVC style'.
Ext.define('ConfirmButton', {
extend: 'Ext.button.Button',
title: '',
msg: '',
requires: ['Ext.window.MessageBox'],
initComponent: function(){
this.callParent();
this.on('click', this.handleClick, this);
},
handleClick: function(){
Ext.MessageBox.confirm(this.title, this.msg, this.checkResponse, this);
},
checkResponse: function(btn){
if (btn == 'yes') {
this.fireEvent('confirm', this);
}
}
});
Ext.onReady(function(){
var btn = new ConfirmButton({
renderTo: document.body,
text: 'Foo',
title: 'Should I',
msg: 'Are you sure'
});
btn.on('confirm', function(){
console.log('Do something');
})
});
I am doing something similar; I simply use the native Ext.Msg class
Controller code
,onDelete: function() {
var me = this;
Ext.Msg.show({
title:'Really shure?',
msg: 'Really wanna do this?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
closable: false,
fn: function(btn) {
if (btn == 'yes') {
me.deleteRecord();
}
},
scope: me
});
}
,deleteRecord: function() {
var me = this,
store = Ext.StoreMgr.lookup('datastore');
store.remove(me.selectedRecord);
store.sync();
}
I would recommend you to keep all logic concerning this within the controller. I your case it'seems that's no problem, cause you just catching the button-events. You problem may be that all controllers catch these, if you are using totally the same window.
You can solve this for example by creating the action property value dynamically when creating the window. Like action='onDeleteCar'
I think you should embed the 'confirmation' functionality inside the button, i.e. create your own ConfirmButton class that would first fire a dialog upon pressing and executing the passed handler only if the dialog exited with "yes".
Here is the example implementation:
Ext.define('My.ConfirmButton', {
extend: 'Ext.button.Button',
alias: 'widget.confirmbutton',
dlgConf: {
title: 'Are you sure?',
msg: 'Are you sure you want to delete this?',
buttons: Ext.Msg.YESNO,
closable: false
},
initComponent: function() {
this.callParent(arguments);
// remember the originally passed handler
this.origHandler = this.handler;
this.origScrope = this.scope;
// override current handler to fire confirmation box first
this.handler = this.confirmHandler;
this.scope = this;
},
confirmHandler: function(me, e) {
// show dialog and call the original handler only on 'yes'
Ext.Msg.show(Ext.applyIf({
fn: function(buttonId) {
if(buttonId == 'yes') {
me.origHandler && me.origHandler.call(me.origScope || me, me, e)
}
},
scope: me
}, this.dlgConf))
},
// Method used to dynamically reassign button handler
setHandler: function(handler, scope) {
// remember the originally passed handler
this.origHandler = this.handler;
this.origScrope = this.scope;
// override current handler to fire confirmation box first
this.handler = this.confirmHandler;
this.scope = this;
return this;
},
});
Here is the sample usage:
Ext.create('My.ConfirmButton', {
text: 'Delete me',
renderTo: Ext.getBody(),
handler: function() {
alert('Aww, you deleted something! :(')
}
});
As you see, the confirmation logic is hidden from the outside world, you use this button exactly like you would use a regular Ext.Button (by passing a handler to it). Also, you can override the configuration of the dialog that the button fires (you may want to adjust it to your needs, e.g. allow passing record name to the dialog for a friendlier UI).
Note that the code isn't thoroughly tested, some cases might be left uncovered.
UPD. You need to add an alias (former xtype) to the component class definition so you can use it in ComponentQuery in your controller code, e.g.
this.control({
'confirmbutton[action = delete]' : {
click : this.delete
},
'confirmbutton[action = notDelete]' : {
click : this.notDelete
}
})
The final solution that i used was to declare variables using the global namespace so that they can be accessed from anywhere. On opening the first form, i get the data from the form using the record variable, and assign them a global name like
App1.Var1 = record.data.id;
And, on opening the delete window, these variables can be accessed by App1.Var1 when the buttons are clicked.
I want a button in column header dropdown menu of grid in extjs4.
so that i can add or delete columns which are linked in database.
Any help will be appreciated...
Thankyou..:)
Couple of months ago I had the same problem. I've managed to solve it by extending Ext.grid.header.Container (I've overrided getMenuItems method). However, recently, I've found another solution which requires less coding: just add menu item manualy after grid widget is created.
I'll post the second solution here:
Ext.create('Ext.grid.Panel', {
// ...
listeners: {
afterrender: function() {
var menu = this.headerCt.getMenu();
menu.add([{
text: 'Custom Item',
handler: function() {
var columnDataIndex = menu.activeHeader.dataIndex;
alert('custom item for column "'+columnDataIndex+'" was pressed');
}
}]);
}
}
});
Here is demo.
UPDATE
Here is demo for ExtJs4.1.
From what I have been seeing, you should avoid the afterrender event.
Context:
The application I am building uses a store with a dynamic model. I want my grid to have a customizable model that is fetched from the server (So I can have customizable columns for my customizable grid).
Since the header wasn't available to be modified (since the store gets reloaded and destroys the existing menu that I modified - using the example above). An alternate solution that has the same effect can be executed as such:
Ext.create('Ext.grid.Panel', {
// ...
initComponent: function () {
// renders the header and header menu
this.callParent(arguments);
// now you have access to the header - set an event on the header itself
this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
this.createHeaderMenu(menu);
}, this);
},
createHeaderMenu: function (menu) {
menu.removeAll();
menu.add([
// { custom item here }
// { custom item here }
// { custom item here }
// { custom item here }
]);
}
});
For people who would like to have not just one "standard" column menu but have an individual columnwise like me, may use the following
initComponent: function ()
{
// renders the header and header menu
this.callParent(arguments);
// now you have access to the header - set an event on the header itself
this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
menu.on('beforeshow', this.showHeaderMenu);
}, this);
},
showHeaderMenu: function (menu, eOpts)
{
//define array to store added compoents in
if(this.myAddedComponents === undefined)
{
this.myAddedComponents = new Array();
}
var columnDataIndex = menu.activeHeader.dataIndex,
customMenuComponents = this.myAddedComponents.length;
//remove components if any added
if(customMenuComponents > 0)
{
for(var i = 0; i < customMenuComponents; i++)
{
menu.remove(this.myAddedComponents[i][0].getItemId());
}
this.myAddedComponents.splice(0, customMenuComponents);
}
//add components by column index
switch(columnDataIndex)
{
case 'xyz': this.myAddedComponents.push(menu.add([{
text: 'Custom Item'}]));
break;
}
}
I took #nobbler's answer an created a plugin for this:
Ext.define('Ext.grid.CustomGridColumnMenu', {
extend: 'Ext.AbstractPlugin',
init: function (component) {
var me = this;
me.customMenuItemsCache = [];
component.headerCt.on('menucreate', function (cmp, menu) {
menu.on('beforeshow', me.showHeaderMenu, me);
}, me);
},
showHeaderMenu: function (menu) {
var me = this;
me.removeCustomMenuItems(menu);
me.addCustomMenuitems(menu);
},
removeCustomMenuItems: function (menu) {
var me = this,
menuItem;
while (menuItem = me.customMenuItemsCache.pop()) {
menu.remove(menuItem.getItemId(), false);
}
},
addCustomMenuitems: function (menu) {
var me = this,
renderedItems;
var menuItems = menu.activeHeader.customMenu || [];
if (menuItems.length > 0) {
if (menu.activeHeader.renderedCustomMenuItems === undefined) {
renderedItems = menu.add(menuItems);
menu.activeHeader.renderedCustomMenuItems = renderedItems;
} else {
renderedItems = menu.activeHeader.renderedCustomMenuItems;
menu.add(renderedItems);
}
Ext.each(renderedItems, function (renderedMenuItem) {
me.customMenuItemsCache.push(renderedMenuItem);
});
}
}
});
This is the way you use it (customMenu in the column config let you define your menu):
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
plugins: ['Ext.grid.CustomGridColumnMenu'],
columns: [
{
dataIndex: 'name',
customMenu: [
{
text: 'My menu item',
menu: [
{
text: 'My submenu item'
}
]
}
]
}
]
});
The way this plugin works also solves an issue, that the other implementations ran into. Since the custom menu items are created only once for each column (caching of the already rendered version) it will not forget if it was checked before or not.