How can get the child node for click event on treepanel? - extjs4

Code in controller
nextPages:function()
{
var obj=Ext.getCmp('centerId');
obj.removeAll();//remove center panel to display new panel information
var myTree=Ext.getCmp('leftId');//get tree panel view
var node=myTree.getRootNode().findChild("navTree","localId",true);//for get child node
if(node){
var obj2=Ext.create('AS.view.center.Localadmin');
obj2.region='center';
obj.add(obj2);
}
Code in view:
Ext.define('AS.view.left.Left',{
extend:'Ext.tree.Panel',
alias:'widget.Left',
id:'leftId',
useArrows : true,
hideHeaders : true,
//title: 'About village',
height: 150,
root: {
itemId:'navTree',
rootVisible : false,
text:'About village',
children:[{
text:'Whats nearby?',
expanded: true,
children: [{
// id:'first',
id:'localId',
text: 'Local Administration',
leaf: true
}, {
id:'bId',
text: 'Bussiness directory',
leaf: true
},{
id:'hid',
text: 'Heritage and tourism',
leaf: true
},{
id:'eid',
text: 'Education',
leaf: true
}],
},
{
text:'classifieds',
leaf: true
},{
text:'Events',
leaf: true
}],//children1
},//root
});
I want to get the specific child node for click event and after display another panel on that click of node. Tell me how to get the child node from tree panel.
In controller I wrote a function to get the child node and then get the view on that click of specific node.

Related

Sencha Touch 2: Add NestedList inside TabPanel

I try to insert a NestedList in a TabPanel, but I get an empty list, the content is not displayed. How to make visible this Neestedlist
Code I tried:
Thank you in advance for your help
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
});
Ext.create('Ext.NestedList', {
fullscreen: true,
store: treeStore
});
Ext.application({
name: 'Sencha',
launch: function() {
// The whole app UI lives in this tab panel
Ext.Viewport.add({
requires: ['Ext.List', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// This is the recent blogs page. It uses a tree store to load its data from blog.json.
{
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
cls: 'blog',
displayField: 'title',
store: treeStore
}
]
});
}
});
At the bottom of your provided code, in the Nested List you are creating, you are setting a displayfield property with a value of "title". Therefore the list is trying to use the "title" field from your model, which does not exist. Either change your store data to use "title" instead of "text", or remove the displayField property (as the default is already "text").

Not able to make TreePanel work on ExtJS 4.1

I was using ExtJS 3.2 and to make the tree panel work I have taken reference from below link and was able to get that done.
https://www.assembla.com/code/yamt/subversion/nodes/trunk/web/js/extjs/examples/ux/XmlTreeLoader.js?rev=9
Now I have to migrate that code in ExtJS 4.1, where I am geeting errors for this code, because Ext.tree.TreeLoader is not working there. So what would be the minimal changes in the same code to make the things work in ExtJS 4.1.
Try the following code.This code is taken from Sencha API.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
Refer API for more details.

How to Embed a NestedList in a TabPanel?

