PDA

View Full Version : [URGENT HELP] Problems to open a url from a click on a tree panel



rogerio.carrasqueira
17 Sep 2010, 7:53 AM
Hi Everybody!

I'm a newbie at ExtJS and I'm having serious problems to work with this framework. I'm almost quitting from the use of this tool. :s. My problem is very simple but I'm not finding any simple solution to it.

I have a welcome page on my application where at west side appears a navigation tree panel and at the center region I will have the stuff being displayed. So my goal is, on the elements at this tree I will have links for the pages where it will open at the center region of my viewport. Some pages has javascript inside where they runs another apps developed using the extjs framework, but when clicked the firebug shows that page is loaded but the center region at my view port remains blank. Let me show my code:




Ext.onReady(function() {

Ext.QuickTips.init();

var dynamicTreePanel = new Ext.tree.TreePanel({

id : 'dynamicTreePanel',
useArrows : true,
rootVisible : false,
autoScroll : true,
border : false,
animate : true,
containerScroll : true,
checked : true,
bodyStyle :'padding:5px;font-size:11px; border-top: 1px solid #d0d0d0;background-color:transparent;', // background-color:#F0F0F0;', //#CEDFF5;',
root : new Ext.tree.AsyncTreeNode({
expanded: true,
children: [
{
id: 'usuarios'
text: 'Usuários',
href: "/core/user/list",
scripts: true,
leaf:true

}]
}),
listeners:{
click : function(node, e) {
if (node.isExpanded()){
node.collapse();
}
else{
node.expand();
}
//console.debug('node',node);
if (node.attributes.id!=0){ // não é o root
// existem filhos
var idTab='idTab'+node.attributes.id;
var tabs = Ext.getCmp(idTab);
if (tabs) {// A Tab ja foi criada
tabs.show();

}
else {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Aguarde! Carregando campanhas..."});
myMask.show();

tabCount++;
tabs.doLayout();
tabs.setActiveTab(Ext.getCmp(idTab));
myMask.hide();
}
}
}
}
});

var viewport = new Ext.Viewport({

id:'navegacao',
layout:'border',
items:[{

region:'north',
height:36,
border:true,
xtype:'box',
margins: '0 0 5 0',
//bodyStyle:'background-color:#f8f8f8;',
contentEl:'header'

},
{
region:'south',
height:20,
html:'<div align="right" style="color:#243E5D;padding-top: 2px;">Copyright &copy; 2010 <b>Direct<span style="color:#C86A23;">Flow</span></b>&nbsp;&nbsp;&nbsp;&nbsp;</div>',
border:false,
//bodyStyle:'background-color:#EAEAEA;' //#DFE8F6;',
bodyStyle: 'background-color:#eee; opacity:0.9;',
},
{
region: 'center',
xtype: 'container',
// layout: 'border',
border: false,
split: false,
html: '<p>Olá</p>'

},
{
region:'east',
width:5,
border:false,
hidden: true,
//bodyStyle:'background-color:#EAEAEA;' //#DFE8F6;',
},
{

region:'west',
id:'nav',
title:'Navegação',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
autoScroll:true,
collapsible:true,
collapseMode:'mini',
bodyStyle:'padding:5px;font-size:11px; border-top: 1px solid #d0d0d0;', // background-color:#F0F0F0;', //#CEDFF5;',
margins:'3 0 3 3',
cmargins:'3 3 3 3',
//layout:'accordion',
layoutConfig:{
animate:true
},
items:[dynamicTreePanel]

}
]
});
});
Here I have a page where I will load another script content:

/core/user/list



<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}core/css/Ext.ux.grid.RowActions.css">
<script src="{{ MEDIA_URL }}core/js/extjs/App.js"></script>
<script src="{{ MEDIA_URL }}core/js/ux/Ext.ux.grid.RowActions.js"></script>
<script type="text/javascript">

// Application instance for showing user-feedback messages.
var App = new Ext.App({});

var user_id;


