i have strange issue with removing item from fieldset. my app success adding new textfield fieldset item, buth when i do remove() my app screen got stuck without any error on my google chrome.
here my source
view js
Ext.define('qms.view.QC23', {
extend: 'Ext.form.FormPanel',
alias: 'widget.QC23View',
id: 'QC23View',
requires: ['Ext.form.FieldSet', 'Ext.Label'],
config: {
items: [
{
xtype: 'fieldset',
//defaults: { labelAlign: 'top' },
Id:'defectAdd',
layout:{
},
items: [
{
xtype: 'button',
text: 'New Defect',
id: 'DefectQC23Button',
ui: 'action'
},
{
xtype: 'button',
text: 'Remove Defect',
id: 'RemoveQC23Button',
ui: 'action'
}
]
}
]
}
and my controler
Ext.define('qms.controller.QC23con', {
extend: 'Ext.app.Controller',
config: {
refs: {
addDefectButton:'#DefectQC23Button',
rmDefectButton:'#RemoveQC23Button'
},
control: {
addDefectButton:{
tap: 'addDefect'
},
rmDefectButton:{
tap: 'removeDefect'
},
}
},
addDefect: function(button){
button.up('fieldset').add({
xtype: 'textfield',
name: 'MyField-' + button.up('fieldset').length
});
//Ext.getCmp('defectAdd').doLayout();
},
removeDefect: function(button){
button.up('fieldset').remove(button.up('fieldset').items.items[0]);
}
the function for adding item work fine, but when i remove the item my screen stuck. i am using google chrome for testing.
please give me solution for this issue.
thanks.
I noticed you are not checking for the xtype before removing an item from the fieldset. The code might be removing the button itself in which case it might cause your screen to freeze. I created a simple sencha fiddle https://fiddle.sencha.com/#fiddle/4tf that does what you are trying to accomplish.
replace the removeDefect function with this:
var lastItem = button.up('fieldset').items.items.length-1;
if(button.up('fieldset').items.items[lastItem].xtype ==='textfield')
button.up('fieldset').remove(button.up('fieldset').items.items[lastItem]);
Related
Why is the first listener not working and the other one working?
How to set the first listener to work?
Maybe the problem is related to scope, this?
How can I set this to see the function available in MainControllers?
It is modern version ExtJS 6.2
Structure folders:
//FeedViewer
//app
//view
//main
/MainController.js
/MainModel.js
/FeedForm.js
/Feeds.js
//classic
//modern
//src
//view
//main
/Main.js
MainController.js:
Ext.define('FeedViewer.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onNewFeed: function () {
alert('Hello');
}
});
Feeds.js:
Ext.define('FeedViewer.view.main.Feeds', {
extend: 'Ext.grid.Grid',
xtype: 'feedslist',
requires: [
'ContactsApp.view.feeds.MainController',
'ContactsApp.view.feeds.MainModel'
],
viewModel: 'feeds',
controller: 'feeds',
columns: [{
dataIndex: 'feed',
text: 'feed'
}],
items: [{
xtype: 'toolbar',
docked: 'left',
items: [{
xtype: 'button'
text: 'Add New Feed',
iconCls: 'fa fa-plus',
listeners: {
click: 'onNewFeed' * * //It doesn't work**
}
}]
}],
listeners: {
select: 'onNewFeed' * * //It works**
}
});
In modern toolkit Ext.Button click event is called tap. Also you can use handler config. Here's the FIDDLE
First of all to stress it: I'm using sencha modern.
Well consider the following view:
Ext.define('myApplication.view.main.OrderView', {
extend: 'Ext.Container',
xtype: 'ordercontainer',
controller: 'order',
requires: [
'Ext.MessageBox',
'Ext.layout.Fit'
],
viewModel: 'main',
defaults: {
tab: {
iconAlign: 'top'
},
flex: 1
},
layout: 'vbox',
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
click: 'onClick'
}
},
]
});
With the corresponding controller:
Ext.define('myApplication.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
onClick: function () {
debugger;
alert('onClick');
}
});
now I can see the button when the page is loaded. I expect the onClick function to be called (as per guide). However it is not. I don't see any alert, nor will (when development console is open in chrome) the debugger halt on the onClick function.
If I change the button to use a handle and use code-behind it works. Yet the view controller doesn't work. This shouldn't fail right? Or did I once again fall into the trap of using a guide for classic?
It's because in Modern the components doesn't have event click but tap
So change your code like this:
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
tap: 'onClick'
}
},
]
I'm new in Extjs. I would like to know. Which components I can use, to make a menu and toolbar like in desktop app?
I mean something like this.
I wrote this code, but the result is not similar to desktop app menu.
Ext.define('untitled.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
width: 200,
height: 150,
tbar: [{
xtype: 'button',
text: 'Select',
menu: Ext.create('Ext.menu.Menu', {
items: [{
text: 'JavaScript',
handler: function () {
alert('Selected JavaScript');
}
}, {
text: 'Java',
}, {
text: 'C/C++'
}]
})
}]
});
New -------
Thank you very much, and the last question. How can I remove this arrow?
Here is fiddle for you - desktop-like toolbar (use your iconCls for Icon buttons).
Ask if you need something updated.
I have an ActionSheet and a Panel in Sencha Touch 2. I want to show the ActionSheet overlay when the icon-map is clicked in the panel, how can I do that?
Panel.js
Ext.define('app.view.principalTabPanel', {
extend: 'Ext.tab.Panel',
config: {
ui: 'light',
items: [
{
xtype: 'mappanel',
title: 'Map',
iconCls: 'locate'
}
],
tabBar: {
docked: 'bottom',
ui: 'light'
}
}
});
asking.js
Ext.define('app.view.takePhoto', {
extend: 'Ext.ActionSheet',
config: {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
}
});
You can do this by adding a listener to your tab inside the tab object of your item.
{
xtype: 'mappanel',
title: 'Map',
iconCls: 'locate'
tab: {
listeners: {
tap: function() {
var sheet = Ext.create('app.view.takePhoto');
sheet.show();
}
}
}
}
Inside that listener, we create a new instance of your app.view.takePhoto class and show it.
I ran into the same problem after changing show() to showBy().
Specifying the html id instead of the component did the trick
.showBy(Ext.get('ext-tab-5'));
instead of
.showBy('settingsTab')
seems like the method can only be called on DOM elements.
Hope this helps somehow.
I am working with the Sencha touch framework and there list item component. I have only been working with this for about 2 weeks now and I can not figure out how to get the "onItemDisclosure" to open up the "detailPanel". I am trying to follow this example: http://vimeo.com/19245335. I have pasted my code below. Any help is very much appreciated.
GoW3Guide.views.detailPanel = Ext.extend(Ext.Panel, {
id: 'detailpanel',
tpl: 'Hello, {firstName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
GoW3Guide.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});
Ext.reg('detailPanel', GoW3Guide.views.detailPanel);
GoW3Guide.views.listPanel = Ext.extend(Ext.List, {
id: 'disclosurelist',
store: GoW3Guide.ListStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
GoW3Guide.views.detailPanel.update(record.data);
GoW3Guide.views.Guidescard.setActiveItem('detailpanel');
}
});
Ext.reg('listPanel', GoW3Guide.views.listPanel);
GoW3Guide.views.Guidescard = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
items: [GoW3Guide.views.listPanel, GoW3Guide.views.detailPanel]
});
GoW3Guide.views.Guidescard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('guidescard', GoW3Guide.views.Guidescard);
Are you getting any javascript errors?
According to the docs setActiveItem either needs a component instance, a number (card index), or a config object, e.g. {xtype:'detailPanel'}
If you want to make a new detail panel active try
GoW3Guide.views.Guidescard.setActiveItem({xtype:'detailpanel'});
or
GoW3Guide.views.Guidescard.setActiveItem(new GoW3Guide.views.detailPanel());