PDA

View Full Version : I got struck creating an application in extjs HELP needed



pratyush@ideaplunge.com
29 Jul 2013, 11:29 PM
i am trying to create a left menu having tree like directory. Though i am able to render the tree even click event is happening but not getting the content which should display after clicking on tree node Help me Guys!!!
my app.js

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'Crm',


appFolder: 'app',
controllers:['Menu'],


launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'menubar',

}
]
});
}
});

My store.js

Ext.define('Crm.store.Menus',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [
{ text: "BasicPanels",
expanded: true,
visible:true,
children:[
{ id: 'a', text: "item1", leaf: true,visible:true},
{ id: 'b', text: "item2", leaf: true,visible:true},
]
},
{ text: "FramedPanel",
expanded: true,
visible: true,

children: [
{ id: 'c', text: "item3", leaf: true,visible:true},
{ id: 'd', text: "item4", leaf: true,visible:true}
]
},




{ text: "ArrayGrid",
expanded: true,
visible: true,
children: [
{ id: 'd', text: "item5", leaf: true,visible:true},
{ id: 'e', text: "item6", leaf: true,visible:true}
]
}
]
}
});


My View MenuBar.js

Ext.define('Crm.view.MenuBar',{
extend: "Ext.panel.Panel",
alias: 'widget.menubar',
requires: ['Crm.store.Menus'],
initComponent: function(){
//var store = Ext.create('Crm.store.Menus');
Ext.apply(this,{
// xtype:'panel',
title: "Examples",
//width: 212,
frame:true,
hideCollapseTool:true,
split: true,
collapsible:true,
collapseMode: 'mini',
items: [
Ext.create('Ext.tree.Panel',{
id: 'menubar',
border: false,
height: '100%',
rootVisible: true,
store: 'Menus',
renderTo:Ext.getBody(),
listeners:{
itemclick:function(s,r){

alert(r.data.text);
var view = Ext.widget('basicpanels');
view.down('panel'),
console.log("Hello");

}
}
})
]
});
this.callParent();
}
});


My controller Menu.js


Ext.define('Crm.controller.Menu',{
extend: 'Ext.app.Controller',

views:['MenuBar'],

stores:['Menus'],
refs: [{ref: 'menubar', selector: 'menubar'}],
init: function(){
// this line can already execute when page is loading
this.control({


'menubar treepanel[id="menubar"]': {
itemclick: this.basicpanels
}
// 'crm_menubar treepanel[id="menubar"]': {
// itemclick: this.onItemClicked,
// scope : this
// }
});
},

basicpanels: function(tree, record) {
var view = Ext.widget('basicpanels');


view.down('form');
}


// onItemClicked: function(){

//alert('clicked the Tree Node!!!');
//init.getcontroller(BasicPanels)

// }
});


after clicking on tree node Basicpanels i want this view
BasicPanels.js

Ext.define('Crm.view.BasicPanels', {
extend:'Ext.window.Window',
extend: 'Ext.Container',
alias:'widget.basicpanels',
xtype: 'basic-panels',
width: 660,
requires: [
'Ext.layout.container.Table'
],


layout: {
type: 'table',
columns: 3,
tdAttrs: { style: 'padding: 10px;' }
},


defaults: {
xtype: 'panel',
width: 200,
height: 200,
bodyPadding: 10
},


initComponent: function () {
/* this.items = [
{
html: Crm
},
{
title: 'Title',
html: Crm
},
{
title: 'Header Icons',
tools: [
{ type:'pin' },
{ type:'refresh' },
{ type:'search' },
{ type:'save' }
],
html: Crm
},
{
title: 'Collapsed Panel',
collapsed: true,
collapsible: true,
width: 640,
html: Crm,
colspan: 3
}
];


this.callParent();
}*/

this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];


this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];


this.callParent(arguments);
}
});

slemmon
2 Aug 2013, 1:11 PM
When showing a window component you'll need to instantiate it - which you're doing with Ext.widget('basicpanels');
And then you'll need to show it. So, you can change it to:
Ext.widget('basicpanels').show(); // or use autoShow: true on the basicpanels config

