I have some problems with Extjs 4.1.1 while using loading mask.
I have created a custom window and on a button press it sets the loading mask
var options=Ext.create('Ext.window.window',{
title:'this window',
height:200,
width:100,
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
}
}).show();
options.setLoading('Loading...');
After the load mask is enabled,if I open another window the mask is displaced from its place which is not desirable.
How should I prevent other windows from affecting the loading mask.
Or should I put mask over the entire frame instead of just the window?
If creating duplicate windows are neccesarry, you can check the window is created before. If it exits, do not need to setLoading. Look at this: https://fiddle.sencha.com/#fiddle/tv5
var me = this;
var x = 50;
var button = Ext.create('Ext.button.Button', {
text: 'click',
renderTo: Ext.getBody(),
closable: true,
handler: function() {
me.options = Ext.create('Ext.window.Window',{
title:'this window',
height:200,
width:400,
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'panel',
html: 'here' // A dummy empty data store
}
});
me.options.show();
me.options.setXY([x+30, x+30]);
me.options.mask('Loading1...');
}
});
var button2 = Ext.create('Ext.button.Button', {
text: 'click',
renderTo: Ext.getBody(),
closable: true,
handler: function() {
me.options2 = Ext.create('Ext.window.Window',{
title:'this window',
height:200,
width:400,
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'panel',
html: 'here' // A dummy empty data store
}
});
me.options2.show();
me.options2.setXY([x+200, x+300]);
me.options2.mask('Loading2...');
}
});
Related
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
I am trying to create a dropdown with Jquery ,selectize and Extjs on a ExtJS panel
But when i click on the dropdown it shows half of the item inside the Panel, i need it to overlap the panel and display.
Ext js code for this panel is this
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program',
items: [{
xtype: 'textfield',
fieldLabel: 'Rank',
fieldCls : 'js-rank',
listeners: {
render : function () {
},
afterrender: function(){
$('.js-rank').parent().removeClass("x-form-text-wrap x-form-text-wrap-default");
$('.js-rank').removeClass("x-form-text x-form-text-default").select([{rank:'20',rankName:'20'},
{rank:'30',rankName:'30'},{rank:'40',rankName:'40'},
{rank:'50',rankName:'50'},{rank:'60',rankName:'60'},{rank:'70',rankName:'70'}]);
}
}
}],
});
});
Inspect Element is below
It worked when i did the following changes
$(jqueryObject).parents().removeClass('x-fieldset x-fieldset-body x-panel-body');
$(jqueryObject).removeClass("x-form-text x-form-text-default");
$(jqueryObject).parent().removeClass("x-form-text-wrap x-form-text-wrap-default");
i am not sure removing those classes is the right way to do that
I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:
var win;
var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile();
var data = {
f1: 'a',
f2: null
};
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'component',
autoEl: {
html: '<input type="text">'
},
listeners: {
render: function(_component) {
_component.getEl().on('keyup', function(e) {
//console.log(this);
console.log(this.dom.childNodes[0].value);
});
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data,
renderTo: Ext.get('hello-win')
}
]
});
}
win.show(this);
There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).
How can I display a list of links in this modal window?
You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox, vbox, etc.
Your code should look like this:
var win = new Ext.Window({
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'textfield',
enableKeyEvents: true,
listeners: {
keyup: function(c) {
console.log(c.getValue());
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data
}
]
});
Also you should consider using textfield component instead of creating textfield by using component with autoEl config.
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();
I'm using Ext JS 2.3.0 and have created the search dialog shown below.
The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):
How can I make the column display correctly when it's shown initially? The relevant code is shown below:
FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {
constructor: function() {
var queryTextField = new Ext.form.TextField({
hideLabel: true,
width: 275,
colspan: 2,
});
var self = this;
// the search query panel
var entitySearchForm = new Ext.form.FormPanel({
width: '100%',
frame: true,
layout:'table',
layoutConfig: {columns: 3},
items: [
queryTextField,
{
xtype: 'button',
text: locale["dialogSearch.button.search"],
handler: function() {
var queryString = queryTextField.getValue();
self._doSearch(queryString);
}
}
]
});
// the search results model and view
this._searchResultsStore = new Ext.data.SimpleStore({
data: [],
fields: ['name']
});
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
stripeRows: true,
autoWidth: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
colModel: colModel,
selModel: selectionModel,
hidden: false,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
handler: function () {
entitySearchWindow.close();
}
},
{
text: locale["dialogSearch.button.cancel"],
handler: function () {
entitySearchWindow.close();
}
}
]
});
// a modal window that contains both the search query and results panels
var entitySearchWindow = new Ext.Window({
closable: true,
resizable: false,
draggable: true,
modal: true,
viewConfig: {
forceFit: true
},
title: locale['dialogSearch.title'],
items: [entitySearchForm, this._searchResultsPanel]
});
entitySearchWindow.show();
},
/**
* Search for an entity that matches the query and update the results panel with a list of matches
* #param queryString
*/
_doSearch: function(queryString) {
def dummyResults = [['foo'], ['bar'], ['baz']];
self._searchResultsStore.loadData(dummyResults, false);
}
});
It's the same issue you had in an earlier question, the viewConfig is an config item for the grid panel check the docs , so it should be
this._searchResultsPanel = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
....other configs you need,
To be more precise the viewConfig accepts the Ext.grid.GridView configs, feel free to read the docs on that one too.
Otherwise this seems to be the only problem, and i refer the column width, not the gridpanel width. On the gridpanel you have a title and two buttons who doesn't seem to be affected. So i repeat the gridPanel's width is ok, it's the columns width issue.
Try to remove autoWidth from GridPanel configuration, because setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.
In addition you can try to call .doLayout(false, true) on your grid after it was rendered.
Try to add flex: 1 to your GridPanel