Develop Reference

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.

Sencha Touch 2 - Panel stops working after build

I have some trouble using an Ext.Panel in Sencha Touch 2.2. It works at first, but after building it can't be closed though hideOnMaskTap is true.
Here's my code:
MinPanel.js
Ext.define('MinimalPanelExample.view.MinPanel', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List'
],
config: {
id: 'minPanel',
width: '320px',
height: '480px',
modal: true,
hideOnMaskTap: true,
html: 'minimal panel',
items: [
{
xtype: 'list',
width: '100%',
height: '100%'
}
]
}
});
Adding it in Main.js:
var minPanel = Ext.create('MinimalPanelExample.view.MinPanel');
[...]
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2',
items: [
{
xtype: 'button',
text: 'Button',
listeners: {
tap: function(button) {
minPanel.showBy(button);
}
}
}
],
},
What's curious is that the list inside the panel isn't even shown if I run the built package, it just shows the html: 'minimal panel'. There's no warnings in the Javascript console, though.
Any ideas about why that happens?
Also, feel free to tell me if my way of creating / accessing the panel in the first place is wrong.

Figured it out. You can't just Ext.create on top of the Main view file, it has to be somewhere in the Ext.define block. It works if I create the MinPanel in an initialize listener, and then get it via Ext.getCmp('minPanel') when the user presses the button.

sencha touch ListPaging plugin "load more" button position issue

I'm facing an issue regarding the position of the Load More... button in sencha touch2. Here, the Load More button is added using ListPaging plugin and from the Ext.plugins.Listpaging docs it states:
Adds a Load More button at the bottom of the list. When the user
presses this button, the next page of data will be loaded into the
store and appended to the List.
But, here, the list item with load more button appears at the top of the list, not to the bottom.
See my code here:
Ext.define('MyApp.view.MyLIst', {
extend : 'Ext.dataview.List',
xtype : 'mylist',
id : 'myList' ,
requires : [Ext.data.Store','Ext.plugin.ListPaging'],
config : {
width : '100%',
height : '100%',
loadingText : 'Loading data...',
emptyText : 'No Members',
itemTpl : '<div class="mylisttitle">{title}</div>',
store : 'mylistStore',
plugins : [
{
xclass : 'Ext.plugin.ListPaging',
autoPaging : false,
loadNextPage: function() {
console.log('Load more button clicked');
// fire event here
}
}],
masked : false,
mode : 'SINGLE',
scrollable : {
direction : 'vertical',
directionLock : true
}
}
});
and see the result below:
Any idea how could I show the same button at the bottom of the list?
Thanks
EDIT: I had posted the issue in senchatouch forum to, still awaiting a solution, you can see it here

Kind of strange. Can you try removing these properties (width, height and scrollable) and adding "layout:fit" to the parent of this list.

If you have any custom css try disabling it. Or if you are able to reproduce the same issue in a fiddle it would be more easier to fix. Here is a work demo jsfiddle.net/blessenm/9ypwk
Ext.application({
launch: function () {
Ext.define('TweetStore', {
extend: 'Ext.data.Store',
config: {
fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
pageSize: 25,
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://search.twitter.com/search.json',
pageParam: 'page',
limitParam: 'rpp',
extraParams: {
q: 'sencha'
},
reader: {
type: 'json',
rootProperty: 'results'
}
}
}
});
Ext.define('MyApp.list.List', {
extend: 'Ext.List',
config: {
useSimpleItems: false,
variableHeights: true,
infinite: true,
disableSelection: true,
allowDeselect: false,
store: Ext.create('TweetStore'),
loadingText: 'Loading data...',
emptyText: 'No Members',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{text}</div>'),
masked: false,
mode: 'SINGLE',
scrollable: {
direction: 'vertical',
directionLock: true
}
}
});
Ext.define('MyApp.list.Container', {
extend: 'Ext.Container',
config: {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'titlebar',
title: 'Load More Plugin',
}, {
xclass: 'MyApp.list.List',
flex: 1
}]
}
});
Ext.create('MyApp.list.Container');
}
});

Solved it:
I was missing this : infinite: true
Load more button now appears at the bottom .
Thanks #blessenm for the working Demo :-)

Having issue to load multiple tabs and/or their views in mobile web app