A copule more pointers:
Use CODE blocks when posting your code to the forums to make it more readable.
In your basicpanels config you have:



extend: 'Ext.window.Window',
extend: 'Ext.Container', // you have two extend configs - should this one be deleted?
alias: 'widget.basicpanels',
xtype: 'basic-panels', // alias and xtype are two ways of saying the same thing
// so in this case, either use alias: 'widget.basicpanels' or xtype: 'basicpanels'



CODE WRAPPED IN CODE BLOCKS (The # button in the top toolbar)


Ext.application({
requires: ['Ext.container.Viewport'],
name: 'Crm',




appFolder: 'app',
controllers: ['Menu'],




launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'menubar',


}]
});
}
});


Ext.define('Crm.store.Menus', {
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [{
text: "BasicPanels",
expanded: true,
visible: true,
children: [{
id: 'a',
text: "item1",
leaf: true,
visible: true
}, {
id: 'b',
text: "item2",
leaf: true,
visible: true
}, ]
}, {
text: "FramedPanel",
expanded: true,
visible: true,


children: [{
id: 'c',
text: "item3",
leaf: true,
visible: true
}, {
id: 'd',
text: "item4",
leaf: true,
visible: true
}]
},








{
text: "ArrayGrid",
expanded: true,
visible: true,
children: [{
id: 'd',
text: "item5",
leaf: true,
visible: true
}, {
id: 'e',
text: "item6",
leaf: true,
visible: true
}]
}
]
}
});




Ext.define('Crm.view.MenuBar', {
extend: "Ext.panel.Panel",
alias: 'widget.menubar',
requires: ['Crm.store.Menus'],
initComponent: function () {
//var store = Ext.create('Crm.store.Menus');
Ext.apply(this, {
// xtype:'panel',
title: "Examples",
//width: 212,
frame: true,
hideCollapseTool: true,
split: true,
collapsible: true,
collapseMode: 'mini',
items: [
Ext.create('Ext.tree.Panel', {
id: 'menubar',
border: false,
height: '100%',
rootVisible: true,
store: 'Menus',
renderTo: Ext.getBody(),
listeners: {
itemclick: function (s, r) {


alert(r.data.text);
var view = Ext.widget('basicpanels');
view.down('panel'),
console.log("Hello");


}
}
})
]
});
this.callParent();
}
});


Ext.define('Crm.controller.Menu', {
extend: 'Ext.app.Controller',


views: ['MenuBar'],


stores: ['Menus'],
refs: [{
ref: 'menubar',
selector: 'menubar'
}],
init: function () {
// this line can already execute when page is loading
this.control({




'menubar treepanel[id="menubar"]': {
itemclick: this.basicpanels
}
// 'crm_menubar treepanel[id="menubar"]': {
// itemclick: this.onItemClicked,
// scope : this
// }
});
},


basicpanels: function (tree, record) {
var view = Ext.widget('basicpanels');




view.down('form');
}




// onItemClicked: function(){


//alert('clicked the Tree Node!!!');
//init.getcontroller(BasicPanels)


// }
});


Ext.define('Crm.view.BasicPanels', {
extend: 'Ext.window.Window',
extend: 'Ext.Container',
alias: 'widget.basicpanels',
xtype: 'basic-panels',
width: 660,
requires: [
'Ext.layout.container.Table'
],




layout: {
type: 'table',
columns: 3,
tdAttrs: {
style: 'padding: 10px;'
}
},




defaults: {
xtype: 'panel',
width: 200,
height: 200,
bodyPadding: 10
},




initComponent: function () {
/* this.items = [
{
html: Crm
},
{
title: 'Title',
html: Crm
},
{
title: 'Header Icons',
tools: [
{ type:'pin' },
{ type:'refresh' },
{ type:'search' },
{ type:'save' }
],
html: Crm
},
{
title: 'Collapsed Panel',
collapsed: true,
collapsible: true,
width: 640,
html: Crm,
colspan: 3
}
];




this.callParent();
}*/


this.items = [{
xtype: 'form',
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
}];




this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];




this.callParent(arguments);
}
});