enyo.kind({
name: "TestDialog",
kind: enyo.VFlexBox,
components: [
{kind: "ApplicationEvents", onLoad: "openDialog"},
{kind: "ModalDialog", name: "errorDialog", caption: "Error!", components: [
{kind: "HFlexBox", layoutKind: "HFlexLayout", pack: "center", components: [
{content: "Oh no!", name: "errorMessage", style: "margin: 20px 0px;", className: "enyo-text-error warning-icon"}
]},
{kind: "Button", caption: "OK", onclick: "closeErrorDialog"}
]}
],
openDialog: function() {
this.$.errorMessage.setContent("This is a sample error message");
this.$.errorDialog.openAtCenter();
}});
I can't figure out how to set the content of this.$.errorMessage.
If I comment out the line that attempts to set the content of this.$.errorMessage, the dialog displays correctly with the original content.
What am I doing wrong?
Note: alert(this.$.errorDialog) displays enyo.ModalDialog as expected, but
alert(this.$.errorMessage) displays undefined. This is true for all the other components of this.$.errorMessage as well.
Actually, I edited my answer:
That control won't exist while the dialog is closed unless you specify lazy: false for the ModalDialog. Or you can do the .setContent() after the .openAtCenter()
Related
I am a new to Sencha Touch, though I have little knowledge about MVC, I am getting an error while I try to build an application following the video tutorial of Sencha Touch 2 as:
Uncaught TypeError: Cannot call method 'substring' of undefined
sencha-touch-all.js:35
The code is as follows:
app.js:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SBR',
controllers: [
'Main'
],
launch: function(){
Ext.create('Ext.TabPanel',{
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
xtype: 'homepanel'
},
{
xtype: 'carousel',
title: 'Blog',
iconCls: 'star',
html: 'Student Blog',
items: [
{
xtype: 'image',
src: 'resources/images/icon1.png'
},
{
xtype: 'image',
src: 'resources/images/icon2.png'
}]
},
{
title: 'Enter your Comments',
iconCls: 'star',
html: 'Enter your Comments'
}
]
});
}
});
Home.js - the View
Ext.define('SBR.view.Home', {
extend: 'Ext.Panel',
xtype: 'homepanel',
config:{
title: 'Home',
iconCls: 'home',
html: 'Html through View'
}
});
Main.js - The Controller
Ext.define('SBR.controller.Main',{
extend: 'Ext.app.Controller',
views: ['Home'],
init: function(){
console.log('It is tested - Ok');
}
});
If the code of the view (Home.js) is set in the app.js without using a xtype, it works fine, but when I define a view and try to access the view by xtype from app.js it does not work and throws the above exception, although it logs the message passed in the controller successfully in the console.
Browser Used : Chrome
IDE : Aptana
Sencha Touch Version: 2.0
You need to add all the View, Store and Model classes in app.js just the same way you added the controller:
controllers: [
'Main'
],
views : [
'Home'
]
This should make it work.
I have inherited an MVC3 C# .Net Web App which uses CkEditor. The ability to insert bold text and italicized text has been removed from the CkEditor boxes by another developer (who is no longer here). How can I re-add the Bold & Italics functionality back into CkEditor?
I found the answer. Attributes of the .toolbar config property had been removed. I.e.
toolbar: [
{ name: 'insert', items: ['Image'] },
{ name: 'tools', items: ['Maximize'] },
],
I modified to:
toolbar: [
{ name: 'insert', items: ['Image'] },
{ name: 'tools', items: ['Maximize'] },
['Bold', 'Italic', 'Underline'], ['NumberedList', 'BulletedList']
],
Here's the Url that helped me: CkEditor Config Stuff
I have a scrolling problem that's driving me crazy. It only happens with card layout, and I tried every possible combination of "scroll" values, withou success.
Here is my situation:
I have an app with a tab panel attached to Viewport
Inside each tab, I need a card layout panel, so I can navigate on each tab independently (each tab is a different section)
The problem is: the scrolling works with simple elements like html div's, but if I try to grab a Ext.DataView OR a Ext.List component and scroll, it does not work properly
Funny thing: if I grab a DataView (or List), move the mouse a little bit and try to scroll, it works
The project is online for you to check: http://gaeti.com/scrollTest/
The code for the troubled card is here:
homeCardStart.js
Ext.regModel('testModel', {
fields: [{
name: 'name',
type: 'string'
}, {
name: 'birthday',
type: 'string'
}, {
name: 'description',
type: 'string'
}]
});
var testStore = new Ext.data.Store({
model: 'testModel',
method: 'GET',
proxy: {
url: 'res/recSample.json',
type: 'ajax',
reader: {
type: 'json',
root: 'items',
record: 'people',
}
}
});
var testData = new Ext.DataView({
tpl: '<tpl for="."><div class="person">{name}<br>{birthday}<br>{description}</div></tpl></div>',
store: testStore,
itemSelector: 'div.person',
scroll: false,
width: 350,
autoHeight: true,
margin: 20,
style: 'border:2px solid magenta'
});
testData.on('render', function () {
testData.store.load();
}, this);
App.views.HomeCardStart = Ext.extend(Ext.Panel, {
title: 'Home Start',
iconCls: 'home',
layout: 'vbox',
scroll: 'vertical',
style: 'background-color: silver',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Home Start'
}],
items: [{
html: 'Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>',
style: 'border:2px solid green',
width: 350,
autoHeight: true
},
testData]
});
Ext.reg('homeCardStart', App.views.HomeCardStart);
Viewport.js:
App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
id: 'mainTabPanel',
defaults: {
scroll: 'vertical'
},
items: [{
xtype: 'homeCard',
id: 'homeCard',
cls: 'home'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}]
});
HomeCard.js:
App.views.HomeCard = Ext.extend(Ext.Panel, {
title: 'Home',
iconCls: 'home',
layout: 'card',
width: '100%',
height: '100%',
style: 'background-color: green;',
items: [{
xtype: 'homeCardStart'
}, {
xtype: 'panel',
title: 'Another card',
style: 'background-color: pink'
}]
});
Ext.reg('homeCard', App.views.HomeCard);
What can be happening? Is it a bug? It only happens with card panel (the same bug occurs without a main tab panel outside)
Thanks!
Leo
The problem you are having is that you are nesting scrollable panels. In your tab panel you set the defaults to always add scroll to each card, and then within that card, the dataview is also scrollable.
To fix the issue, you should either turn scrolling off on your dataview, or remove scrolling on your card item. You cannot have both.
i'm trying to get the color of one button to change whenever i click on a different button. My non working code is below. I've had trouble finding the right documentation for this
components: [
{flex: 1,
kind: "Control",
layoutKind: "HFlexLayout",
components: [
{kind: "Button", caption: "X", onclick: "buttonClick", style: Xcolor},
{name: "lIqI", kind: "Button", caption: "I", disabled: true, style: OFF},
{kind: "Button", caption: "II", disabled: true, style: OFF},
{kind: "Button", caption: "III", disabled: true, style: OFF},
{kind: "Button", caption: "IV", disabled: true, style: OFF},
{kind: "Button", caption: "V", disabled: true, style: OFF}
],
buttonClick: function(inSender, inEvent) {
lIqI.setStyle(ON);
}
// ON & OFF are colors
If you want to refer to your button you need to use the following syntax:
this.$.lIqI.setStyle(ON);
I am trying to build a CRM web application using extjs4 MVC.
After design a simple web page, I try to use controller to control the menu on the left panel.
But the controller is so difficult to understand for me.
Because of some reasons on ui design, there is a panel in the outer of the menu tree panel.
Here is my code.
app/view/MenuBar.js
Ext.define('Crm.view.MenuBar',{
extend: "Ext.panel.Panel",
alias: 'widget.crm_menubar',
requires: ['Crm.store.Menus'],
initComponent: function(){
var store = Ext.create('Crm.store.Menus');
Ext.apply(this,{
xtype:'panel',
title: "menu"
width: 212,
frame:true,
hideCollapseTool:true,
split: true,
collapsible:true,
collapseMode: 'mini',
items: [
Ext.create('Ext.tree.Panel',{
id: 'menutree',
border: false,
height: '100%',
rootVisible: false,
store: store
})
]
});
this.callParent();
}
});
app/store/Menus.js
Ext.define('Crm.store.Menus',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [
{ text: "subrootitem1",
expanded: true,
children:[
{ id: 'a', text: "item1", leaf: true},
{ id: 'b', text: "item2", leaf: true },
]
},
{ text: "subrootitem2",
expanded: true, children: [
{ id: 'c', text: "item1", leaf: true },
{ id: 'd', text: "item2", leaf: true}
]
}
]
}
});
app/controller/Menu.js
Ext.define('Crm.controller.Menu',{
extend: 'Ext.app.Controller',
refs: [{ref: 'menubar', selector: 'crm_menubar'}],
init: function(){
alert('test'); // this line can already execute when page is loading
this.control({
'crm_menubar': {
itemmousedown: this.onItemClicked
}
});
},
onItemClicked: function(){
alert('clicked');
}
});
I want interact with the menu. But the code up this line do not work.
At last the 'refs' is obscure. Can you give me some solution
Try registering your controller to the treepanel:
this.control({
'crm_menubar treepanel[id="menutree"]': {
itemclick: this.onItemClicked,
scope : this
}
});