Develop Reference

sencha add list to panel,then add panel to my tabpanel.in controller

when i write code direct in my view .the list success display in my tabpanel's tab.look the view underneath
{
xtype: 'tabpanel',
itemId: 'tabfirst',
flex: 1,
//activeItem: 1,
tabBar: {
layout: {
pack: 'center'
}
},
items: [
{
title: 'tab1',
xtype: 'list',
itemTpl: '{title}',
data: [
{title : 'title1'},
{title : 'title2'},
{title : 'title3'}
]
},
{
title: 'tab2',
html: 'here second html2'
}
]
}
but it not success in my controller. there is nothing in my tab.
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
launch: function(){
var moneytab = Ext.ComponentQuery.query('.makemoney #tabfirst')[0];//--get my tabpanel
var titlestor = Ext.create('ylp2p.store.loanlist');//---get my store
titlestor.load({
callback: function(records, operation, success){
Ext.each(records, function(record){
var loanname = record.get('loanname');
var myPanel = Ext.create('Ext.Panel',{
//the code is same in my view but not work
title: loanname,
xtype: 'list',
itemTpl: '{title}',
data: [
{title : 'title1'},
{title : 'title2'},
{title : 'title3'}
]
});
moneytab.add([myPanel]);
//add above panel
});
}
});
}
});
when i add only "title" and "html" in panel,it work. then i change it to list.it success in direct write in view. but it not work write it direct in controller.

Use this code to add List. It will work.
var myPanel = Ext.create('Ext.List', {
//the code is same in my view but not work
title: loanname,
itemTpl: '{title}',
data: [
{ title: 'title1' },
{ title: 'title2' },
{ title: 'title3' }
]
});
moneytab.add([myPanel]);

As I don't have enough reputation to comment, I am posting this as answer:
Did you try giving your view fullscreen: true config and also did you include your Controller in the Ext.app.Application list of controllers?

ExtJs customization

In a customized ExtJs file, I found the following code. Actually what is doing in the following code.
This code is written in an xtype.js file and which is included in the jsp page.
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'js/ext-ux');
Ext.require([
'Ext.form.field.ComboBox'
]);
Ext.define('Ext.ux.UDComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.udComboBox',
directArgs : false,
skipValue : false,
firstOptionDefault : false,
forceSelection : true,
typeAhead : true,
queryMode : 'local',
triggerAction : 'all',
selectOnFocus : true,
allowBlank : false,
emptyText : '-Select One-',
valueField : '',
lastQuery : '', // This is used with store.filter function.
returnAsObject : true,
fieldStyle: 'background-image: none;',
msgTarget:'side',
hideTrigger:false,// if true hide the drop down icon
skipFirstOption : false
});
And in our file, for creating combobox, we use xtype: 'udComboBox'.

Ext.Loader.setPath('<TopLevel.path.NameSpace>', 'js/ext-ux'); }
// Namespace by convention should be in lower case
Ext.define('<TopLevel.path.NameSpace>.<ComponentName>', {
extend: 'Ext.form.field.ComboBox',
// alias by convention should be in lower case
alias: 'widget.<componentname>'
});
}
Top-level namespaces and constructors names should be UpperCamelCase
Alias xtype should be in lower case
So a example of your configuration can be: your company
// --Filename: app/js/components/UdComboBox.js <-Filename as Name
Ext.define('MyCompany.libs.UdComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.udcombobox',
....
});
// --Filename: app/app.js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('MyCompany.libs', 'js/components');
Ext.require([
//This is only because we are instantiate by xtype, if you use Ext.create this is not need it.
'MyCompany.libs.UdComboBox'
]);
Ext.onReady(function() {
Ext.create("Ext.container.Viewport", {
layout: 'fit',
items : [{
xtype : "udcombobox"
}]
});
});
// --Filename: app/app2.js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('MyCompany.libs', 'js/components');
Ext.onReady(function() {
Ext.create("Ext.container.Viewport", {
layout: 'fit',
items : [{
xtype : "panel"
},
new Ext.Create('MyCompany.libs.UdComboBox',{
..config..
})
]
});
});

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 :-)

I can't add the Source button to CKEditor 4's toolbar

I'm having trouble adding the Source button to CKEditor 4's toolbar. I just downloaded the new CKEditor today.
I'm using a config object named oConfig:
oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
['Bold', 'Source', 'Italic']
];
The toolbar shows up with only the Bold and Italic buttons. This example from CKEditor's docs tells me it should be working.

There are two reasons why it may be happening:
You have downloaded the basic package, where the sourcearea plugin is not included.
You are using CKEditor in inline mode. Source mode isn't available in inline mode yet.

Future googlers, for CKEditor v4.2 now there is a plugin to view source code in inline editing mode.
http://ckeditor.com/addon/sourcedialog

