I have few grids which have lot of similar fields. I want to create a common model and extend from it as below :
Ext.define('my.model.MyModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'fieldA'
}, {
name : 'fieldB'
}
]
});
Ext.define('my.model.MyModelA', {
extend : 'my.model.MyModel',
fields : [ { // How do I add the extra columns in the subclass?
}
]
});
And same for grids.
Just add the extra fields. The model will figure it out during definition time.
Ext.define('A', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.define('B', {
extend: 'A',
fields: ['age']
});
console.log(B.getFields());
Related
Is there a way to combine two fields into one field in angular ui grid?
I tried the below code, the case manager part worked but the client part is not working
CaseServices.getCases().then(function (response) {
$scope.gridOptions.columnDefs = [
{ name:'Title', field: 'Title' },
{ name:'Case Manager', field: 'Case_x0020_Manager.Title' },
{ name:'Client', field: 'Client.FirstName' + 'Client.Title'},
],
$scope.gridOptions.data = response.d.results;
});
I saw in an example that we can build our own functions like below
columnDefs: [
{ name:'firstName', field: 'first-name' },
{ name:'1stFriend', field: 'friends[0]' },
{ name:'city', field: 'address.city'},
{ name:'getZip', field: 'getZip()', enableCellEdit:false}
],
data : [ {
"first-name": "Cox",
"friends": ["friend0"],
"address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
"getZip" : function() {return this.address.zip;}
}
]
But since I am getting response from ajax call, I am not sure how to modify the data part ($scope.gridOptions.data = response.d.results;)
Can someone help on any one of these? as it will solve the purpose
There are two ways to do this
Modifying the object array
$.each(response.d.results,function(){
this.ClientName = this.Client.FirstName + " " + this.Client.LastName;
});
Using CaseTemplate feature available in angular ui grid (recommended)
$scope.gridOptions.columnDefs = [
{ name:'Title', field: 'Title' },
{ name:'Client', field: 'Client', cellTemplate:'<div>{{row.entity.Client.FirstName + " " + row.entity.Client.Title }}</div>'},
],
I need to map my List that's with in list but couldn't do it .
I tried using hasmany but it wont help .
Unless its mapping i'm unable to loop my tpl as its not detecting the proper objects.
Below is my Json:
{
"containers":[
{
"count":654,
"week":47
},
{
"count":779,
"week":48
}
],
"vessels":[
{
"count":44,
"week":47
},
{
"count":39,
"week":48
}
]
}
My model :
Ext.define('ContainerChartStore', {
extend : 'Ext.data.Model',
fields : [{
name : "containers",
type : Ext.data.Types.List
},{
name : "vessels",
type : Ext.data.Types.List
}],
hasMany: {
model: 'InboundObjects',
name: 'inboundObjects'
}
});
Ext.define('InboundObjects', {
extend: 'Ext.data.Model',
config: {
fields : [{
name : "count",
type : Ext.data.Types.NUMBERARRAY
},{
name : "week",
type : Ext.data.Types.NUMBERARRAY
}]
}
});
I have this code ...
Ext.define("Requestor.view.main.RequestGrid", {
extend: 'Ext.grid.Panel', // Our base class. A grid panel.
... lots of code ...
columns: [
... some more code ...
{
text: 'Status',
dataIndex: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: { type: 'list', value: 'Ready' },
flex: 1
}
... more code ...
This works great when the page initially loads, and if I manually, through the UI, change the filters to include other rows that do not have the value 'Ready' then appear. (see screen shot)
But if I try to change the sorting on my Status column the filter automatically changes back to just showing rows that have a status value of 'Ready'. (see screen shot)
Is this a bug or I am doing something wrong?
Thanks!
I use filters of list type as follows->
{
type: 'list',
dataIndex: 'indexName',
labelField: 'name',
store: Ext.create('MyStore')
}
I've faced with the strange getStore() method behavior.
Having main viewport with two regions: north and center. On the north region there is a button 'Show grid', if to click on this button QueryResultsGridView is loaded to the center region
var panelToAddName = Ext.create('MyApp.view.QueryResultsGridView', {});
var mainViewPort = Ext.getCmp('mainViewPort');
var centerRegion = mainViewPort.down('[region=center]');
centerRegion.removeAll();
centerRegion.add(panelToAddName);
my Store
Ext.define('MyApp.store.QueryResultsGridStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.QueryResultsGridModel',
alias: 'store.queryResultsGrid',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'queryResultsGrid.json',
reader: {
type: 'json'
}
}
});
my ViewModel
Ext.define('MyApp.viewmodel.MainViewModel', {
extend: 'Ext.app.ViewModel',
requires: [
'MyApp.store.QueryResultsGridStore'
],
alias: 'viewmodel.main',
stores: {
queryResultsGrid: {
type: 'queryResultsGrid'
}
});
my Panel
Ext.define('MyApp.view.QueryResultsGridView', {
extend: 'Ext.Panel',
requires: [
'MyApp.controller.QueryResultsGridViewController'
],
controller: 'queryResultsGrid',
listeners: {
afterrender: 'onFormAfterRender'
},
items:[{
reference: 'queryResultsGrid',
layout: 'fit',
items: [
{
xtype: 'grid',
reference: 'grid',
bind: {
store: '{queryResultsGrid}'
},
columns: [
{ text: 'Text1', dataIndex: 'text1', flex: 1 },
{ text: 'Text2', dataIndex: 'text2', flex: 3 }
]
}]
}]
});
my ViewController
Ext.define('MyApp.controller.QueryResultsGridViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.queryResultsGrid',
onFormAfterRender: function(form, parent1) {
console.log(form.down('grid'));
console.log(form.down('grid').store);
}
});
Now in console I see 2 Objects as suggested above. If I go inside the first Object there is a data inside it, but inside the second one store is empty. Could anyone suggest me why? Btw I need this store to run store.load().
first Object
second Object
UPDATED
Here is https://fiddle.sencha.com/fiddle/kf3/preview if it helps, you can see in the console 2 Objects I mentioned above. Source code is available here https://fiddle.sencha.com/#fiddle/kf3
You can use the Ext.getStore() method to get any store
Is it because you have the store set to autoLoad? The store object changes from one moment to another and I wonder if due to autoLoad being set to true is causing data to be overwritten. Try removing autoLoad or setting it to false.
If this doesn't work, you could try setting up a Sencha Fiddle so we can see this in action.
I've finally figured it out. This problem is not occur if to set afterrender event for the grid (not for the panel itself) and use this.getViewModel().getStore('queryResultsGrid') as was suggested by Colin in the comments.
I've updated the Fiddle.
Dynamic columns in extjs Portal Example.
I want to insert columns dynamically in extjs portal example -- specifically i would like to nest them, the problem is i am able to add the columns dynamically but cant drop a portlet inside it, however if i nest columns manually (i.e if they are there already and not defined on runtime) then everything works fine i.e i am able to drop the portlets inside it.
Can anyone help?
here is the some relevant code:
basic declaration:
Ext.define('Ext.app.Portal', {
id: 'parentPortal',
extend: 'Ext.container.Viewport',
requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
initComponent: function(){
items: [{
xtype: 'portalpanel',
id:'threecolumn',
region: 'center',
items: [{
id: 'col-1',
width: 200,
childAnchor: '50% 50%' ,
items: [
{
xtype: 'portalpanel',
items: [
{
id: 'col-4',
minHeight:200
}
],
}
]
},{
id: 'col-2',
items: [
{
xtype: 'portalpanel',
items: [
{
id: 'col-5',
minHeight:200
}
],
}
]
},{
id: 'col-3'
}]
}]
}
}
dynamic column:
Ext.create('Ext.app.PortalPanel', {
xtype: 'portalpanel',
});
}
Please Add Listener
listeners: {
render: function() {
var panel = this;
setTimeout( function() {
var parent = panel.up('portalpanel');
var bb = Ext.ComponentQuery.query('#threecolumn')[0]
console.log( bb == parent );
parent.dd.unreg();
parent.dd = Ext.create('Ext.app.PortalDropZone', parent, parent.dropConfig);
bb.dd.unreg();
bb.dd = Ext.create('Ext.app.PortalDropZone', bb, bb.dropConfig);
console.log(panel);
console.log(parent);
}, 500);
}
}