var groupForm = new Ext.FormPanel({
id: 'groupForm',
border:false,
url:'/core/json/user/changeGroup/',
items: [{
xtype:'fieldset',
autoHeight:true,
layout:'form',
items:[{
xtype:'checkboxgroup',
fieldLabel:'Selecione',
name:'groups',
columns:1,
items:[

{% for g in groups %}
{
boxLabel:'{{g.name}}',
name:'groups_{{g.id}}',
inputValue:'{{g.id}}',
},
{% endfor %}
]
}]
}],
buttons:[{
text: 'Alterar',
handler: function(){
if(groupForm.getForm().isValid()){
groupForm.getForm().submit({
params: { id: user_id },
waitMsg: 'Enviando as permissões',
success: function(response, opts) {
groupWindowManager.hide();
Ext.Msg.alert('Status', 'Grupos alterados com sucesso!');
},
failure: function(response, opts) {
groupWindowManager.hide();
Ext.Msg.alert('Status', 'Não foi alterar os grupos para este usuário!');
},
});
}
}
},
{
text: 'Cancelar',
handler: function(){
groupWindowManager.hide();
}
}
]
});

var groupWindowManager = new Ext.Window({
title: 'Alterar Grupo',
layout:'form',
autoHeight: true,
width:340,
closeAction:'hide',
modal: true,
items:[groupForm]
});

// Create RowActions Plugin
var button_actions = new Ext.ux.grid.RowActions({

header:'Ações',
actions:[{
//Reset Password
iconCls:'icon-user',
tooltip:'Reniciar senha'
},
{
//Change Group
iconCls:'icon-group-add ',
tooltip:'Alterar Grupo'
}
]

});


button_actions.on({
action:function(grid, record, action, row, col) {

user_id = store.getAt(row).get('pk');

switch (action){

//Reset Password
case "icon-user":
Ext.Msg.confirm("Resetar Senha", "Você deseja resetar a senha?", function(btn){
if(btn == 'yes'){
Ext.Ajax.request({
url: '/core/json/user/reset/',
success: function(response, opts) {
Ext.Msg.alert('Status', 'Senha resetada com sucesso!');
},
failure: function(response, opts) {
Ext.Msg.alert('Status', 'Não foi possível resetar a senha!');
},
params: { pk: user_id }
});
}
});
break;

//Group Add
case "icon-group-add":
user_id = record.id;
groupWindowManager.show();
groupForm.getForm().load({
url:'/core/json/user/showGroups/',
params: { id : user_id },
waitMsg:'Carregando...'
})

break;
}
}
});









// Create HttpProxy instance. Notice new configuration parameter "api" here instead of load. However, you can still use
// the "url" paramater -- All CRUD requests will be directed to your single url instead.
var proxy = new Ext.data.HttpProxy({

api: {
read : '/core/json/user/list/',
create : '/core/json/user/add/',
update: '/core/json/user/update/',
destroy: '/core/json/user/delete/'
}
});

// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'pk',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'pk'},
{name: 'username', mapping: 'fields.username', allowBlank: false},
{name: 'first_name', mapping: 'fields.first_name', allowBlank: false},
{name: 'last_name', mapping: 'fields.last_name', allowBlank: false},
{name: 'email', mapping: 'fields.email', allowBlank: false},
{name: 'is_active', mapping: 'fields.is_active', allowBlank: false},
//{name: 'group', mapping: 'fields.group', allowBlank: false},
{% if request.user.is_staff %}
{name: 'customer', mapping: 'fields.customer', allowBlank:false},
{% endif %}
{name: 'date_created', mapping: 'fields.date_joined'},
{name: 'last_login', mapping: 'fields.last_login'}

]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: false
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'users',
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
autoSave: true // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
});

// load the store immeditately
store.load();

// A new generic text field
var textField = new Ext.form.TextField();

{% if request.user.is_staff %}


var customerProxy = new Ext.data.HttpProxy({

api: {
read : '/core/json/customer/list/',
}
});

var customerReader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'pk',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'pk'},
{name: 'name', mapping: 'fields.name'}
]);


