ExtJs 5.0 - appending html in Viewport - extjs

I'm trying to build a rating system on my help page using following rating widget
https://github.com/christophe-g/Ext.ux.widget.Rating
I've a viewport with following sections:
/********* WEST REGION *********/
var helpTree = Ext.create('Ext.tree.Panel', {
id : 'helpTree',
useArrows : true,
region : 'west',
collapsible : true,
listeners :{
itemclick : function(node, record, item, index, e){
// Get contents using AJAX and update it in center region of viewport.
getAndUpdateHelpContents(record.get('id'));
}
},
});
/******** CENTER REGION ********/
var helpTab = Ext.create ('Ext.tab.Panel', {
id : 'helpTab',
region:'center',
activeTab:0,
items:{
id : 'helpItemTab',
title: 'Contents',
html: '<h4>Welcome to Help System<h4>',
},
});
var rating = new Ext.ux.widget.Rating({
id : 'ratingField',
fieldLabel : 'Rating',
allowBlank : false,
value : 2.5,
titles: {
'0': 'poor',
'1.4': 'medium',
'3': 'excellent',
'5': 'perfect'
},
});
/******** SOUTH REGION ********/
var ratingTab = Ext.create ('Ext.form.Panel', {
id : 'ratingTab',
region:'south',
layout : 'anchor',
margins: '5 5 5 0',
items:[rating]
});
/******** VIEWPORT ********/
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [
helpTree,
helpTab,
ratingTab
]
});
Now in this design, rating widget is in south region. Instead, I wish to remove south region and append rating widget at the bottom of the contents of center region after calling "getAndUpdateHelpContents" function as this function clears and updates the contents in center region whenever user clicks a link on left/west region/tree. Following is this function in jquery
function getAndUpdateHelpContents(id, text) {
htmlContents = "<p>This is Test</p>";
$("#helpItemTab").html(htmlContents);
}
Pls help as in how to append this rating at the end of center region contents (after dynamic loading)!
Thanks.

Generally, you do not need any html markup in Ext to add a component to it. The required markup is generated by Ext and by the widget automatically.
When you have a container (Panel is also a container) then you can call ct.add(rating) - the widget is added to the panel as the last item.
You probably don't want to add it on each click in the listener you indicated.

Related

Want to reload ExtJs tab panel each time it is rendered

I'm creating a set of ExtJs Panels & TabPanel in a jsp page as:
//left panel
var leftpanel = new Ext.Panel({
id :'leftpane',
region:'west',
width: leftPaneDefaultWidth,
layout : 'fit',
header : false,
split:true
});
//right tabpanel
var rightpaneltab = new Ext.TabPanel({
id:'rightpanetabs',
border:false,
enableTabScroll: true,
region:'center'
});
//parent panel
var toppanel = new Ext.Panel({
id : 'main',
layout:'border',
renderTo : 'parentDiv',
items: [ leftpanel , rightpaneltab ]
});
Owing to a business requirement, I need to refresh/reload the contents within the rightpaneltab defined above.
Could someone pls suggest an optimal away of achieving this?
You can listen to events like painted, show, initialize and some others.
Check the documentation here: https://docs.sencha.com/extjs/6.7.0/modern/Ext.tab.Panel.html#event-initialize
initialize - Fires when the component has been initialized
painted - Fires whenever this Element actually becomes visible (painted) on the screen. This is useful when you need to perform 'read' operations on the DOM element, i.e: calculating natural sizes and positioning.
show - Fires whenever the Component is shown
Usage:
//left panel
var leftpanel = new Ext.Panel({
id :'leftpane',
region:'west',
width: leftPaneDefaultWidth,
layout : 'fit',
header : false,
split:true
});
//right tabpanel
var rightpaneltab = new Ext.TabPanel({
id:'rightpanetabs',
border:false,
enableTabScroll: true,
region:'center',
listeners: {
painted: function () {
// reload the content here
}
}
});
//parent panel
var toppanel = new Ext.Panel({
id : 'main',
layout:'border',
renderTo : 'parentDiv',
items: [ leftpanel , rightpaneltab ]
});

How to add layout dynamically in Exjs4?

