I'm using Extjs 4.2.1, and i just want to change all LOADING message from my grids.
What should i do? I had read something about mask, but in other version(Extjs 3.0).
Thank you so much
If you really want all grids to display this new loading message (ones that are already created and all ones you will create in the future), you should override the main gridview class like this using the loadingText property:
Ext.define("NameDoesntMatterView", {
override: "Ext.grid.View",
loadingText: "I'm loading or something..."
});
If you only want it on a single grid, use the viewConfig:
var myGrid = Ext.create("Ext.grid.Panel", {
viewConfig: {
loadingText: "I'm loading or something..."
}
});
Related
I like to separate MessageBox tab to tab. One MessageBox will shown in one particular tab and will hidden from all other tab(s). What is now show as global in application. Is there any way to show message under every tab(s) in application.
You cannot use a messagebox with different content on the separate tabs at the same time while messagebox is a singleton, but you can create your own messagebox, extending from Window and render each instance to the separate tab. Here is example with native Window, but it will work the same with extended component.
You cannot directly use Ext.window.MessageBox to achieve what you want. On the other hand, you can create a small utility class that extends Ext.window.Window, with a static function that makes it appear with the title, message, and buttons as parameters, and use the constrainTo option to make it belong to your tab.
This way, you have a window that can be "owned" by a tab instead of appearing globally
Here i create a function to show message as messagebox. And i can use it whatever i need.
ShowPrivateMessage: function(title, widthValue, heightValue, msgText, renderTabId){
Ext.create("Ext.window.Window",{
title : title,
width : widthValue,
height: heightValue,
html : '<span style="font-size: small">'+ msgText + '</span>',
renderTo: renderTabId,
resizable: false,
draggable: false,
bodyPadding: '10px',
listeners:{
afterrender: function(sender, eOpt){
var parentWindow = Ext.getCmp(renderTabId);
parentWindow.disable();
}
,close: {
fn:function(ctrl,opt){
var parentWindow = Ext.getCmp(renderTabId);
parentWindow.enable();
}
}
}
}).show();
}
Our testing team require IDs or class values to be set on the HTML elements in our message popup boxes. This is for their automated tests.
I can pass in a class value for the dialog panel by passing in a cls value like so:
Ext.Msg.show({
title:'Reset Grid Layout',
msg: 'Are you sure that you want to reset the grid layout?',
cls:'Reset-Grid-Layout-Message',
buttons: Ext.Msg.YESNO,
fn: function (response) {
if (response == 'yes') {
}
},
icon: Ext.window.MessageBox.QUESTION
});
Now we also need it on the buttons, and also on the text being displayed. Is there some way of getting a cls value onto the buttons?
I was thinking it may be possible to expand the button parameter into something like :
buttons : [{name:'but1', cls:'asdf'}, {name:'but2', cls:'asdf2'}]
But google is not giving me back anything useful.
If your testing team uses Selenium for their automated test, adding ids/classes in every component could be difficult for both of you.
Overriding components in Ext is a good solution, but I don't recommend this because it will affect all your components. Unless you know what you're doing.
I suggest, extend Ext.window.MessageBox and generate classes for your buttons based on your parent cls.
// Put this somewhere like /custom/messagebox.js
Ext.define('App.MyMessageBox', {
extend: 'Ext.window.MessageBox'
,initConfig: function(config) {
this.callParent(arguments);
}
,makeButton: function(btnIdx) {
var me = this;
var btnId = me.buttonIds[btnIdx];
return new Ext.button.Button({
handler: me.btnCallback
,cls: me.cls + '-' + btnId
,itemId: btnId
,scope: me
,text: me.buttonText[btnId]
,minWidth: 75
});
}
});
To use:
App.Box = new App.MyMessageBox({
cls:'reset-grid-layout'
}).show({
title:'Reset Grid Layout'
,msg: 'Are you sure that you want to reset the grid layout?'
,buttons: Ext.Msg.YESNO
,icon: Ext.window.MessageBox.QUESTION
});
Your buttons will have reset-grid-layout-yes and reset-grid-layout-no class.
You can do the same with other components you have. Check out the Fiddle. https://fiddle.sencha.com/#fiddle/7qb
You should refer to the API
cls : String A CSS class string to apply to the button's main element.
Overrides: Ext.AbstractComponent.cls
You can also use the filter on right side (not the one in the right top corner). Just type cls and you will see all properties, methods and events containing cls (note that you see by default just public members, use the menu on the right of this searchfield to extend this)
Edit
If you just need it for testing purpose I would recommend to override the responsible method. This should work (untested!)
Ext.window.MessageBox.override({
buttonClasses: [
'okCls', 'yesCls', 'noCls', 'cancelCls'
],
makeButton: function(btnIdx) {
var btnId = this.buttonIds[btnIdx];
var btnCls = this.buttonClasses[btnIdx];
return new Ext.button.Button({
handler: this.btnCallback,
cls: btnCls,
itemId: btnId,
scope: this,
text: this.buttonText[btnId],
minWidth: 75
});
}
});
Are there any color picker for extjs (such as photo shop color picker) that developed only on extjs (not in jQuery).
I’m using (Ext.ux.ColorPicker) ux.colorpicker but, it can’t fill my requirement.
Thanks,
Thanuja.
ExtJS has a simple colorpicker.
xtype: 'colorpicker'
From the help:
Ext.create('Ext.picker.Color', {
value: '993300', // initial selected color
renderTo: Ext.getBody(),
listeners: {
select: function(picker, selColor) {
alert(selColor);
}
}
});
You can also look at this one which is more Photoshop-esque and works with Ext JS 4x+, but does require canvas support.
I realize this is an old question. but nevertheless for people looking to have these two libraries play nice... here is what I did. The problem lay in that jscolor expects all the inputs with class "color" to be available on window.load, which is called via jscolor.install(). Of course, ExtJs elements are not available at that time. Try this:
Ext.create("Ext.form.field.Text",{
renderTo: Ext.getBody(),
fieldCls:"color",
name:"TestPost",
listeners: {
afterrender: {
delay:200,
fn:function(item){
jscolor.init();
}
}
}
});
Running jscolor.init() will start it all up. If you like, you can comment out the jscolor.install() call at the bottom of the jscolor.js file, so long as you call jscolor.init() as a listener that runs after the rendering of the textfield you want to be your color picker.
I've been unable to add Scroll Bars to two views I have displaying with Ext. Each View is an extension of a base view, and the base has autoScroll: true. I've verified that the elements are properly assigned an overflow: auto property.
I've done some searching around and found this question and after applying it's solution (even though I wasn't using this 'vbox' layout) it didn't solve my problem.
Here is the base view:
Ext.define('Our.extensions.baseList', {
extend: 'Ext.view.View',
itemSelector: 'div.postContainer',
autoScroll: true,
initComponent: function(){
this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div name="postContainer" class="postContainer">',
// Contains Layout for posts
'</div>',
{ // can run internal functions within a template
createButton: function(idPost){
// Creates layout for buttons and returns it
}
}
);
this.callParent(arguments);
}
});
And the two child views are:
Ext.define('Our.view.post.convList', {
extend: 'Our.extensions.baseList',
alias : 'widget.convList',
emptyText: 'No Conversation Followed',
title: 'Coversations',
initComponent: function(){
this.store = new Ext.create('Ext.data.Store', {
id:'convStore',
model: 'Our.model.Post',
data: []
});
this.callParent(arguments);
}
});
And:
Ext.define('Our.view.post.postList', {
extend: 'Our.extensions.baseList',
alias : 'widget.postList',
emptyText: 'No Posts',
title: 'Posts'
});
Ultimately, my question is does Ext.view.View actually support the autoScroll config property (or does it just ignore it as it seems to), which is listed in the Sencha docs as a valid config property. I know that it doesn't support the layout config hence why the linked questions solution failed to work. If it does support it, how would I go about getting the scroll bars to show up?
EDIT
Some things I've discovered in my attempts to come up with a solution, setting a size on the View itself works as long as the size is hard coded (a set number of pixels). Such as adding the config: height: 500, or a CSS class with height: 500px; but percentage sizes through CSS classes don't work at all - they don't even size the component.
SECOND EDIT
As I stated in comments to the first answer received, the component was getting the size 1063 (a note is that, the development environment is on a 1080x1920 monitor (in portrait) and with the JavaScript Console running in Chrome it's the height of the visible frame is 1063 pixels. By 'visible' I mean the postPanel that the Views are being added to.
I have found a temporary solution, unfortunately I don't think it's ideal for an actual production release - I'm using the refresh of the XTemplate to set the height of the component to the height of the panel to that of the postPanel (which sets the same height as it has been receiving) and this seems to force it to apply the scroll bars. I also added a listener to the resize event of the postPanel that fires the refresh event of the two Views.
The additions...
to the child views:
listeners: {
refresh: function() {
var parent = this.up('postPanel');
if (parent != undefined) {
this.setSize({
width: undefined,
height: parent.getHeight()
});
}
}
}
and to the postPanel:
listeners: {
resize: function() {
var postList = this.down('postList');
if (postList != undefined) {
try {
postList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
var convList = this.down('convList');
if (convList != undefined) {
try {
convList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
}
}
The main reason I feel this is not an ideal solution is that it's broken the views automatic resizing to half the width of the parent (and setting the width to parent.getWidth() / 2 in the this.setSize() call in the refresh event doesn't alter the size at all, even if the parent is resized. In addition to that, I'm not sure if this will add any overhead to slower computers or not.
So the autoScroll should work as long as the component knows the size of the box it is supposed to fit in. If you don't want to set a specific box size try placing your view component into a viewport with fit layout. Then the viewport will dictate the size of the box and your view should start scrolling in the allocated space. This principal is used for all containers - some one somwhere must specify the size of the box. Viewport is the magic component that figures out the size of the full screen by default.
Try to place each of your views in a container with layout: 'fix'. Then the autoScroll: true of the views will force the scroll bars, when the content requires it.
I'm trying to create a dynamic grid using ExtJS. The grid is built and displayed when a click event is fired then an ajax request is sent to the server to fetch the columns, records and records definition a.k.a store fields.
Each node could have different grid structure and that depends on the level of the node in the tree.
The only way I came up with so far is :
function showGrid(response, request) {
var jsonData = Ext.util.JSON.decode(response.responseText);
var grid = Ext.getCmp('contentGrid' + request.params.owner);
if (grid) {
grid.destroy();
}
var store = new Ext.data.ArrayStore({
id: 'arrayStore',
fields: jsonData.recordFields,
autoDestroy: true
});
grid = new Ext.grid.GridPanel({
defaults: {
sortable: true
},
id: 'contentGrid' + request.params.owner,
store: store,
columns: jsonData.columns,
//width:540,
//height:200,
loadMask: true
});
store.loadData(jsonData.records);
if (Ext.getCmp('tab-' + request.params.owner)) {
Ext.getCmp('tab-' + request.params.owner).show();
} else {
grid.render('grid-div');
Ext.getCmp('card-tabs-panel').add({
id: 'tab-' + request.params.owner,
title: request.params.text,
iconCls: 'silk-tab',
html: Ext.getDom('grid-div').innerHTML,
closable: true
}).show();
}
}
The function above is called when a click event is fired
'click': function(node) {
Ext.Ajax.request({
url: 'showCtn',
success: function(response, request) {
alert('Success');
showGrid(response, request);
},
failure: function(results, request) {
alert('Error');
},
params: Ext.urlDecode(node.attributes.options);
}
});
}
The problem I'm getting with this code is that a new grid is displayed each time the showGrid function is called. The end user sees the old grids and the new one. To mitigate this problem, I tried destroying the grid and also removing the grid element on each request, and that seems to solve the problem only that records never get displayed this time.
if (grid) {
grid.destroy(true);
}
The behaviour I'm looking for is to display the result of a grid within a tab and if that tab exists replaced the old grid.
Any help is appreciated.
When you are trying to add your grid to the tab like this:
html:Ext.getDom('grid-div').innerHTML,
Ext is not aware of it being a valid grid component. Instead, you are simply adding HTML markup that just happens to look like a grid, but the TabPanel will not be aware that it is a grid component.
Instead you should add the grid itself as the tab (a GridPanel is a Panel and does not need to be nested into a parent panel). You can do so and also apply the needed tab configs like this:
Ext.getCmp('card-tabs-panel').add({
Ext.apply(grid, {
id: 'tab-' + request.params.owner,
title: request.params.text,
iconCls: 'silk-tab',
closable: true
});
}).show();
BTW, constantly creating and destroying grids is not an ideal strategy if you can avoid it. It might be better to simply hide and re-show grids (and reload their data) based on which type of grid is needed if that's possible (assuming the set of grid types is finite).
A potential option is to use the metaData field on the JsonStore that allows dynamic reconfiguring of the grid columns as per new datasets.
From
One of the most helpful blog posts about this that Ive found is this one:
http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html and the original info is well documented at http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader