i am a noob in ext js and stuck with a problem.
i have created an app
this is the init function of my controller.
init: function () {
console.log('initialized filesystem controller');
this.control({
'filesystemtree': {
itemdblclick: this.OpenFile,
select: this.NodeSelected
},
'filesystemtree filesystemmenu button[text="Delete"]': {
click:this.DeleteButtonClicked
}
});
}
and this is the view with xtype : 'filesystemtree'
Ext.define('IDE.view.fileSystem.List', {
extend: 'Ext.tree.Panel',
alias: 'widget.filesystemtree',
title: 'Navigation2',
store: 'FileSystems',
rootVisible: 'false',
dockedItems: [{
xtype:'filesystemmenu',
dock:'top'
}],
initComponent: function () {
console.log('file system tree initializing');
this.callParent(arguments);
}
})
and this is the view with xtype:filesystemmenu docked to filesystemtree
Ext.define('IDE.view.fileSystem.FileSystemMenu', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.filesystemmenu',
items: [
{
xtype: 'splitbutton',
text: 'Menu',
menu: new Ext.menu.Menu({
items: [
{
text: 'Delete'
},
{
text: 'Copy'
},
{
text: 'Paste'
},
{
text: 'Cut'
},
{
name: 'Rename',
xtype: 'textfield',
emptyText: 'Enter text to rename'
}
]
})
},
{
text: 'Add Item',
id:'FSAddItemButton'
},
'->',
{
xtype: 'box',
id: 'fileSystemNodeNameLabel'
}
]
})
but in the controller im unable to attach a click event to the delete button present in the filesystemmenu which itself is present as a docked item to the filesystemtree.
basically this line in the controller aint working.
'filesystemtree filesystemmenu button[text="Delete"]': {
click:this.DeleteButtonClicked
}
what am i doing wrong?
Look at your selector. You're asking it to find a button with the text "Delete", however you don't have any component matching the criteria, because children of menus are Ext.menu.Item by default, so your selector should be:
'filesystemtree filesystemmenu menuitem[text="Delete"]'
Related
I have a Tab panel with multiple Tabs in it. Now I want to add a simple button with an action to the tab bar. When clicked it should not open a Tab like the other ones, just execute a javascript function.
How is this possible in Extjs?
Yes it is possible. You can do it with tabBar configuration. You will need to add setActive method and will need to handle events to change tabs.
You can also specify different styles for each tab header, have different types of headers and can easily highlight specific tab in custom colors as shown in fiddle.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
title: 'Tab Panel with custom button',
items: [{
xtype: 'tabpanel',
id: 'tabPanel',
tabBar: {
items: [{
xtype: 'button',
text: 'Batman',
ui: 'action',
setActive: function (active) {
this.setPressed(active);
},
handler: function () {
var tabPanel = Ext.getCmp('tabPanel');
tabPanel.setActiveItem(0);
}
}, {
xtype: 'button',
text: 'Goku',
ui: 'action',
setActive: function (active) {
this.setPressed(active);
},
handler: function () {
var tabPanel = Ext.getCmp('tabPanel');
tabPanel.setActiveItem(1);
}
}, {
xtype: 'spacer',
setActive: function () {}
}, {
xtype: 'button',
text: 'Custom button',
ui: 'decline',
setActive: function () {},
handler: function () {
Ext.Msg.alert('Custom Message', 'This way you can do custom js function execution on tab bar');
}
}]
},
items: [{
items: [{
html: 'Batman is cool'
}]
}, {
items: [{
html: 'Goku can defeat superman'
}]
}]
}]
});
}
});
Example Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/29r1
I have this weird issue with ExtJS 4.2.1.
I have a controller whose listeners catch events from a view that it shouldn't.
Here's said controller:
Ext.define('Customer_Portal_UI.controller.NavigationMenu', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'panel': {
render: function (panel) {
panel.body.on('click', function (panel, e) {
alert('onclick');
});
}
}
});
}
});
It 'controls' this view:
Ext.define('Customer_Portal_UI.view.NavigationMenu', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationmenu',
region: 'west',
layout: 'fit',
ui: 'cssmenu',
loader: {
autoLoad: true,
url: '/resources/notloggedin.html'
}
});
But it also catches panel clicks from this view:
Ext.define("Customer_Portal_UI.view.MainContent", {
extend: 'Ext.form.Panel',
alias: 'widget.maincontent',
region: 'center',
layout: 'card',
border: false,
activeItem: 0,
requires: ['Ext.grid.Panel'],
initComponent: function () {
this.items = [
{
xtype: 'panel',
title: ''
},
{
xtype: 'gridpanel',
id: 'contactlistgrid',
store: Ext.data.StoreManager.lookup('contactStore'),
columns: [
....
],
features: [{
ftype: 'grouping',
groupHeaderTpl: ['{columnName}: {name} - ({rows.length} employees)'],
hideGroupedHeader: true,
startCollapsed: false
}],
viewConfig: { id: 'contactlistgridview' }
},
{
xtype: 'gridpanel',
id: 'caselistgrid',
store: Ext.data.StoreManager.lookup('caseStore'),
columns: [
{ text: 'Title', dataIndex: 'title' },
{ text: 'Description', dataIndex: 'description' },
{ text: 'Ticket number', dataIndex: 'ticketnumber' }
],
viewConfig: { id: 'caselistgridview' }
}
]
this.callParent(arguments);
}
});
Do you see any obvious reasons why it would do this ? panel is indeed the panel I'm clicking and not the document body, which could have explained why.
Note that's in not catching clicks from other panels, just from the MainContent view, which it should not...
Thanks.
The fix was two fold as shown in here:
http://www.fusioncube.net/index.php/sencha-extjs-4-make-any-component-fire-a-click-event/comment-page-1
Then I was able to listen to 'click' for 'panel' (there's only one panel within the view) within my controller without having to refine my selector.
I have added a navigation view (called MainView), and a button. When i click on the button, the next view gets displayed (In the following example its called DASHBOARD). In the dashboard there's another button when i click on that another view should display. The name of that view is MOREDETAILS.
But, when i click on the button in the DASHBOARD view, MOREDETAILS view doesn't get added to the navigation view or even get displayed.
How can i resolve this ???
My Code :
MAINVIEW
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
config: {
fullscreen: true,
id: 'MainView',
ui: 'light',
modal: true,
useTitleForBackButtonText: true,
items: [
{
xtype: 'formpanel',
title: 'TEST',
layout: {
type: 'card'
},
items: [
{
xtype: 'button',
docked: 'bottom',
itemId: 'mybutton9',
ui: 'confirm',
iconAlign: 'right',
text: 'Click'
}
]
}
],
listeners: [
{
fn: 'onMybutton9Tap',
event: 'tap',
delegate: '#mybutton9'
}
]
},
onMybutton9Tap: function(button, e, eOpts) {
this.push(Ext.create('MyApp.view.Dashboard',{
title:'Dashboard'
}));
}
});
DASHBOARD
Ext.define('MyApp.view.Dashboard', {
extend: 'Ext.form.Panel',
config: {
id: 'DashboardID',
layout: {
animation: 'slide',
type: 'card'
},
modal: true,
scrollable: 'vertical',
items: [
{
xtype: 'list',
id: 'ListItem',
scrollable: true,
itemTpl: [
'<div> blah blah</div>'
],
store: 'MyJsonPStore',
items: [
{
xtype: 'button',
docked: 'top',
itemId: 'mybutton10',
text: 'MyButton10'
}
]
}
],
listeners: [
{
fn: 'onMybutton10Tap',
event: 'tap',
delegate: '#mybutton10'
}
]
},
onMybutton10Tap: function(button, e, eOpts) {
this.push(Ext.create('MyApp.view.MoreDetails',{
title:'Neeeeee'
}));
}
});
MOREDETAILS
Ext.define('MyApp.view.MoreDetails', {
extend: 'Ext.Panel',
config: {
id: 'MoreInfo',
layout: {
animation: 'slide',
type: 'card'
},
scrollable: 'vertical',
items: [
{
xtype: 'list',
itemTpl: [
'<div>jhhhjhjhjhjhjh</div>'
],
store: 'MyJsonPStore'
}
]
}
});
In onMybutton10Tap, you are calling push on this, which is a formpanel, not a navigationview. You need to get a reference to the parent before calling push.
First, give your first class an alias, which allows you to create it using xtype:
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview'
//...more here
});
Then use up to get a reference to the parent using that xtype:
onMybutton10Tap: function(button, e, eOpts) {
this.up('mainview').push(Ext.create('MyApp.view.MoreDetails',{
title:'Neeeeee'
}));
}
Ext.application({
launch: function () {
Ext.define("User", {
extend: "Ext.data.Model",
config: {
fields: [{name: "title", type: "string"}]
}
});
var myStore = Ext.create("Ext.data.Store", {
model: "User",
proxy: {
type: "ajax",
url : "http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=twilight",
reader: {
type: "json",
rootProperty: "title_popular"
}
},
autoLoad: true
});
var view = Ext.Viewport.add({
xtype: 'navigationview',
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [{
xtype:'formpanel',
title: 'SEARCH IMDB MOVIES ',
padding: 10,
items: [{
xtype: 'fieldset',
title: 'Search Movies from IMDB',
items: [{
xtype: 'textfield',
name : 'Movie Search',
label: 'Search Movie'
}, {
xtype: 'button',
text: 'Submit',
handler: function () {
view.push({
//this one also has a title
title: 'List of Movies',
padding: 10,
//once again, this view has one button
items: [{
xyz.show();
}]
});
}
}]
}]
}]
});
var xyz = new Ext.create("Ext.List", {
fullscreen: true,
store: myStore,
itemTpl: "{title}"
});
}
});
error is with xyz.show();
it will work properly if i remove xyz.show();
but i want to show list after clicking on buttton
This is a navigation view on click of button i want to show list
Change your xyz list as follows:
var xyz = new Ext.create("Ext.List", {
//this one also has a title
title: 'List of Movies',
padding: 10,
xtype:'xyz',
alias:'xyz',
hidden:true,
fullscreen: true,
store: myStore,
itemTpl: "{title}"
});
Then just below it write
view.add(xyz);
Then in your handler
handler: function () {
xyz.show();
}
Not tested but it should work with possible adjustments.
Try this :
handler: function () {
view.push({
//this one also has a title
title: 'List of Movies',
padding: 10,
//once again, this view has one button
items: [
xyz
]
});
}
I am attempting to load a detail view for an item disclosure from a list but without using NavigationView and the "push()" command.
CONTROLLER:
Ext.define('App.controller.MyPlans', {
extend: 'Ext.app.Controller',
requires: ['App.view.EventDetail',
'App.view.PlansContainer'],
config: {
refs: {
},
control: {
'MyPlansList': {
disclose: 'onDisclose'
}
}
},
onDisclose: function (view, record) {
console.log("My Plans list disclosure " + record.get('id'));
var eventDetailView = Ext.create('App.view.EventDetail');
eventDetailView.setRecord(record);
Ext.Viewport.setActiveItem(eventDetailView);
}
});
VIEW:
Ext.define('App.view.EventDetail', {
extend: 'Ext.Panel',
xtype: 'EventDetail',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Event Name',
items: [{
xtype: 'button',
id: 'addRunBackBtn',
ui: 'back',
text: 'Back'
}]
}, {
xtype: 'panel',
styleHtmlContent: true,
itemTpl: [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>']
}],
}
});
I am basically trying to pass the data to the view using the "setRecord()" command but nothing seems to be loading in the view. Any thoughts??
Thanks
Instead of ItemTpl just write Tpl. I doubt that itemTpl exists without list xtype.
Other thing is put Tpl inside config:
{tpl:['<div class="ListItemContent">{descriptionddata}</div>']}
The answer before/above me is good but if you intend of keeping your formatting inside view and not in controller then , it works by using setData instead of setRecord
detailview.setData({title:record.get('title'), description:record.get('descriptiondata')});
Instead of panel try list as below
Ext.define('App.view.EventDetail', {
extend: 'Ext.TabPanel',
xtype: 'EventDetail',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Event Name',
items: [{
xtype: 'button',
id: 'addRunBackBtn',
ui: 'back',
text: 'Back'
}]
}, {
xtype: 'list',
styleHtmlContent: true,
itemTpl: [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>']
}],
}
});
I found the issue here:
A panel doesn't have a itemTpl
{
xtype: 'panel',
styleHtmlContent: true,
itemTpl : [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>'
]
}
The one of the possible way to do it could be:
Change the VIEW:
{
xtype: 'panel',
id: 'thePanel',
styleHtmlContent: true
}
Change the Controller:
onDisclose: function(me, record, target, index, e, eOpts) {
...
Ext.getCmp('thePanel').setHtml('<h1>'+record.get('name')+'</h1><h2>'+record.get('location')+'</h2><h2>'+record.get('date')'</h2>'); //For setting the Data
...
}
Hope this could help!