PDA

View Full Version : problem in dynamic nestedlist



yasodha
4 Jan 2011, 9:15 PM
Hi ,
I'm new to sencha. I have a doubt in nestedlist. I have a code which is similar to kitchen sink. In my code i'm generating dynamic items for the nested list in the left side panel. when i click on the last node of the list it should display an html page on righthand side. I'm not getting it on right side. I have attached my code here.



Structure.js


Ext.regModel('Test', {
fields: [
{name: 'titl', type: 'string'},
{name:'id' , type:'int'},
{name:'html'}

]
});


sink.StructureStore = new Ext.data.TreeStore({
model: 'Test',
proxy:new Ext.data.AjaxProxy({
url: 'test1.json',
reader:{
type:'tree',
root:'index'
}
})
});




index.js



Ext.ns('sink', 'demos', 'Ext.ux');
var i=0;
Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
items: [{ cls: 'launchscreen',
html: '<div><img src="resources/img/sencha.png" width="210" height="291" /><h1>Welcome to Sencha Touch</h1><p>This is a comprehensive collection of our examples in an <br /> easy-to-navigate format. Each sample has a “view source” button which dynamically displays its associated code.<br /><br /><span>Sencha Touch (' + Ext.version +')</span></p></div>'
}],
backText: 'Back',
useTitleAsBackText: true,
initComponent : function() {
this.navigationButton = new Ext.Button({
hidden: Ext.is.Phone || Ext.Viewport.orientation == 'landscape',
text: 'Navigation',
handler: this.onNavButtonTap,
scope: this
});

this.backButton = new Ext.Button({
text: this.backText,
ui: 'back',
handler: this.onUiBack,
hidden: true,
scope: this
});
var btns = [this.navigationButton];
if (Ext.is.Phone) {
btns.unshift(this.backButton);
}

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: btns.concat(this.buttons || [])
});

this.navigationPanel = new Ext.NestedList({
store: sink.StructureStore,
useToolbar: Ext.is.Phone ? false : true,
updateTitleText: false,
displayField:"titl",
dock: 'left',
plugins: [new Ext.LeafSelectedPlugin()],
hidden: !Ext.is.Phone && Ext.Viewport.orientation == 'portrait',
toolbar: Ext.is.Phone ? this.navigationBar : null,
getDetailCard: function(item, parent) {
detailCard = new Ext.Panel({

});

},
listeners: {
itemtap: this.onNavPanelItemTap,
leafitemtap:this.leafTap,
scope: this
}
});

this.navigationPanel.on('leafselected', function(enabled) {

});

this.navigationPanel.on('back', this.onNavBack, this);

if (!Ext.is.Phone) {
this.navigationPanel.setWidth(250);
}

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

if (!Ext.is.Phone && Ext.Viewport.orientation == 'landscape') {
this.dockedItems.unshift(this.navigationPanel);
}
else if (Ext.is.Phone) {
this.items = this.items || [];
this.items.unshift(this.navigationPanel);
}

this.addEvents('navigate');


Ext.ux.UniversalUI.superclass.initComponent.call(this);
},





onNavPanelItemTap: function(subList, subIdx, el, e) {

var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
nestedList = this.navigationPanel,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;

var parentNode=recordNode?recordNode.parentNode:null;

if(recordNode.leaf){

card=nestedList.getDetailCard(recordNode,parentNode);

}


if (Ext.Viewport.orientation == 'portrait' && !Ext.is.Phone && !recordNode.childNodes.length && !preventHide) {
this.navigationPanel.hide();
}

if (card) {

this.setActiveItem(card, 'slide');
this.currentCard = card;
}


if (title) {
this.navigationBar.setTitle(title);
}
this.toggleUiBackButton();
this.fireEvent('navigate', this, record);
},


toggleUiBackButton: function() {
var navPnl = this.navigationPanel;

if (Ext.is.Phone) {
if (this.getActiveItem() === navPnl) {

var currList = navPnl.getActiveItem(),
currIdx = navPnl.items.indexOf(currList),
recordNode = currList.recordNode,
title = navPnl.renderTitleText(recordNode),
parentNode = recordNode ? recordNode.parentNode : null,
backTxt = (parentNode && !parentNode.isRoot) ? navPnl.renderTitleText(parentNode) : this.title || '',
activeItem;


if (currIdx <= 0) {
this.navigationBar.setTitle(this.title || '');
this.backButton.hide();
} else {
this.navigationBar.setTitle(title);
if (this.useTitleAsBackText) {
this.backButton.setText(backTxt);
}

this.backButton.show();
}
// on a demo
} else {
activeItem = navPnl.getActiveItem();
recordNode = activeItem.recordNode;
backTxt = (recordNode && !recordNode.isRoot) ? navPnl.renderTitleText(recordNode) : this.title || '';

if (this.useTitleAsBackText) {
this.backButton.setText(backTxt);
}
this.backButton.show();
}
this.navigationBar.doLayout();
}

},

onUiBack: function() {
var navPnl = this.navigationPanel;

// if we already in the nested list
if (this.getActiveItem() === navPnl) {
navPnl.onBackTap();
// we were on a demo, slide back into
// navigation
} else {
this.setActiveItem(navPnl, {
type: 'slide',
reverse: true
});
}
this.toggleUiBackButton();
this.fireEvent('navigate', this, {});
},


crd:function(){
alert("hi");
},
onNavButtonTap : function() {
this.navigationPanel.showBy(this.navigationButton, 'fade');
},

layoutOrientation : function(orientation, w, h) {
if (!Ext.is.Phone) {
if (orientation == 'portrait') {
this.navigationPanel.hide(false);
this.removeDocked(this.navigationPanel, false);
if (this.navigationPanel.rendered) {
this.navigationPanel.el.appendTo(document.body);
}
this.navigationPanel.setFloating(true);
this.navigationPanel.setHeight(400);
this.navigationButton.show(false);
}
else {
this.navigationPanel.setFloating(false);
this.navigationPanel.show(false);
this.navigationButton.hide(false);
this.insertDocked(0, this.navigationPanel);
}
this.navigationBar.doComponentLayout();
}

Ext.ux.UniversalUI.superclass.layoutOrientation.call(this, orientation, w, h);
}
});

sink.Main = {
init : function() {


this.ui = new Ext.ux.UniversalUI({
title: Ext.is.Phone ? 'P&G' : 'P&G Brands',
useTitleAsBackText: false

});
}





};

Ext.setup({

onReady: function() {
sink.Main.init();
}
});

Ext.ns('demos', 'demos.Data');


test1.json



{
"titl":"Test",
"index":[{
"titl":"cv",
"id":1,
"index":[{
"titl":"sencha",
"html":"1",
"leaf": true
},
{ "titl":"senchatouch",
"html":"1",
"leaf": true
}]
},
{
"titl":"fg",
"id":2,
"index":[{
"titl":"Ext",
"html":"2",
"leaf": true
},{
"titl":"Extjs",
"html":"2",
"leaf": true
}]
},
{
"titl":"zdfvvff",
"id":3,
"index":[{
"titl":"soft",
"html":"3",
"leaf": true
},
{
"titl":"softer",
"html":"3",
"leaf": true
}]
}
]


}





I need someone to help on this. Thanks in advance.