Develop Reference

Sencha Ext JS close panel on mobile

I know nothing about Ext.js but I am being tasked with enhancing some of our front end JavaScript that uses it. I have the following code:
xtype: 'fieldset',
docked: 'bottom',
flex: 1,
defaults: {
xtype: 'button',
style: 'margin: .5em',
flex: 1,
},
layout: {
type: 'hbox',
},
items: [{
text: 'Submit',
ui: 'plain',
itemId: 'shareOutButton',
cls: 'btn btn-primary',
action: 'submitShareListing',
},
{
text: 'Done',
ui: 'plain',
itemId: 'doneButton',
cls: 'btn btn-primary',
handler: function () {
this.up('ShareOutWindow').close();
},
}],
When the user clicks on the doneButton - I simply want to close the current panel (it has the ID of ShareOutWindow') that is displayed. I have tried several things .close(), .hide() etc. I am able to get a reference to an object using the this..... but I cannot figure out how to close or hide the panel once I get a reference to it.
I have also tried this function -- but the panel does not go away and I don't get an error message.
handler: function () {
this.up('ShareOutWindow').close;
},
Any help would be greatly appreciated

ExtJS remove text and add items into header after the panel collapsed

I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?
Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
UPDATE
In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150,
header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}
}
here is the fiddle
Thanks

Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
collapseMode:'placeholder',// set collapseMode to placeholder
split: true,
width: 300,
placeholder:{ // Try different components and layout configs
width:100,
items:[{
xtype:'button',
text:'Button 1'
}]
}
/*header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}*/
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});

The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.
So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.
I tried adding buttons to the header and the result was not visually nice, but at least they were created!
So I would suggest you use tools instead of buttons if you don't need text on them.

Getting the editor content - Ext-Js html editor

I'm new to Ext-Js and I've gotten a html editor with some plugins from github, now I've got a button on the editor that is supposed to pop an alert box with the contents of the text area.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
fieldLabel: 'Text editor',
height: 300,
plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
anchor: '100%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
I know I'm supposed to add
handler:function(){alert(someextjscodehere)}
but I have no idea what function returns it, nor can I find it on google...

You need to use the getValue method of the editor to retrieve its content.
handler is an option of the button.
You'll need a reference to the editor in the handler, to get its content. You can get it from the form with the findField method, or with a component query.
Here's how to update your code to alert the content of the editor when clicking the save button. I've added a second save button to show you the component query method. I've tested it in this fiddle.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
name: 'htmlContent', // add a name to retrieve the field without ambiguity
fieldLabel: 'Text editor',
height: 300,
/* plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
*/ anchor: '100%'
}],
buttons: [{
text: 'Save'
,handler: function() {
var editor = top.getForm().findField('htmlContent');
alert(editor.getValue());
}
},{
text: 'Save 2'
,handler: function() {
// You can grab the editor with a component query too
var editor = top.down('htmleditor');
alert(editor.getValue());
}
},{
text: 'Cancel'
}]
});
top.render(document.body);
});

Rows hidden in a grid JS EXT

I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?

I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }

Ext.form.Panel on top of a Toolbar has some white space around it

I have the following situation. I have an Ext.form.field.File (With the buttonOnly: true on top of a Ext.form.Panel which is on top of a Toolbar docked on an Ext.grid.Panel. The result of that is, the button has a completely different style then the toolbar, and the Panel seems to have some white space around button that you can see. Anyone have any suggestions as to how I can fix this, so that the style of the button and panel matches the toolbar (I use default styles, didn't modify anything).
EDIT: here is some code:
upload_button = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: "Upload File",
hideLabel: true,
listeners: {..}
});
button_panel = Ext.create('Ext.form.Panel', {
region: 'south',
items: upload_button
});
upload_toolbar = Ext.create('Ext.toolbar.Toolbar',{
width: 400,
region: 'north',
dock: 'top',
items: [ button_panel]});
grid_file = Ext.create('Ext.grid.Panel', {
title: 'File List',
region: 'center',
height: 300,
store: store_file,
dockedItems: [upload_toolbar],

You are using regions, but I cannot see any border layout.
Your problem is that you are trying to put a panel within a toolbar - it won't work.
You better off just putting an hidden upload form somewhere in your page; putting a normal button in the toolbar, and have the toolbar button press triggering a press on the hidden form.
So this would be the hidden upload form definition:
Ext.define('App.view.Assignments' ,
{
extend: 'Ext.panel.Panel',
alias: 'widget.assignments-panel',
hidden: true,
items: [{
xtype: 'filefield',
id: 'uploadField',
emptyText: 'Select a file',
fieldLabel: 'Assignment',
name: 'assignment-path',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},{
xtype: 'hidden',
id: 'submissionIdField',
name: 'submissionId',
value: ''
}],
});
And then when the visible update button is pressed you can do:
var uploadField = Ext.getCmp( 'uploadField' );
uploadField.fileInputEl.dom.click();