I'm trying to create a tabpanel view that contains a splitview controller on the first tab. Think "kitchen sink" demo placed into one tab of a tabpanel.
The others do not contain the nestedlist.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
I've tried placing the nestedlist into a container, which you can see in some of the commented code shown below.
At the moment, this working code only shows the nestlist taking up the entire section on the first tab:
Ext.application({
name: 'Test',
requires: [
'Ext.dataview.NestedList',
'Ext.navigation.Bar'
],
launch: function() {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
id: 'tab4',
title: 'Tab4',
iconCls: 'star',
xtype: 'container',
items: [{
xtype: 'nestedlist',
displayField: 'text',
docked: 'left',
store: store
}, {
html: 'Detail View'
}]
}, {
id: 'tab2',
title: 'Tab2',
iconCls: 'star',
html: 'No nav bar?'
}, {
id: 'tab3',
title: 'Tab3',
iconCls: 'star',
html: 'Screen3'
}]
}).setActiveItem(0);
}
});
Store setup:
Ext.Loader.setConfig({ enabled: true });
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}
]};
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: data
});
Okay. I have created this example for you: http://www.senchafiddle.com/#ynn40
You can also download the whole source from here: http://rwd.me/FG5s (quite large as it includes the SDK)
Be sure to look through all the files as I have added lots of documentation.
Some notes:
I created a new component called Sencha.view.SplitView. This obviously can be called anything. It has a xtype of splitview so we can simply just require it and include it into our Main.js file (which is a Ext.tab.Panel.
{
xtype: 'splitview',
title: 'SplitView',
store: 'Items'
}
Because this is an item inside a tabPanel, we need to give it the title configuration too. Of course we could include this Splitview component anywhere.
As you can see it has a store configuration which is defined in SplitView:
config: {
/**
* We create a custom config called store here so we can pass the store from this component
* (SplitView) down into the nested list when it updates. Checkout {#link #updateStore}
* #type {Ext.data.Store}
*/
store: null
}
This is used to pass the store from the splitview to the nested list (we will get to that in a second). Of course that configuration will do nothing unless we add the appropriate methods to update the nested list:
/**
* This is called when the {#link #store} config has been updated.
* We simply check if the nested list has been created, and if it has, set the store
* on it with the new value.
*/
updateStore: function(newStore) {
if (this.nestedList) {
this.nestedList.setStore(newStore);
}
}
As you can see, we are simply updating the nestedList (if it exists) store with the new value of the SplitView store.
Inside the initialize method of SplitView, we created both the detailContainer (where the detail card of the nested list should go) and the nestedList and then add them to the SplitView. Make sure you look at some of the configurations that we give nestedList as they are important. The store configuration:
// Set the store of this nested list to the store config of this component (Splitview)
store: this.getStore()
The detailCard and detailContainer configurations:
// Tell the nested list to have a detail card and put it inside our new detailContinaer
detailCard: true,
detailContainer: this.detailContainer
And of course the listeners so we know when things get changed:
// And finally add a listener so we know when to update the detail card
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
Finally we add the onLeadItemTap method into the Splitview (we added the listener above) which should update the detail card with new information:
/**
* This is called when a leaf item is tapped in the nested list, or when the detail card
* should be updated. In here, we just get the record which was tapped and then set the HTML
* of the detail card.
*/
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
detailCard.setHtml(record.get('text'));
}
Hopefully this makes sense and helps you. If not, let me know.

how to show different panel on the center of the window based on button click event extjs4