Here is a plugin I've made:
First of all, inside ckeditor/plugins/ create a new folder called "htmlSource", inside it create a file called "plugin.js" and inside this file paste the code below:
//-----------------------------Start Plugin Code-------------------------
plugInName = 'htmlSource';
CKEDITOR.plugins.add(plugInName,
{
init: function (editor) {
editor.addCommand('htmlDialog', new CKEDITOR.dialogCommand('htmlDialog'));
editor.ui.addButton(plugInName, {
label: 'Html Source',
icon: 'http://www.example.com/images/btn_html.png',
command: 'htmlDialog'
});
CKEDITOR.dialog.add('htmlDialog', function (editor) {
return {
title: 'Fuente Html',
minWidth: 600,
minHeight: 400,
contents: [
{
id: 'general',
label: 'Settings',
elements:
[
// UI elements of the Settings tab.
{
type: 'textarea',
id: 'contents',
rows: 25,
onShow: function () {
this.setValue(editor.container.$.innerHTML);
},
commit: function (data) { //--I get only the body part in case I paste a complete html
data.contents = this.getValue().replace(/^[\S\s]*<body[^>]*?>/i, "").replace(/<\/body[\S\s]*$/i, "");
}
}
]
}
],
onOk: function () {
var data = {};
this.commitContent(data);
$(editor.container.$).html(data.contents);
},
onCancel: function () {
// console.log('Cancel');
}
};
});
}
});
//--------------------Plugin Code Ends Here--------------------
Please notice that there is a parameter called icon where you must set the url of the Plugin Button Image, I just put an example url ('http://www.example.com/images/btn_html.png') you must use a valid one to see the plugin button.
To set this plugin in the ckeditor toolbar, you must configure it inside the config.js file, for example:
CKEDITOR.editorConfig = function (config) {
config.plugins =
'htmlSource,' + //Here is the plugin
'about,' +
'a11yhelp,' +
'basicstyles,' +
'bidi,' +
.....;
config.toolbar = 'Full'; //Add the plugin to the full toolbar
config.toolbar_Full = //Note that our plugin will be the first button in the toolbar
[
['htmlSource', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
};
I know this is working, so if you have some trouble please tell me.

For me, it helped to use:
config.extraPlugins = 'htmlSource';

For CKEditor 4.1.1, a combination of the above two answers worked for me, although I had to make some minor tweaks. The portion that says "--- Start Plugin here ---" I was able to copy as-is. For the configuration options, I had to use
CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins".
CKEDITOR.config.toolbar = 'Full';
CKEDITOR.config.toolbar_Full = ...;
instead of
CKEDITOR.editorConfig = function (config) { ...
Finally, this was all done in inline mode with a plain vanilla installation, i.e. I did not have to download any extra plugins to make this work.

I'm using Julio's plugin with version 4, and needed to make an adjustment to avoid this JS error:
TypeError: $(...).html is not a function
I swapped this line:
$(editor.container.$).html(data.contents);
with this:
// See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData(
data.contents,
function() {
this.checkDirty();
}
);
My guess is Julio's solution requires jQuery, and my approach is the CKEditor approach (or at least closer to it!).

How to have the slide multiple screens in Sench touch

I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window and not really going to a new screen. I have hardcoded the store to make sure there is data when I start the application and it still prints it outside of the viewable area.
Here is my Ext.data.Store:
var store = new Ext.data.Store({
model: 'jobSummary',
storeId: 'jobStore',
data : [{title: 'This is test'},
{title: 'This is test2'},
{title: 'This is test3'}]
});
Here is the list that I am using it in:
SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
dockedItems : [ {
xtype : 'toolbar',
title : 'WTJ',
dock : 'top',
items : [ {
xtype : 'button',
text : 'Back',
ui : 'back',
handler : function() {
//back button controller
},
scope : this
} ]
} ],
items : [ {
xtype : 'list',
emptyText : 'No data available.',
store : 'jobStore',
itemTpl : '<div class="list-item-title">{title}</div>'
+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure : function(record) {
},
grouped : false,
scroll : 'vertical',
fullscreen : true
} ],
initComponent : function() {
SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
}
});
And i am calling this list panel from my submit button handler which is:
var jobsList = new SearchJobsForm.jobsList();
The full code I have pasted on this link for better visibility:
http://pastebin.com/a05AcVWZ

Ok,
SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results.
In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.
First let's instantiate the jobsList
// It has the id ( id: 'jobsListId')
var jobsList = new SearchJobsForm.jobsList();
then you should put all your inputs into a form (xtype : formpanel,
id: 'searchFormId')
And add the resultPanel just after the form
Here is the code
SearchJobsForm.form = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
id: 'searchForm',
floating: true,
width: 250,
height: 370,
scroll: 'vertical',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [
{
xtype: 'formpanel', // 1. this is the added formpanel
itemId: 'searchForm',
id: 'searchFormId', // this id is important
items: [
{
xtype: 'textfield',
...
}, {
xtype: 'textfield',
...
},
// all your inputs
]
},
// 2. add here the results panel : jobsList
jobsList
], // the code continues inchanged
dockedItems: [{
...
- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form
// here it comes
Ext.util.JSONP.request({
url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
format: 'json',
callbackKey: 'callback',
params : searchCriteria,
callback: function(data) {
console.log('callback');
// Call your list-filling fonctions here
// jobsList.fill(data);
Ext.getCmp('searchFormId').hide();
Ext.getCmp('jobsListId').show();
},
failure: function ( result) {
console.error('Failed');
}
});
For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.