I am working in Extjs4.And I am getting stuck at a point which is how to add accordion layout dynamically in Exjs4? I am using layout vbox and hbox but I als want to add accordion to east region.I tried a lot? but not getting succeed please some one give me some suggestion how to do it?
Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
// closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},// end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},// end of region center
{
region:'east',
id:'eastId',
flex:.3,
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu // used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port
I want to add accordion layout to east region dynamically.please give me some suggestion?
Why can't you just set the accordion layout in the config?
E.g.
{
region: 'east'
,layout: 'accordion'
,items: [
// ...
]
}
If you really want to change the region's layout to accordion dynamically, the problem you will encounter is that accordion layout needs to tweak its child components at render time. Or it will be broken. The simplest solution would be to add a copy of the original components, so that they can be rendered again.
You will also need to wrap your child components in another container, because accordion layout will need to be fitted in its parent container in order to work properly.
So, first you should change your east region config as follow:
{
region: 'east'
,id: 'eastId'
// set fit layout for children layout to work as intended
,layout: 'fit'
// wrap children into another container, that we can replace later
,items: [{
xtype: 'container'
,itemId: 'innerCt' // for easy access
,items: [
// ... your previous items
]
}]
// ... remaining of your region configuration
,flex: .3
}
And here's a function that changes east region's layout dynamically:
function changeEastLayout() {
var panel = Ext.getCmp('eastId'),
innerCt = panel.down('#innerCt'),
itemsCopy = [];
// make a copy of the item so accordion layout can render them like it likes
innerCt.items.each(function(item) {
itemsCopy.push(item.initialConfig);
});
// remove previous wrapper
panel.removeAll();
// adds a new wrapper with accordion layout containing the items copy
panel.add({
layout: 'accordion',
items: itemsCopy
});
}
If you wanted to change to another layout that doesn't need to affect the rendering of its children (e.g. hbox) you could use the original items instead of copies:
function changeEastLayout() {
var panel = Ext.getCmp('eastId'),
innerCt = panel.down('#innerCt'),
items = innerCt.removeAll(false); // autoDestroy to false
panel.add({
layout: 'vbox'
,items: items
});
// remove the wrapper container after in order to avoid destroying children
panel.remove(innerCt);
}

How to make sencha components width device independent

I created register panel and added toolbar with button during view initialization, In controller i am creating form panel and adding it to the register panel dynamically.
The toolbar in register panel is adjusting based on device screen but, The form panel width is not changing.
If i set width for the form panel, The form panel is floating and width remains the same.
This is what i done so for.
Ext.define('Form.view.RegisterForm',{
extend : 'Ext.Panel',
xtype : 'register',
id : 'register',
initialize : function() {
console.log("register init");
var submit = {
xtype : 'button',
width : '100px',
ui : 'action',
text : 'Submit',
handler : this.onSubmitTap,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
id : 'registerToolbar',
title : 'Form',
items : [{
xtype : 'spacer'
}, submit]
};
this.add(topToolbar);
},
config : {
fullscreen : true,
layout : {
type : 'vbox'
},
title : 'Register'
},
onSubmitTap : function() {
console.log("onSubmit");
this.fireEvent('submitCommand', this);
}
});
In Register controller i adding fields dynamically
// RegisterFormController.js
oncreateForm : function() {
var form = {
xtype: 'formpanel',
flex : 1,
id: formId,
name: formId
};
Ext.getCmp('register').add(form);
}
// calling onCreateComponent method with xtype, label, value and fromId
onCreateComponent : function(fxtype,flabel,fname,fvalue,id) {
Ext.getCmp(id).add({
xtype: fxtype,
label: flabel,
name: fname,
value: fvalue,
labelWrap:true
});
}
In case any of you came up with same problem.
The mistake i did was "I added the 4 radio buttons in a hbox panel so width of that panel increased that's why the whole form panel not displaying properly in different devices".
After i changed the panel layout as vbox, The problem solved.

Sencha - combining dataview with button in same view

I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});

ExtJS Pop-up Window Form data loading

I use Grid panel. When I select the row in the grid I get the following results:
If I render the Form in 'document.body' everything is OK, and form
fields are filled.
If I, same Form start in Window panel, Form fields are empty.
When I use both, Form which is rendered in the 'document.body' is
closed, and Form fields in Window are filled.
Where I make mistake.
// Grip panel part
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record) {deleteWindow.show();}
}
})
// End Grid panel part
var myForm = new Ext.form.FormPanel({
title:"Basic Form",
width:425,
frame:true,
items: [
new Ext.form.TextField({
id:"to",
fieldLabel:"To",
width:275,
allowBlank:false,
blankText:"Please enter a to address",
readOnly: true
}),
new Ext.form.TextField({
id:"subject",
fieldLabel:"Subject",
width:275,
allowBlank:false,
blankText:"Please enter a subject address",
readOnly: true
}),
],
buttons: [
{text:"Cancel"},
{text:"Save"}
]
});
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm
});
var id_test = 2; // This is only for this problem
//myForm.render(document.body); // When using this code everything is ok, and form fields are filled
myForm.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
JSON data
{success:true,results:[{"id_test":"1","to":"a","subject":"aa"}]}
I would suggest the following changes to the code:
In place of using the id property on the TextField (say, id: 'subject'), use name property (name: 'subject')
Just curious....since you are handling the rowselect event on the grid, you might want to load the selected record in the form panel rather than loading it again. If this is the case, then you may call the loadRecord() method on the form panel and pass the record object to it and then call the show() method on the window
I figured out that when load is called on form, ExtJS tries to access form dom element to determine form method. I've found 2 solutions:
Add method to the form config
Load data to form after window is showed
Here is code for second solution:
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm,
listeners: {
show: function() {
var form = this.items.get(0);
form.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
}
}
});
deleteWindow.show();

Resources