I am new to ExtJS and I encountered a similar problem from Sencha forum which was left unsolved.
This is the link to the problem
Basically, What I want to do is open a desktop window module app displaying the data selected on the grid. I already created the same window displayed on the link. We have quite the same code so I think there's no sense on posting my code here. Any help will be appreciated. Thank you.
I don't think you are right about the code thing... But anyway, the code of this guy is a mess and mitchel already answered how it should be done. So forget about the code of the guy for a second, cause it is really simple to archive this.
Here's a working snipped how you can do this:
Ext.define('Ext.ux.DemoWin', {
extend: 'Ext.window.Window',
alias: 'widget.demowin',
width: 200,
height: 200,
title: 'demo',
initComponent: function() {
this.callParent(arguments);
},
loadRecord: function(rec) {
// simplified - just update the html. May be replaced with a dataview
this.update(rec.data.name + ' - ' + rec.data.email);
}
});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
// the registration should be done with the control() method of the responsible controller
itemclick: function(grid,record) {
var win = Ext.widget('demowin').show().loadRecord(record);
}
}
});
And here's a JSFiddle
Edit which applies to Ext.ux.desktop.Module
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
// ...
loadRecord: function(rec) {
this.update(rec.data.name + ' - ' + rec.data.email);
}
//....
Related
My live search grid works fine but when I click on next page or do other thing about the grid, the search grid lose highlight terms search,does anyone help me what do I do? I want to keep highlighted terms search in all page. Thanks
bellow a snippet of my code:
var pagingStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory',
enablePaging: true
},
remoteFilter: true,
pageSize: 5
}),
remoteStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'js/json/pagingStore.json',
reader: {
rootProperty: 'items'
}
},
fields: ['name', 'email', 'phone', 'type']
});
remoteStore.load(function () {
pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();
});
var bbar = new Ext.PagingToolbar({
store: pagingStore, //the store you use in your grid
displayInfo: true,
items: [ {
xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
fieldLabel:'Search:',
labelAlign:'right',
emptyText:'search...',
width: 300,
listeners: {
change: {
fn: onTextFieldChange
}
}
}
]
});
bbar.down('#refresh').hide();
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
id: 'gridPanel',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name',
filterable: true
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: bbar,
renderTo: Ext.getBody()
});
So I answer my own question, I've created a highlight() method and put it on the container: after field search input on each click, the highlight stay on the search terms: ;)
cont.getEl().on({
click: {
fn: highlight
}
});
var store = new Ext.data.JsonStore({
root: 'details',
fields: ['a1','a2','a3','a4','a5','a6','a7'],
pruneModifiedRecords:true,
autoload: false
});
var gridDetail = new Ext.grid.Panel({
title: 'Details',
store: store,
width : '100%',
header: {
titleAlign: 'center'
},
columns: [
{ text: 'col1', dataIndex: 'a1' },
{ text: 'col2', dataIndex: 'a2'},
{ text: 'col3', dataIndex: 'a3' },
{ text: 'col4', dataIndex: 'a4' },
{ text: 'col5', dataIndex: 'a5' },
{ text: 'col6', dataIndex: 'a6' },
{ text: 'col7', dataIndex: 'a7' },
],
});
These are my configures about store and grid. I load the data via an ajax request;
var getInfo= function (s1,s2,s3){
gridDetail.mask('Loading');
Ext.Ajax.request({
url : '../project/getInfo.ajax',
params :{
s1: s1,
s2: s2,
s3: s3
},
callback: function(options, success, response){
if(success){
var resp = Ext.decode(response.responseText);
gridDetail.unmask();
//some other codes not related grid
store.loadData(resp,false);
} else {
gridDetail.unmask();
Alert(resp.msj);
}
}
});
and my return JSON is ;
{"success":true,"first":[{...},],"details":[{"a1":"d1","a2":"d2",..."a7":"d7"}]}
But after all this nothing shown on grid, and no error returns. Everything is okay but nothing happen in grid. Mask shown and then unshown but no data shown on grid.
What is my problem, i can't see it? Can anybody help me?
Seems good for me. Maybe something with the data format.
Add a listeners to your store to check what kind of records the store get.
listeners:{
load: function( this, records, options ) {
console.log(records);
}
}
I am trying to create a grid with store having PagingMemoryProxy.
Pagination is working and I can see as well as change all pages
but the loadmask won't disappear so I am not able to edit the grid data.
here is my code
Ext.require('Ext.ux.data.PagingMemoryProxy');
var data = {
Accounts: [{
id: 1,
name: 'Ed Spencer'
}, {
id: 2,
name: 'Abe Elias'
}, {
id: 3,
name: 'Tom Elias'
}]
};
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'myStore',
pageSize: 2,
model: 'Account',
data : data,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'Accounts'
}
},
});
var pagingBar = new Ext.PagingToolbar({
store: store,
displayInfo: true,
displayMsg: 'Displaying Accounts {0} - {1} of {2}',
emptyMsg: "No Accounts to display"
});
var grid = new Ext.create('Ext.grid.Panel', {
title: 'Accounts',
store: store,
columns: [{
header: 'Id',
dataIndex: 'id',
editor: 'textfield'
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
pluginId: 'rowEditing'
})],
height: 200,
width: 400,
loadMask: false,
renderTo: "editor-grid",
bbar: pagingBar
});
Store load event is getting fired and I can see greyed out data behind the loading mask
Firbug is showing no error.
I am using Extjs 4.1.3. Any idea what's the problem.
Thanks in advance
Looks like a known bug, think its fixed in Extjs 4.2.1
As a temporary fix, you can hide the mask 'on store load' using
grid.getView().setLoading(false);
Sample here : https://fiddle.sencha.com/#fiddle/1v9
Simple question here: I have a working grid with expanding rows within my Ext JS application. Boom.
Currently I have html elements inside of my expanded row (it's just one big div), but that seems to be all the expanded row is capable of displaying.
Is there anyway to render Ext components inside of my expanded rows?
Cheers mates, upvotes await!
You can just render components into the row expanders element.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
plugins: {
ptype: 'rowexpander',
rowBodyTpl : [
'<div class="row-expander-ct"></div>'
]
},
store: {
fields:['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 300,
width: 400,
renderTo: Ext.getBody()
});
grid.store.on({
// Delay the execution of the listener because the grid view will also
// react to this event, and we want the rows to be rendered before we
// modify them...
delay: 1,
load: function() {
Ext.each(grid.el.query('.row-expander-ct'), function(ct) {
Ext.widget('textfield', {
renderTo: ct
,fieldLabel: "Label"
,width: '100%'
});
});
}
});
grid.store.load();
I have a grid with a column like this:
{ text: 'Name', dataIndex: 'Name', editor: 'rallytextfield', flex: 2.5, sortable: false },
When I fill in information in the text field and then click somewhere else, the data is saved; however, when I hit return or tab like in a Custom Grid, nothing happens. What can I configure to allow me to return away from this field and so get the value to save without clicking?
EDITED: It turns out that it's to do with adding checkboxes. If I add a selModel, the return doesn't work. If I take it away, the return works! Here's the full app:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var store = Ext.create('Rally.data.custom.Store', {
data:[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
});
this.add( Ext.create('Rally.ui.grid.Grid', {
title: 'Simpsons',
store: store,
columnCfgs: [
{ text: 'Name', dataIndex: 'name', editor: 'rallytextfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', editor: 'textfield' }
],
height: 200,
width: 400,
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 1,
mode: 'SIMPLE'
}
}) );
}
});
Commenting out selType & selModel and I can hit return to go from one row to the next, but with the selType & selModel in there, no return but tab does work.
The Return/Tab inline edit navigation should be built-in without any additional configuration. When I try to repro the issue the first thing I run into is this:
App works as desired in debug mode but crashes in Rally environment
That may be the root cause since the app is likely just refreshing once the field is edited.
My working column config on my gridConfig looks like this:
columnCfgs: [
'FormattedID',
{
text: 'Name',
dataIndex: 'Name',
editor: 'rallytextfield',
flex: 2.5,
sortable: false
},
'Owner'
],