Jan 27 2008
CakePHP and EXTJS tree
Hi all!
I had to insert a tree in order to edit the structure of a menu. I found out that extjs tree are great! It lets you add a tree with dynamic content and move node from the root to leafs. So I tried integrating it, it’s really easy.
I added a js function to the tree javascript (from the reorder example in the extjs package)
function getTreeContents(tree) {
return getNodeContents(tree.root,true);
}
function getNodeContents(node) {
var s = ”;
if(node.childNodes.length > 0)
{
for(var i=0; i<node.childNodes.length; i++) {
s+= node.id+’-'+node.childNodes[i].id +’|';
s += getNodeContents( node.childNodes[i],false);
}
}
return s;
}
This returns a list of parentid-childid which, everytime the tree is changed, I add to a hidden textbox. Then I get the value of this textbox in the controller code, parse it and update all the nodes according to passed values.
That’s it!
Default
Small Fonts
Big Fonts
November 25th, 2008 at 5:28 pm
Hello, i am trying to build a cakephp layout which display forms, Tabs and pages. I created a borderlayout with Extjs, it doasnt display tabs as ther have to be displayed il loads on the first time all the content on each tabs, if i click on the tabs , then it shows me the right content of each Tabs, can you please help me and tell me where i fail. i am really desperate..
thanks in advance
November 25th, 2008 at 5:31 pm
Could you show some sample or link?
November 26th, 2008 at 2:11 pm
hi this is may default layout:
the js code of the layoutis teh following:
Ext.onReady(function(){
var viewport = new Ext.Viewport({
title: ‘BorderLayout’,
layout:’border’,
frame:true,
items: [{
// title: 'North Panel',
region: 'north',
contentEl: 'oben',
split: false,
height: 45
},
{
title: 'Navigation',
region: 'west',
contentEl: 'links',
collapsible: true,
width: 175,
autoScroll: false
//split: true,
//initialSize: 150
},
{
title: ' ',
region: 'center',
contentEl: 'mitte',
//fitToFrame: true
autoScroll: true
}]
});
});
and for the tabs:
var tabPanel= new Ext.TabPanel({
//activeTab: 0,
//title : ‘test’,
region : ‘center’,
border : false,
//frame:true,
width: ‘100%’,
//height : 400,
autoDestroy:true,
enableTabScroll:true,
tempActiv : false,
renderTo:’mitte’,
items:[
{
//add an initial tab
title: 'Company',
contentEl: 'Company', //Get our content from the "center" div
layout: 'fit'
},
{
contentEl:'Dokumente',
title: 'Dokumente'
},
{
contentEl:'Kontakte',
title: 'Kontakte'
},
{
contentEl:'Produkte',
title: 'Produkte'
},
{
contentEl:'Termine',
title: 'Termine'
}
]
});
and the ctp file for the tabs looks so:
<link rel=’StyleSheet’ href=’base ?>/js/ext-2.1/resources/css/ext-all.css’ />
link(‘ext-2.1/ext-layout’); ?>
Xois Address
<?php…..
November 26th, 2008 at 2:16 pm
the html file of tabs
<link rel=’StyleSheet’ href=’base ?>/js/ext-2.1/resources/css/ext-all.css’ />
link(‘ext-2.1/ext-layout’); ?>
Xois Address
<?php…..
November 26th, 2008 at 2:16 pm
<link rel=’StyleSheet’ href=’base ?>/js/ext-2.1/resources/css/ext-all.css’ />
link(‘ext-2.1/ext-layout’); ?>
Xois Address
<?php…..
November 26th, 2008 at 2:17 pm
<link rel=’StyleSheet’ href=’base ?>/js/ext-2.1/resources/css/ext-all.css’ />
link(‘ext-2.1/ext-layout’); ?>
Xois Address
<?php…..
November 26th, 2008 at 2:17 pm
hi i don t know why my code doesn t display here..
November 26th, 2008 at 3:29 pm
It’s because it gets cut by wordpress, maybe it sees php code and thinks of an hack… Try to post it in a txt file in your website or something…
January 7th, 2009 at 2:12 pm
Hello paomic
Happy new year!
i was seek for a long time, however the whole code is workind now, the problem was that i didn t use viewport. now its working fine the tabs too.
I am facing another issue, i like to build an expandable Navigation in the left side of my site but i didn’t get any example by extjs website, do ypu have any idea where to get such example?.. your Navi at the left side is a good example is is made by extjs??
January 7th, 2009 at 2:14 pm
sorry the old problem was that i didnt render the tabs…
January 7th, 2009 at 8:33 pm
It uses mootools and accordion element, it creates the elemnt with this code:
Window.onDomReady(function(){
var accordionmenu = new Accordion($$(‘.trig’), $$(‘.slide’), {‘alwaysHide’ : true}, $(‘menu’));
});
I’ll create a blog entry to explain this.
March 3rd, 2009 at 12:21 pm
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
March 3rd, 2009 at 1:01 pm
Share it with us here…