Currently I am learning ext.js 6 and I have a quastion to ask.
I want to build a tree-like menu and from examples I know how to build all kinds of trees. But how can I change a view when user clicks on different leefs in a tree? I know I need controller(viewcontroller) and handlers to work with events (onClick and such) but how to render views from there?
Thank you.
You need to use add() function for that:
add( component ) : Ext.Component[]/Ext.Component
Adds Component(s) to its parent.
You need to pass the view to be rendered as parameter
Eg. Adding a formpanel & button directly to the view port:
Ext.Viewport.add([
{
xtype:'formpanel'
},
{
xtype:'button'
}
]);
Im my application (its use ExtJS 4 actually, but I guess idea is the same) I do something like this:
var viewport = Ext.create('Ext.container.Viewport', {
alias: 'widget.viewport',
layout: 'border',
items: [
// Its my main menu, displayed on all pages
portalToolbar,
{
xtype: 'panel',
itemId: 'mainPanel',
layout: 'fit',
region: 'center'
}
]
});
And on menu item click I remove any content from main panel and add new one, like this:
// remove previous page from main panel,
// think about `abort()`ing all ajax requests, clear intervals and so on along with this
mainPanel.removeAll();
// `currentInterface` is any component that is one of the pages of my application
mainPanel.add([currentInterface]);
Also you can take a look at Ext.util.History and on menu click add new token to history and on history change event open application page like described above.
Related
I have a treepanel with a widget column. The widget column is defined like so:
{
xtype: 'widgetcolumn',
width: 80,
dataIndex: 'slider',
widget: {
xtype: 'slider'
},
onWidgetAttach: function(col, widget, rec) {
widget.setVisible(rec.get("leaf"));
}
}
So, the task is to show or hide slider widget, depending on the type of the node. If it is a leaf node, then the widget should be visible, otherwise it should be hidden. The way I do it is through onWidgetAttach method. But this is what I get as a result:
Please, pay attention to some leaf nodes that do not have a widget. Unfortunatelly, I can not provide a reproducible example, because of the random nature of this bug. If, for example, I refresh the panel multiple times, then in some rows widgets appear, and in some others disappear. It behaves just like a random number generator. So, what may be wrong with that and how can I fix it?
This is my first time working with datagrids so please forgive anything that is unclear.
I have json text that is being implemented in a dojo datagrid (dojox.grid.DataGrid).
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xAgent.xsp"});
var layout = [
{cells:[ [
{field:'firstname', name:'First'},
{field:'lastname', name:'Last'},
{field:'policy', name:'Policy'},
{field:'lastaccessed', name:'Last Accessed'}
] ], noscroll:false
}
];
grid = new dojox.grid.DataGrid({
store: jsonStore,
structure: layout,
rowsPerPage: 50,
autoHeight: 50
}, '#{id:gridNode}');
grid.startup();
The grid itself is created perfectly fine and all data is displayed as desired, but I would like for one of the fields (the 'policy' field to be specific) to link towards another page. I need to include the information within the 'policy' field when I redirect as the policy number will be used in the next page.
In other words, I want all of the policy fields within my table to have their own unique external link that will contain the policy number from that respective field. The easiest way I can think of doing that is by changing the layout variable that feeds into the DataGrid's structure parameter, but there might be an easier way. If anyone has any ideas I would be very grateful.
Thanks in advance.
You can use formatter to create links, dojo buttons etc inside the grid.
Formatter is a JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML or even a dijit widget.
So in your case, add a formatter to policy column
{field:'policy', name:'Policy', formatter: createLink},
Then define the function with necessary external link. For example:
function createLink(data){
return (""+data+"");
}
Reference: http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#id3
I'm a little new to Extjs and I'm trying to figure out the proper way to show/hide elements.
I have the following elements:
layout: 'card',
items:
[
{
xtype: 'Panel1'
},
{
xtype: 'Panel2'
}
]
In my controller I have these references setup:
refs: [
{
ref: 'p1',
selector: 'Panel1'
},
{
ref: 'p2',
selector: 'Panel2'
}
],
Each panel has a form and two buttons at the bottom. Panel 2 is hidden in the beginning. Now I want to show Panel 2 and hide Panel 1. First I tried:
this.getp1().hide();
this.getp2().show();
...and that did nothing. Then, I found this SO question and tried out the following:
this.getp1().getEl().hide();
this.getp2().getEl().show();
which partially worked except that it failed to also show the buttons in Panel2. Am I supposed to get every single element and show() each of them? I must be missing something.
try with:
this.getP1().hide(); //the first letter should be uppercase
this.getP2().show();
The parent panel of my two problem items was of a layout: 'card'. According to the sencha docs on the Card layout only one panel will be shown at a time. Therefore, the proper way to show other items is not via the show/hide function, but rather calling
PARENT_PANEL.getLayout().setActiveItem(n); That was causing my p2 panel to always be hidden and not affected by the show() method.
I need to display a form in the rowexpander. In order to do that I am planning to create a temporary div as part of rowexpander and then attach a form to it during expandbody event. However, I am confused as to how to register expandbody listener for RowExpander.
Please help me.
Thanks
Are you sure you don't want to use the regular roweditor? Or popup a window with the record loaded into the form?
EDIT:
If that's all you want then just follow the example from Sencha.
Essentially all you do is specify a template of how you want your data rendered in the plugin config. You don't need to listen to expand events just to render data.
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
]
}],
Use 'pluginId' property to get access to the RowExpander plugin object.
Here is an example taken from the RowExpander docs
var grid = Ext.create('Ext.grid.Panel', {
plugins: [{
ptype: 'cellediting',
clicksToEdit: 2,
pluginId: 'cellplugin'
}]
});
// later on:
var plugin = grid.getPlugin('cellplugin');
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.