i have a EditorGridPanel which have more data and i am is 10th page of the grid i want to delete one record of this page and load the grid store with same page who can i do this ,if i simply load the grid its come to the first page with max and offset 25 and 0. please suggest me here is my code of grid:
var crashEventGrid = new Ext.grid.EditorGridPanel({
id : 'crashEventGrid',
store : ds,
layout : 'fit',
stripeRows : true,
cm : crashEventCM(),
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
loadMask : {
msg : 'Loading ..'
},
viewConfig: {
forceFit: true,
stripeRows: false,
emptyText : 'There are no items to show in this view.',
showPreview:true,
getRowClass: function(record) {
return record.data.type =="ERROR" ? 'app42-x-grid3-row' : '.none';
}
},
bbar : new Ext.PagingToolbar({
store : ds,
displayInfo : true,
pageSize : 25
})
});
For reloading store with same paging configuration you can use Ext.data.Store reload() method.
You can reload your grid's store like this:
crashEventGrid.getStore().reload();
Related
I want to disable a file Upload field dynamically. Like I have a variable say isUploadAllowed. If this variable is true only then FileUpload field is enabled and user can click Browse button.. Else this button is disabled.. How to do it in ExtJs 3.0? I did find few examples but they were all of ExtJs 4.. I have tried:
FileUploadField.setDisabled(true);
but it's not working..
Here is my code, I want to disable it on reset button click!
var fileUploadField = new Ext.ux.form.FileUploadField({
id : 'fileUpload',
name : 'upLoadedFile',
fieldLabel : 'Supporting File(s)',
width : 410,
convertToUpperCase : false,
tabIndex : 9,
allowBlank : true
});
var requestForm = new Ext.form.FormPanel({
id : 'requestForm',
labelAlign : 'right',
labelWidth : 130,
buttonAlign : 'right',
frame : false,
split : false,
fileUpload : true,
autoHeight : true,
collapsible : false,
width : 635,
monitorValid : true,
border : false,
bodyStyle : 'text-align:left;padding:10 10 10 10',
// Layout the form fields here.
items : [{
layout : 'column',
border : false,
items : [{
layout : 'form',
bodyStyle : "text-align:left",
border : false,
items : [fileUploadField]
}],
buttons : [{
id : 'submitBtn',
text : 'Submit',
formBind : true,
handler : doSubmit,
type : 'submit',
scope : this
}, {
text : 'Reset',
formBind : false,
type : 'reset',
handler : function() {
// disable file upload field
}
}]
});
try this:
fileUploadField.disable();
sometimes it works better. Also check letter case
I made a hasty comment before which was deleted. I had the same issue with the upload functionality not being disabled, even though I disabled the field. I realized that was due to Plupload which was enabled on that field, so to disable the upload functionality of the uploader I disabled Plupload:
uploader.disableBrowse(true);
So check if don't have some similar plugin working as well...and disable that as well. Hope that this will help someone...it gave me some headaches.
I'm using a buffered store/infinite scrolling on a grid I defined in my view folder without defining a store.
var grid = Ext.define('MyApp.view.metadata.ResultGrid' ,{
extend : 'Ext.grid.Panel',
alias : 'widget.resultgrid',
id : 'mygrid',
//columns, etc.
I then instantiate it on Ext.application with
{ xtype: 'resultgrid', width: '85%', hidden: true}
Then, in my controller I create my store...
var store = Ext.create('Ext.data.Store', {
storeId : 'resultsetstore',
model : model,
buffered : true,
pageSize : itemsPerPage, //50
autoLoad : true,
leadingBufferZone : 100,
remoteSort : true,
//etc.
...then reconfigure my store to the grid within that controller:
Ext.getCmp('mygrid').reconfigure(store);
Ext.getCmp('mygrid').show();
With this method, the records get loaded to my grid, but those records get limited to the pageSize and I lose the infinite scrolling ability.
Everything works fine if I create a random grid right after I create my store within the Controller. However, I want to keep my grid defined in it's own folder and use xtype to create it in a specific location in my app (between a mess of panels/components).
This works:
var grid = Ext.create('Ext.grid.Panel', {
title : 'Test Data',
loadMask : true,
store : store,
This doesn't:
var grid = Ext.create('Ext.grid.Panel', {
title : 'Test Data',
loadMask : true,
//...
});
grid.reconfigure(store)
I can't use the first method within my grid definition because the store isn't defined until a User submits a search form.
Is there a way to keep my grid defined in it's own folder, use my store, and keep infinite scrolling functionality without putting everything into one giant file?
I instantiated my grid right after my store, then added it to the panel I wanted it in.
var app = Ext.getCmp('my_container');
app.add({
xtype: 'resultgrid', width: '85%', region: 'center', height: 400, collapsible: false, store: store
});
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);
I have an EXT form that opens a window containing an GridPanel where the data store needs to get updated each time the form is submitted. The grid displays a list of files that are uploaded from the client computer. All of this works fine until I close the window and select a different group of files. The problem I am having is when the window containing the grid is closed and then re-opened, it is displaying the first set of files loaded previously instead of the new list of files submitted from the form. Hopefully this makes sense.
I have tried grid.getView().refresh() but that doesn't update the grid. Below is my code for the window, form, grid, and JSON store. If anyone has seen this before I would sure appreciate some advice. (apologies for the code formatting...had a lot of trouble getting it to be readable this text box)
//window that holds grid
SPST.window.POGCheckInWindow = Ext.extend(SPST.window.WindowBaseCls, {
id: 'POGCheckInWindow'
,initComponent:function() {
var config = {
title: 'Check In POG Files'
,width : 1000
,height : 500
,maximizable: false
,shadow : false
,closeable: true
,closeAction: 'hide'
,items: [{
xtype : 'checkin_results_grid'
,id : 'POGCheckInGrid'
,height : 450
,width : 990
,frame : true }
]};
Ext.apply(this, Ext.apply(this.initialConfig, config));
SPST.window.POGCheckInWindow.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('pog_checkin_window',SPST.window.POGCheckInWindow);
//function to submit the form, load the store and open the window containing the gridpanel
checkin:function() {
if (this.getForm().isValid()){
this.getForm().submit({
url: 'components/POG.cfc?method=uploadPOGTemp' + '&dsn=' + SPST_dsn
,method: 'GET'
,scope:this
,success: function(form, action){
var chkinwin = new SPST.window.POGCheckInWindow();
Ext.getCmp('POGCheckInGrid').getStore().load({params: {dsn: SPST_dsn,
pogfiles: action.result.pogfiles, project_id: action.result.project_id}
,callback: function(rec, options, success){
Ext.getCmp('POGCheckInGrid').getView().refresh();
}
});
chkinwin.show();
}
,failure:this.showError
,waitMsg:'Uploading files...'
});
}
}
// create the data store for grid
var chkstore = new Ext.data.JsonStore({
// JsonReader configuration
root : 'jsonlist'
,fields : chkfields
,id : 'chkstoreid'
// JsonStore configuration
,autoLoad : true
,remoteSort : true
,autoDestroy: true
,sortInfo: {
field: 'POGNAME',
direction: 'ASC'
}
,url : 'components/POG.cfc?method=getPOGTempFiles' + '&dsn=' + SPST_dsn
});
//grid that loads inside ext window
SPST.grid.POGCheckInGrid = Ext.extend(SPST.grid.GridPanelBaseCls, {
view: new Ext.grid.GridView({
getRowClass: function(rec, idx, rowPrms, ds)
{
return rec.data.VERSION_DSC === 'INVALID VERSION#' ? 'invalid-cls' : '';
}
}),
initComponent : function() {
var config = {
colModel : chkcolModel
,selModel : chkselModel
,store : chkstore
,autoDestroy: true
,xtype : 'checkin_results_grid'
,buttons: [
{
text: 'Upload'
,handler: this.loadPOGCheckin
,scope : this
},
{
text: 'Cancel'
,handler: this.checkinwindowclose
,scope : this
}
]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
SPST.grid.POGCheckInGrid.superclass.initComponent.apply(this, arguments);
}
,onRender : function() {
this.getBottomToolbar().bindStore(chkstore);
SPST.grid.POGCheckInGrid.superclass.onRender.apply(this, arguments);
}
From what I understood, you don't need to only refresh the view, but also reload the store according to the different set of files that you selected..
So, instead of doing
grid.getView().refresh() use grid.getStore().reload([new-options-if-required]);.. This will reload the store according to the options passed, if any, or reload the store according to the last load options.
Have question: I have in my database some filed with text (i submitted it through form).
Then I have extJS Panel where my data. I made, when i click on soem field, appears message Box with plain text only (But in my database this text is very beautiful with ul's, with /br/'s and so son) :( Its ok, but my eyes can't read this normally! How to avoid this? Maybe in extJS exists some replace params? replace('/n/', '//br/').. or?
my grid
var Grid = new Ext.grid.GridPanel({
id : 'grid',
store : store,
frame : true,
autoScroll :true,
columns : my_columns,
stripeRows : true,
title :'Answers',
iconCls : 'arrow',
listeners: {
celldblclick: function(Grid, rowIndex, cellIndex, e){
var rec = Grid.getStore().getAt(rowIndex);
var columnName = Grid.getColumnModel().getDataIndex(cellIndex);
Ext.Msg.show({
title : 'Message',
msg : rec.get(columnName),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});
Ext.Msg.getDialog().dd.lock();
}
}
});
Hard to understand your problem - you talk about a panel, then you post an example with grid.
Anyway... maybe the problem is that the message dialog window has preventBodyReset: false by default, which means that the default browser styles for <ul> and many other elements are reset.
Unfortunately there is no easy way to set preventBodyReset: true for the message box window. If you want it for all message boxes, then maybe you can achieve something with code like that:
Ext.MessageBox.getDialog().getEl().addClass('x-panel-reset');
If you don't want to apply it globally, then you probably have to create your own message window.
try using the escape function.
So something like:
Ext.Msg.show({
title : 'Message',
msg : escape(rec.get(columnName)),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});