Im using ExtJS 5.1.
I have a Viewport with a Ext.tree.Panel at west region and a simple Ext.panel.Panel at a center region. When you click one item of the treepanel i want to load some data inside Ext.panel.Panel at the center region but i don't know exactly how to do.
Now i have an itemclick listener in Ext.tree.Panel who obtain the id of the clicked item. what more do i need to create something like this ExtJS 4 example ?
APP.JS code:
var arbolFrameworks = Ext.create('Ext.tree.Panel', {
title : 'Arbol Frameworks',
width : 300,
height : 600,
style: 'padding: 3 3 3 3;',
listeners : {
itemclick : function (view, record, item, index, e) {
alert(record.getId());
}
},
root : {
text : 'Componentes',
expanded : true,
children : [{
text : 'Grids',
expanded : true,
children :
[ {
id: 'grid_framework',
text : 'Grid de frameworks',
leaf : true
}, {
id: 'grid_personaje',
text : 'Grid de personajes',
leaf : true
}
]
},{
text : 'Árbol',
expanded : true,
children : [{
id: 'arbol_prueba',
text : 'Arbol de prueba',
leaf : true
}
]
},{
text : 'Gráficas',
expanded : true,
children : [{
id: 'grafica_1',
text : 'Básica',
leaf : true
},{
id: 'gráfica_2',
text : 'Pie',
leaf : true
}
]
}
]
}
});
var contenido = Ext.create('Ext.panel.Panel', {
title: 'Prueba',
style: 'padding: 3 3 3 3',
html: 'prueba'
})
// Panel
Ext.create('Ext.Viewport', {
layout:'border',
defaults: {
collapsible: true,
},
items: [{
title: 'Barra de navegacion',
region:'west',
width: 300,
items:[arbolFrameworks]
},{
title: 'Contenido principal',
collapsible: false,
region:'center',
items: [contenido]
}]
});
what more do i need to create something like this ExtJS 4 example ?
In a nut shell, once you've got the id of the clicked item, you make an AJAX call to retrieve the relevant content and, in the callback, do contenido.update(contentFromServer).
Looking at the source code of the example, installing and playing with it locally will help a lot.
Related
I am using ExtJS 6.0.1. I have my view port with center and east region configured with Ext.tab.Panel. I use a button to show and hide the center and north region. I could do that perfectly with show() and hide() methods. Is there a way to animate the view by sliding in any direction
xtype : 'app-main',
controller : 'main',
viewModel : {
type: 'main'
},
layout : {
type: 'border'
},
initComponent: function(){
var me = this;
Ext.applyIf(me,{
items : [{
region : 'center',
xtype : 'layoutP1',
split : true,
flex : 1
},{
region : 'east',
xtype : 'layoutP2',
layout : 'fit',
split : true,
hidden : true,
flex : 1
}]
});
I use a button at the footer to show/hide the panel in center and east region
onClickP1: function() {
this.getP2layout().flex = 2000;
this.getP1layout().show();
this.getP2.hide();
},
onClickP2View: function() {
this.getP2layout().flex = 2000;
this.getP1layout().flex = 2000;
this.getP1layout().hide();
this.getP2layout().show();
}
With this I can able to show and hide the panel but i need to animate sliding from left to right /right to left based on the region.
And is there a way to do the same using Splitters?. I can see Panel by default it comes with splitter to collapse and expand the panel.
For this you need to use slideIn on dom element (panel/veiw).
slideIn slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the Ext.fx.Anim class overview for valid anchor point options.
Usage:
// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the left with a 2-second duration
el.slideIn('l', { duration: 2000 });
// common config options shown with default values
el.slideIn('r', {
easing: 'easeOut',
duration: 500
});
In this FIDDLE, I have created a demo. I hope this will guide you to achieve your requirement.
Code Snippet
Ext.create('Ext.tab.Panel', {
height: window.innerHeight,
renderTo: document.body,
items: [{
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
itemId: 'p1',
layout: 'fit',
split: true
}, {
// xtype: 'panel' implied by default
title: 'East Region is collapsible',
layout: 'fit',
region: 'east',
itemId: 'p2',
xtype: 'panel',
split: true,
hidden: true
}],
buttons: [{
text: 'P1',
disabled: true,
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}, {
text: 'P2',
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}]
}],
//For hide/show view on basis of button click P1/P2
doHideShow: function (btn) {
btn.setDisabled(true);
if (btn.getText() == 'P1') {
this.down('#p1').show().setWidth('100%').getEl().slideIn('l');
this.down('#p2').hide();
this.down('[text=P2]').setDisabled(false);
} else {
this.down('#p2').show().setWidth('100%').getEl().slideIn('r');
this.down('#p1').hide();
this.down('[text=P1]').setDisabled(false);
}
}
});
I just started using ExtJS 3.4 version. And I was not sure how to access the items within the panel when there is no id or itemId assigned to it. I have used Ext JS 4.2 before but I need to use 3.4 version for now.
In my case, I am using border layout here. I have a tree panel on the east region and a tabpanel in the center region. And I want to update the center region dynamically with grids or forms based on the tree node clicked.
here is my code for the tabpanel
{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
And here is the complete code that I tried
First ExtJs Page
Ext.onReady(function () {
Ext.namespace('Class');
Class.create = function() {
return this.init(config);
}
};
Ext.namespace('FirstOOPS');
FirstOOPS = Class.create();
FirstOOPS.prototype = {
init: function (config) {
var store= new Ext.data.ArrayStore({
fields: [{name: 'C1'},{ name: 'C3'}, {name: 'C5'}]
});
var myData= [['abcdC11','C3','C5'],['asdf','C3_asdf','C5_asdf']]
store.loadData(myData);
var gridpnl= new Ext.grid.GridPanel({
layout: 'fit',
height: 500,
width: 500,
store: store,
columns:[
{header: "C1", dataIndex: 'C1'},
{header: "C3", dataIndex: 'C3'},
{header: "C5", dataIndex: 'C5' }
]
});
var mainPanel = new Ext.Panel({
layout : 'border',
items : [
{
region: 'east',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Grid',
leaf: true
}, {
text: 'Form',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
if(n.text=='Grid'){
Ext.Msg.alert(n.text);
}
}
}
},{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
]
});
new Ext.Viewport({
layout : 'fit',
items : [mainPanel]
});
}
};
var firstObj = new FirstOOPS();
});
</script>
</body>
</html>
Can someone tell me how to access this without id, so that I can update the tabpanel dynamically or create new tabs based on the tree node click.
Thanks in advance
you can use the following code to access tabpanel without using id or items id
this.up().items.items[1]
to test the above code I am alerting the title of the tab panel by following code
alert(this.up().items.items[1].title);
it will alerts the title of the tab panel
I have a ExtJs 4.1 tree panel. The tree is having multiple nodes. Now I allow user to perform contains search on tree node. So if I run the search on word ASP.NET, the search should highlight all the nodes who's text contains key word ASP.NET
How Can I do this?
Thank you
You need to search for children from the TreePanel's root node, then use RegEx to test the value of the Node vs your search text.
Working Example
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Javascript", leaf: true },
{ text: "ASP.net", leaf: true },
{ text: "Also ASP.net", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
multiSelect: true,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock : 'bottom',
items : [{
text: 'Search for ASP.net',
handler: function(){
var me = this,
panel = me.up('panel'),
rn = panel.getRootNode(),
regex = new RegExp("ASP.net");
rn.findChildBy(function(child){
var text = child.data.text;
if(regex.test(text) === true){
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
Working jsFiddle : http://jsfiddle.net/tdaXs/
TIP: Take note of the second parameter in the .select() method of the TreePanel's selectionModel. This is the optional keepExisting parameter, which must be set to true when manually selecting nodes. See the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select
Hope this helps!
Initially this panel had accordion layout. Both the child panels where shown then. But as soon as I changed it to vbox, it shows the second panel. But no tree inside!
See the image.
Related Code
OurApp.online_tree_store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : []
}
});
OurApp.online_tree = Ext.create('Ext.tree.Panel', {
store : OurApp.online_tree_store,
title : 'Online',
region: 'north',
useArrows : true,
rootVisible : false,
listeners : {
itemdblclick : contactitemdblclick
}
});
/// Note: Offline tree is exactly the same as online tree.
Ext.create('Ext.panel.Panel', {
closable : false,
width : 300,
maxWidth : 400,
itemId : 'viewport-contacts',
constrain : true,
layout : 'accordion', // <--- layout changed to vbox or border
region : 'west',
hidden : true,
border : true,
defaults : {
height : '50%', // <--- used for vbox
},
tbar : [{
xtype : 'button',
text : 'Sign out',
iconCls : 'icon-disconnect',
handler : function() {
}
}],
items : [OurApp.online_tree, OurApp.offline_tree],
});
height: '50%' should be flex: 1.
You'll also want to specify align: 'stretch'
Ext.require('*');
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'P1',
flex: 1
}, {
title: 'P2',
flex: 1
}]
});
});
I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window and not really going to a new screen. I have hardcoded the store to make sure there is data when I start the application and it still prints it outside of the viewable area.
Here is my Ext.data.Store:
var store = new Ext.data.Store({
model: 'jobSummary',
storeId: 'jobStore',
data : [{title: 'This is test'},
{title: 'This is test2'},
{title: 'This is test3'}]
});
Here is the list that I am using it in:
SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
dockedItems : [ {
xtype : 'toolbar',
title : 'WTJ',
dock : 'top',
items : [ {
xtype : 'button',
text : 'Back',
ui : 'back',
handler : function() {
//back button controller
},
scope : this
} ]
} ],
items : [ {
xtype : 'list',
emptyText : 'No data available.',
store : 'jobStore',
itemTpl : '<div class="list-item-title">{title}</div>'
+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure : function(record) {
},
grouped : false,
scroll : 'vertical',
fullscreen : true
} ],
initComponent : function() {
SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
}
});
And i am calling this list panel from my submit button handler which is:
var jobsList = new SearchJobsForm.jobsList();
The full code I have pasted on this link for better visibility:
http://pastebin.com/a05AcVWZ
Ok,
SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results.
In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.
First let's instantiate the jobsList
// It has the id ( id: 'jobsListId')
var jobsList = new SearchJobsForm.jobsList();
then you should put all your inputs into a form (xtype : formpanel,
id: 'searchFormId')
And add the resultPanel just after the form
Here is the code
SearchJobsForm.form = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
id: 'searchForm',
floating: true,
width: 250,
height: 370,
scroll: 'vertical',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [
{
xtype: 'formpanel', // 1. this is the added formpanel
itemId: 'searchForm',
id: 'searchFormId', // this id is important
items: [
{
xtype: 'textfield',
...
}, {
xtype: 'textfield',
...
},
// all your inputs
]
},
// 2. add here the results panel : jobsList
jobsList
], // the code continues inchanged
dockedItems: [{
...
- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form
// here it comes
Ext.util.JSONP.request({
url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
format: 'json',
callbackKey: 'callback',
params : searchCriteria,
callback: function(data) {
console.log('callback');
// Call your list-filling fonctions here
// jobsList.fill(data);
Ext.getCmp('searchFormId').hide();
Ext.getCmp('jobsListId').show();
},
failure: function ( result) {
console.error('Failed');
}
});
For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.