var customerStore = new Ext.data.Store({

id : 'customers',
proxy: customerProxy,
reader: customerReader,

});

var customerCombo = new Ext.form.ComboBox({

store: customerStore,
displayField: 'name',
valueField: 'pk',
typeAhead: false,
triggerAction: 'all',
editable: false,
anchor: '95%',
allowblank: false,
mode: 'remote'

});

{% endif %}

var statusValues = [ ['True'], ['False'] ]

var statusStore = new Ext.data.SimpleStore({
fields: ['name'],
data: statusValues
});

var statusCombo = new Ext.form.ComboBox({

store: statusStore,
displayField: 'name',
valueField: 'name',
typeAhead: false,
triggerAction: 'all',
editable: false,
anchor: '95%',
allowblank: false,
mode: 'local'

});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [

{header: "ID", width: 20, sortable: true, dataIndex: 'pk'},
{header: "Usuário", width: 90, sortable: true, dataIndex: 'username', editor: textField},
{header: "Primeiro Nome", width: 80, sortable: true, dataIndex: 'first_name', editor: textField},
{header: "Sobrenome", width: 80, sortable: true, dataIndex: 'last_name', editor: textField},
{header: "E-mail", width: 130, sortable: true, dataIndex: 'email', editor: textField},
{header: "Ativo?", width: 40, sortable: true, dataIndex: 'is_active', editor: statusCombo},
{% if request.user.is_staff %}
{header: "Cliente", width: 130, sortable: true, dataIndex: 'customer', editor: customerCombo},
{% endif %}
{header: "Criado em:", width: 90, sortable: true, dataIndex: 'date_created'},
{header: "Último Login em:", width: 90, sortable: true, dataIndex: 'last_login'},
button_actions
];


Ext.onReady(function() {

Ext.QuickTips.init();

var userGrid = new App.user.Grid({
renderTo: 'user-grid',
store: store,
columns: userColumns,
plugins: button_actions,
listeners: {
rowclick: function(g, index, ev) {
var rec = g.store.getAt(index);
},
}
});

});

</script>
<script src="{{ MEDIA_URL }}core/js/ux/UserGrid.js"></script>
<div id="user-grid"></div>Can anyone give me light for me?

Thanks so much!

Rogério Carrasqueira

jay@moduscreate.com
21 Sep 2010, 5:11 AM
Marking your threads as "URGENT" will not get you any faster help. In fact, it turns people off!

rogerio.carrasqueira
21 Sep 2010, 5:26 AM
Marking your threads as "URGENT" will not get you any faster help. In fact, it turns people off!

Can you help me with this issue? If you can't, get out! Dont waste our time with insignificant answers. We are here trying to help each one to find solutions to our problems in the ExtJS, not for find for moral lessons.

jay@moduscreate.com
21 Sep 2010, 8:56 AM
Can you help me with this issue? If you can't, get out! Dont waste our time with insignificant answers. We are here trying to help each one to find solutions to our problems in the ExtJS, not for find for moral lessons.

It's obvious that you're frustrated -- I get it. Either way, do not take it out on me.


Your post was not answered since you posted it 4 days ago. I'm letting you know the most likely reason.


If you want to be a jerk, please do that elsewhere.

this block of code is flawed.



if (node.attributes.id!=0){ // não é o root
// existem filhos
var idTab='idTab'+node.attributes.id;
var tabs = Ext.getCmp(idTab);
if (tabs) {// A Tab ja foi criada
tabs.show();

}
else {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Aguarde! Carregando campanhas..."});
myMask.show();

tabCount++;
tabs.doLayout();
tabs.setActiveTab(Ext.getCmp(idTab));
myMask.hide();
}
}

tryanDLS
21 Sep 2010, 11:00 AM
@rogerio - Please you check your attitude at the door - Jay was simply making a suggestion. That type of response will get you ignored by anybody who might have an answer. Nobody here is paid to provide answers - we are all volunteers.

I suggest you edit your thread title and remove '[URGENT HELP]' - perhaps then folks might be inclined to assist.