. when i run and click on Icon button then it is not able to call function func_1(); nothing is appear. on the screen
Ext.onReady(function () {
function func_1() {
//some functionality
}
new_win = new Ext.Panel({
renderTo: Ext.getBody(),
activeItem: 0,
tbar: {
items: [{
text: 'List',
ref: '../prevButton',
disabled: true,
handler: function () {
new_win.getLayout().setActiveItem(0);
new_win.prevButton.disable();
new_win.nextButton.enable();
}
}, '-', {
text: 'Icon',
ref: '../nextButton',
handler: function () {
new_win.getLayout().setActiveItem(1);
new_win.prevButton.enable();
new_win.nextButton.disable();
}
}]
},
items: [{
html: 'hello'
}, {
handler: function () {
func_1();
}
}]
});
});
can you please tell me how to call func_1(); or handler in panel items ?
There is no need to call the function from within anonymous function you can refer to it directly from the handler.
for example:
tbar: {
items: {
xtype: 'toolbar',
style: 'border:0;',
items: [{
xtype: 'buttongroup',
items: [{
id: 'btnAddItem',
text: 'Add Item',
icon: 'images/icons/add-icon.png',
handler: add_item
}]
}]
}
},
...
function add_item(){
}
You should create a global variable and then you can see the scope within the handler like this:
Ext.onReady(function () {
var me = this;
function func_1() {
//some functionality
}
new_win = new Ext.Panel({
renderTo: Ext.getBody(),
activeItem: 0,
tbar: {
items: [{
text: 'List',
ref: '../prevButton',
disabled: true,
handler: function () {
new_win.getLayout().setActiveItem(0);
new_win.prevButton.disable();
new_win.nextButton.enable();
}
}, '-', {
text: 'Icon',
ref: '../nextButton',
handler: function () {
me.func_1();
new_win.getLayout().setActiveItem(1);
new_win.prevButton.enable();
new_win.nextButton.disable();
}
}]
},
items: [{
html: 'hello'
}, {
handler: function () {
func_1();
}
}]
});
Related
I have a view (Main.js), form (RenterData.js) and I want to code controller which will open RenterData form by button from view Main.
Now my controller looks like that:
Ext.define('MyApp.controller.ButtonController', {
extend: 'Ext.app.ViewController',
views: ['MyApp.view.main.Main'],
refs: [{
ref: 'control-panel',
selector: 'control-panel'
}],
init: function(application) {
this.control({
"RenterId": function () {
click: this.onButtonClickRenterId
}
})
},
onButtonClickRenterId: function() {
/* place for form calling by button function */
}
});
I am a beginner in sencha ext js, and I don't understand which method I have to use for calling form by button. Note, that the button is into a carousel, which is into a menu on the view.
I use Ext JS 6.2.0
Grazie!
You can do this by showing the form content in a window or you can render it to a region panel in your view port here is an Example Fiddle
app.js
Ext.application({
name: 'Test',
requires: ['Test.view.Main', 'Test.view.MyForm'],
mainView: 'Test.view.Main',
launch: function () {}
});
app/view/Main.js
Ext.define('Test.view.Main', {
extend: 'Ext.container.Viewport',
title: 'main',
xtype: 'main',
// renderTo:Ext.getBody(),
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
height: 100,
items: [{
xtype: 'button',
text: 'Open Form in pop up window',
handler: function () {
Ext.create('Ext.window.Window', {
title: 'Popup',
width: 400,
height: 100,
autoShow: true,
items: {
xtype: 'myForm'
}
})
}
}, {}, {
xtype: 'button',
text: 'Open Form View Port Center Region',
handler: function () {
let myForm = Ext.create('Test.view.MyForm')
this.up('viewport').items.getAt(1).add(myForm);
}
}]
}, {
region: 'center',
id: 'mycenter',
title: 'Center Region',
items: [{
html: ''
}]
}]
})
app/view/MyForm
Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
xtype: 'textfield',
name: 'mtfield',
fieldLabel: 'TextField'
}]
})
Inside the function handler function of the button, create object of the class related to it and call "show" method to add it viewport.
onButtonClickRenterId: function() {
/* place for form calling by button function */
var form = Ext.create('<class name defined in RenterData.js>');
form.show();
}
I want to collapse or expand a node based on a condition in tree.panel in extjs 4.2.1
tree.on("beforeitemexpand",function(node) {
if (booleanFlag === true) {
//allow to expand
} else {
//donot allow to expand
}
});
I have tried the beforeitemExpand then return false if booleanFlag is false, but it is not working.
The event "beforeitemexpand" appears to have a bug in Extjs 4.2.1, its not ideal but you could use "beforeitemclick" and "beforeitemdblclick" to achieve the functionality that you want:
Ext.application({
name: 'Fiddle',
launch: function () {
var enableHomeExpand = false;
var enableBookExpand = false;
var store = Ext.create('Ext.data.TreeStore', {
root: {
children: [{
text: 'homework',
expanded: false,
children: [{
text: 'book report',
children: [{
text: 'test',
leaf: true
}, {
text: 'test 2',
leaf: true
}]
}, {
text: 'algebra',
leaf: true
}]
}, {
text: 'homework',
children: [{
text: 'book report',
children: [{
text: 'test',
leaf: true
}, {
text: 'test 2',
leaf: true
}]
}]
}]
}
});
var handleClick = function (node,rec,item){
if ((rec.data.text =="book report")&&(enableBookExpand)){
return true;
}
if ((rec.data.text =="homework")&&(enableHomeExpand)){
return true;
}
return false;
}
var treepanel = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 400,
height: 200,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
beforeitemdblclick: handleClick,
beforeitemclick: handleClick
},
buttons:[{
text:'Enable Expand "homework"',
handler: function(){ enableHomeExpand = true; }
},
{
text:'Enable Expand "book report"',
handler: function(){ enableBookExpand = true; }
}]
});
}
});
Here is the FIDDLE
I have a grid/list:
items: [
{
xtype: 'gridpanel',
reference: 'list',
resizable: false,
width: 200,
title: '',
forceFit: true,
bind: {
store: '{schedules}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'revision',
text: 'Revision'
}
],
I want to add a listener so that the record at index 0 in the store is selected by default.
I've tried playing with selModel but its not working as intended.
Do it on viewready event:
{
xtype: 'gridpanel',
listeners: {
'viewready': function(g) {
g.getSelectionModel().select(0);
}
},
// ....
}
Example: https://fiddle.sencha.com/#fiddle/qe6
Listen to the store load event (as example in the controller):
onLaunch: function () {
var me = this,
grid = me.getGrid(),
store = me.getGroupsStore();
store.load({
callback: function(records, operation, success) {
grid.getSelectionModel().select(0);
},
scope: this
});
},
My problem is very similar to this question:
ExtJS4 gridPanel data not showing
but in a bit difference in syntax & behaviour, I've spent day(s) to solve by trying in many ways but failed.
Please note that: i must keep the SharpKit.NET generation behavior by calling parent constructor instead of json field construction, like the code bellow
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
fields: ["title", "pages"] // Do not use this
});
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
constructor: function () {
this.callParent([{ fields: ["title", "pages"] }]); // Use this
}
});
This is link to my simplified version on jsfiddle http://jsfiddle.net/thanhptr/LqXan/. Bellow is my copied code, this code still does not fix:
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
constructor: function () {
this.callParent([{ fields: ["title", "pages"] }]);
}
});
Ext.define("Core.Scripts.store.Store", {
extend: "Ext.data.Store",
constructor: function () {
this.callParent([{
model: "Core.Scripts.model.Book",
data: [
{ title: "book 1", pages: 10 },
{ title: "book 2", pages: 20 }
]
}]);
}
});
Ext.define("Core.Scripts.view.GridPanel", {
extend: "Ext.grid.Panel",
constructor: function () {
this.callParent([{
store: new Core.Scripts.store.Store(),
region: "center",
columns: [
{ header: "title", dataIndex: "title" },
{ header: "pages", dataIndex: "pages" }
]
}]);
}
});
Ext.define("Core.Scripts.view.DetailViewport", {
extend: "Ext.container.Viewport",
constructor: function () {
this.callParent([{
frame: true,
layout: "border",
items: [new Core.Scripts.view.GridPanel()]
}]);
}
});
Ext.onReady(function () {
var viewPort = new Core.Scripts.view.DetailViewport();
});
I couldn't get your example working either, but I changed some code up and got it to work.
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
fields: ["title", "pages"]
});
Ext.define("Core.Scripts.store.Store", {
extend: "Ext.data.Store",
model: "Core.Scripts.model.Book",
data: [
{ title: "book 1", pages: 10 },
{ title: "book 2", pages: 20 }
]
});
Ext.define("Core.Scripts.view.GridPanel", {
extend: "Ext.grid.Panel",
region: "center",
height: '200',
store: Ext.create('Core.Scripts.store.Store'),
columns: [
{ header: "title", dataIndex: "title" },
{ header: "pages", dataIndex: "pages" }
]
});
Ext.define("Core.Scripts.view.DetailViewport", {
extend: "Ext.container.Viewport",
frame: true,
layout: "border",
initComponent: function () {
this.items = [new Core.Scripts.view.GridPanel];
this.callParent(arguments);
}
});
Ext.onReady(function () {
var viewPort = new Core.Scripts.view.DetailViewport();
});
I have a FormPanel (See below) that has several functions defined.
I need to call one function from another function, but I get error that
the function I am calling is undefined.
If I call the ShowInspections from the OnMyButtonTap function it works
If I call the ShowInspections from the LoginOk function it DOES NOT work
I am at a loss I believe it is a scope issue, but so new it Sencha I really need
some help.
Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.Login',
config: {
items: [
{
xtype: 'fieldset',
height: 226,
width: 440,
title: 'Enter Login Information',
items: [
{
xtype: 'textfield',
id: 'userid',
label: 'User ID',
labelWidth: '40%',
required: true
},
{
xtype: 'textfield',
id: 'pswd',
label: 'Password',
labelWidth: '40%',
required: true
}
]
},
{
xtype: 'button',
height: 86,
itemId: 'mybutton',
text: 'Login'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},
onMybuttonTap: function(button, e, options) {
doLogin(Ext.getCmp('userid').getValue(),Ext.getCmp('pswd').getValue(),this.LoginOk,this.LoginFail,this.LoginError);
},
LoginOk: function() {
//
// this function is called from doLogin and it works
//
//GetInspections('01/01/2011','12/31/2012','','',this.ShowInspections,this.LoadDataFail,this.LoadDataError);
// the function GetInspections does work, but does not call the "ShowInspections" function
this.ShowInspection); // directly calling this function does NOT work either
},
LoginFail: function() {
Ext.Msg.alert('Invalid User ID and/or Password.');
},
LoginError: function() {
Ext.Msg.alert('Login Error!');
},
LoadDataFail: function() {
Ext.Msg.alert('No Inspections found.');
},
LoadDataError: function() {
Ext.Msg.alert('Error Loading Inspections.');
},
ShowInspections: function() {
Ext.Msg.alert('got inspections');
}
});
There is some typo in the current code.
this.ShowInspection);
should read as
this.ShowInspections();
Isn't that your problem?
You have missed () everywhere you just need to change as this.LoginOk(), this.LoginFail() etc and this.ShowInspections()