Develop Reference

Sencha Touch 2 Add and Remove textfield inside fieldset

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]);

How to add links to modal window in ExtJs

I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:
var win;
var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile();
var data = {
f1: 'a',
f2: null
};
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'component',
autoEl: {
html: '<input type="text">'
},
listeners: {
render: function(_component) {
_component.getEl().on('keyup', function(e) {
//console.log(this);
console.log(this.dom.childNodes[0].value);
});
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data,
renderTo: Ext.get('hello-win')
}
]
});
}
win.show(this);
There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).
How can I display a list of links in this modal window?

You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox, vbox, etc.
Your code should look like this:
var win = new Ext.Window({
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'textfield',
enableKeyEvents: true,
listeners: {
keyup: function(c) {
console.log(c.getValue());
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data
}
]
});
Also you should consider using textfield component instead of creating textfield by using component with autoEl config.

Hiding a button on pushed view and showing it when back to list view

When I load my list view it has several blog posts and a refresh button on the top left.
If I tap on a list item a view is pushed with the contents of that specific post. When this view is pushed in, the refresh button is hidden.
But when I tap 'Back' to the parent list view, I'd like the refresh button to show (un-hide) - but it remains hidden.
Any idea how to make this work?
This is my View:
Ext.require(['Ext.data.Store', 'MyApp.model.StreamModel'], function() {
Ext.define('MyApp.view.HomeView', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
requires: [
'Ext.dataview.List',
],
config: {
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
navigationBar: {
items: [
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
align: 'left',
action: 'refreshButton',
id: 'refreshButtonId'
}
]
},
items: {
title: 'My',
xtype: 'list',
itemTpl: [
'<div class="post">',
...
'</div>'
].join(''),
store: new Ext.data.Store({
model: 'MyApp.model.StreamModel',
autoLoad: true,
storeId: 'stream'
}),
}
}
});
});
and my Controller:
Ext.define('MyApp.controller.SingleController', {
extend: 'Ext.app.Controller',
config: {
refs: {
stream: 'homepanel'
},
control: {
'homepanel list': {
itemtap: 'showPost'
}
}
},
showPost: function(list, index, element, record) {
this.getStream().push({
xtype: 'panel',
html: [
'<div class="post">',
'</div>'
].join(''),
scrollable: 'vertical',
styleHtmlContent: true,
});
Ext.getCmp('refreshButtonId').hide();
}
});

I'm not sure whether this is the best approach or not but if I were you I will use the back event of navigation view which fired when you tap the back button
So beside showPost function, you should add another control for back event like this:
'homepanel list': {
itemtap: 'showPost'
},
stream: {
back: 'backButtonHandler'
}
Then you can run the backButtonHandler function to show your refresh button again:
backButtonHandler: function(button){
Ext.getCmp('refreshButtonId').show();
}
Hope it helps :)

How to show a overlay when Panel is clicked in Sencha Touch 2

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.

SenchTouch onItemDisclosure load detailed view problem

I'm trying to get my test project working and have it set out with various viewports js files for each screen. I have now managed to load the data onto the screen with the code below however I am struggling with trying to set-up the onItemDisclosure function so that it switches to a detailed view which shows more information about the selection item.
MobileApp.views.Settings_screen = Ext.extend(Ext.Panel, {
title: "Settings ",
iconCls: "settings",
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: "toolbar",
title: "Settings"
}],
initComponent: function() {
detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),
this.list = new Ext.List({
id: 'indexlist',
store: MobileApp.listStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: false,
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
});
this.items = [this.list];
MobileApp.views.Settings_screen.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('settings_screen', MobileApp.views.Settings_screen);
I have tried to put some code here to switch to the detailPanel but it comes up with an undefined error.
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
Thanks Aaron

You need to define this panel under Settings_screen's namespace, like this:
this.detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),
Also, you need to add the detailPanel to the Settings_screen's items, so that it will become an item of it.
this.items = [this.list, this.detailPanel];