I am making a mobile app using sencha touch. What this app does it when user is logged in then he/she sees home view. On this home view there are two buttons. These two buttons takes user to their respective views i.e. Appointments and Messages. These two views have three tabs button at the bottom i.e. Home, Appointments, Messages. Home button takes user back to the home view which consists of two buttons. Whereas Appointments and Messages buttons takes him to their own views.
Here is my home view
As you can see there are no tabs in this view. Following is the code for this view
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
title: 'Home',
docked: 'top'
},
{
xtype: 'button',
cls: 'messagesBtn',
itemId: 'msg'
},
{
xtype: 'button',
cls: 'appointmentsBtn',
itemId: 'appoint'
}
],
listeners: [
{
delegate: '#appoint',
event: 'tap',
fn: 'launchAppointmentView'
}
]
},
launchAppointmentView: function () {
this.fireEvent('launchAppointments');
}
Once user clicks on lets say Button 2 which take him to Appointments View. Then following is view is shown to him
and the code for this view below
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Appointments',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Appointments'
},
html: ["Appointments View"].join("")
}
]
}
Once this view is loaded then all I can see is only one tab for Appointments. I want to see three tabs for this all three views. How can I make other tabs visible?
Following is my messages view
Here is the code for it
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Messages',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Messages'
},
html: ["Messages View"].join("")
}
]
}
I cannot see this view and cannot get to this view at all because I do not have messages button on the tab. Again how can I add all the tabs button for these views and when I click each of them so it will take me to its view?

Here is an example of a tab panel:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
The issue is, you haven't added addition items to you items list - they have to tabs, Home and Contact. You want 3 tabs per screen, so you would have 3 items per file.
For events, I like to create a controller, have refs for each item you need to listen for events on, and set up controls for each. Let me know if you'd like help working through how to do that. I'll include a simple example below to get you started:
Ext.define('Analytics.controller.events.InstType', {
extend: 'Ext.app.Controller',
config: {
refs: {
instType: {
selector: '#instType'
}
}
},
init: function() {
// Start listening for toggle events on the 3 segmented button panels
this.control({
'instType': { 'toggle': function(container, button, pressed) {
this.onGraphType(container, button, pressed);
}
}
});
},
// note: these functions are called on both the buttons selected and the one that became unselected
// the 'pressed' param inidicates whether this is the selected button or not.
onGraphType: function (container, button, pressed) {
if (pressed) { ..do stuff.. }
});

Ext.form.Panel on top of a Toolbar has some white space around it

I have the following situation. I have an Ext.form.field.File (With the buttonOnly: true on top of a Ext.form.Panel which is on top of a Toolbar docked on an Ext.grid.Panel. The result of that is, the button has a completely different style then the toolbar, and the Panel seems to have some white space around button that you can see. Anyone have any suggestions as to how I can fix this, so that the style of the button and panel matches the toolbar (I use default styles, didn't modify anything).
EDIT: here is some code:
upload_button = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: "Upload File",
hideLabel: true,
listeners: {..}
});
button_panel = Ext.create('Ext.form.Panel', {
region: 'south',
items: upload_button
});
upload_toolbar = Ext.create('Ext.toolbar.Toolbar',{
width: 400,
region: 'north',
dock: 'top',
items: [ button_panel]});
grid_file = Ext.create('Ext.grid.Panel', {
title: 'File List',
region: 'center',
height: 300,
store: store_file,
dockedItems: [upload_toolbar],

You are using regions, but I cannot see any border layout.
Your problem is that you are trying to put a panel within a toolbar - it won't work.
You better off just putting an hidden upload form somewhere in your page; putting a normal button in the toolbar, and have the toolbar button press triggering a press on the hidden form.
So this would be the hidden upload form definition:
Ext.define('App.view.Assignments' ,
{
extend: 'Ext.panel.Panel',
alias: 'widget.assignments-panel',
hidden: true,
items: [{
xtype: 'filefield',
id: 'uploadField',
emptyText: 'Select a file',
fieldLabel: 'Assignment',
name: 'assignment-path',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},{
xtype: 'hidden',
id: 'submissionIdField',
name: 'submissionId',
value: ''
}],
});
And then when the visible update button is pressed you can do:
var uploadField = Ext.getCmp( 'uploadField' );
uploadField.fileInputEl.dom.click();