forum member
I am having some problems in displaying different panel on the center area of border layout window.
Consider I am having border layout window with east side containing different button, which on click will display the grid on the center of the layout window.
my window is shown below with east containing buttons and center is empty.
my updated controller code is given below
Ext.define('rms.controller.companymgt.CompanyMgtController',{
extend: 'Ext.app.Controller',
stores:['companyStore'],
models:['companyModel'],
views: [
'companymgt.companyMain',
'companymgt.companyView',
'companymgt.companyDetail',
'companymgt.companyAdd',
'companymgt.fileUpload'
,'companymgt.departmentDetail',
'companymgt.designationDetail',
'companymgt.groupDetail'
],
refs: [{
ref: 'companyMain',
autoCreate: true,
selector: 'companymain',
xtype: 'companymain'
},{
ref: 'companyAdd',
autoCreate: true,
selector: 'companyadd',
xtype: 'companyadd'
},{
ref: 'fileUpload',
autoCreate: true,
selector: 'fileupload',
xtype: 'fileupload'
},{
ref: 'departmentDetail',
autoCreate: true,
selector: '#departmentdetail',
xtype: 'departmentdetail'
},{
ref: 'designationDetail',
autoCreate: true,
selector: '#designationdetail',
xtype: 'designationdetail'
},{
ref: 'groupDetail',
autoCreate: true,
selector: '#groupdetail',
xtype: 'groupdetail'
},{
ref: 'companyDetail',
autCreate: true,
selector: '#companydetail',
xtype: 'companydetail'
}],
init: function() {
this.control({
'#companyview button[action=company-view]': {
click: this.createCompanyview
},
'#companyview button[action=department-view]': {
click: this.createDepartmentview
},
'#companyview button[action=designation-view]': {
click: this.createDesignationview
},
'#companyview button[action=group-view]': {
click: this.createGroupview
},
'#companyview button[action=file-view]': {
click: this.createFilemgtview
},
'#companydetailtoolbar #mnuDept': {
click: this.createDepartmentnew
},
'#companydetailtoolbar #mnuExcel': {
click: this.exportExcel
},
'#companydetailtoolbar #mnuCSV': {
click: this.exportCSV
}
});
},
createCompanyview: function(btn) {
alert('company view clicked');
},
createDepartmentview: function(btn) {
alert('department view clicked');
var departmentCard = this.getDepartmentDetail();
var mainComp = this.getCompanyMain();
mainComp.getLayout().setActiveItem('departmentCard');
},
createDesignationview: function(btn) {
alert('designation view clicked');
},
createGroupview: function(btn) {
alert('group view clicked');
},
createFilemgtview: function(btn) {
alert('FILE MGT WINDOW');
this.getFileUpload().show();
},
createDepartmentnew: function(obj) {
this.getCompanyAdd().show();
}
});
my main view code is given below
Ext.define('rms.view.companymgt.companyMain', {
extend: 'rms.model.desktopmgt.Module',
alias: 'widget.companymain',
requires: ['rms.view.companymgt.companyView','rms.view.companymgt.companyDetail'],
id: 'companymain',
init: function() {
this.launcher = {
text: 'Company Management System',
iconCls: 'project-mini-icon',
handler: this.createWindow,
scope: this
};
},
createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('companymgt-win');
if(!win){
win = desktop.createWindow({
id: 'companymgt-win',
title: 'Company Management System',
height: 566,
width: 900,
layout: 'border',
constrain: true,
modal: true,
closeAction: 'destroy',
items: [{
region: 'west',
collapsible: true,
//html: 'MAIN VIEW',
xtype: 'companyview',
flext:1
},{
region: 'center',
collapsible: true,
//html: 'DETAIL VIEW',
xtype: 'companydetail',
flex:3
}]
});
}
win.show();
return win.setPosition(100,100);
}
});
when the company button is clicked I get the alert window.
But based on the button click I want to open different detail view to the center layout of the window.
Please suggest me some solution, so I can view different window on the border layout of the window as shown above.
I would go with a card layout. The easiest thing would be to give each component an itemId. Then in your controller you would have:
, refs: [
{
ref: 'mainCardComponent'
, selector: '#mainCardComponent'
},
{
ref: 'companyCard'
, selector: '#companyCard'
},
{
ref: 'departmentCard'
, selector: '#departmentCard'
}...
Then you can reference using get... within the scope of your controller like:
var companyCard = this.getCompanyCard();
To swap out the cards, you would do something like:
var mainComp = this.getMainCardComponent();
mainComp.getLayout().setActiveItem('companyCard');
You have two options:
Make center piece a container and remove old/add new stuff to it when needed.
If you have limited number of content pages make center piece layout 'card' and create all pages at once. Only one will be visible. You can change visibility when user click certain button.

Sencha Touch - In need of a nested list example

I'm in need of a simple nested list-view example. Something along the lines of this...
(source: roosteronacid.com)
When you click an item, you will transition (slide) to the next view/card containing another list, with a "back"-button in the top-menu. And so on and so forth.
The lists doesn't necessarily have to three levels deep. I'd like an example which includes, say, one item with three sub-items, and one item which takes you directly to the "final" view.
you should look into the sencha touch videos on vimeo. here is one that answers your question:
http://vimeo.com/20580117
Try the code given below it will help you understand the basic functionality of created a nested list using sencha touch.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
dock: 'left',
useTitleAsBackText: true,
title: '',
displayField: 'text',
width: '350',
store: store
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems:[leftNav]
});
}
})
Following link will help you to find more info easily http://dev.sencha.com/deploy/touch/docs/.
Also look for examples in the sencha touch downloadable package.
Ignoring the PhoneGap stuff at the start, this tutorial has most of what you need.
That's really easy to do. Check out the Nested List in the Kitchen Sink under User Interface examples and click the "Source" button to see the code..
I went with a different approach, using raw HTML.