PDA

View Full Version : execute extjs 4(MVC) application without viewport



neel.kamal
4 Jan 2012, 11:41 PM
HI

I want to run one mvc application without using viewport.
its urgent, please response soon.

atul.sachan@capgemini.com
4 Jan 2012, 11:46 PM
You can use a panel and render inside a div, what is a problem????

neel.kamal
5 Jan 2012, 12:30 AM
whole code given below, each file name is underlined. please tell me how to render into div.I tried but not gui is not coming. I tried to attach but not able to do that.
APPLICATION.JS
Ext.require([
'Ext.app.*'
]);
var displayErrorGrid;
Ext.define('AM.controller.FundController', {
extend: 'Ext.app.Controller',
views : ['aces.List','aces.Edit'],
stores : ['AcesStore'],
models: ['AcesModel'],

onLaunch: function() {
List.render('grid-example');
}
/*launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'aceslist'
}
});
}*/

/*init: function() {
this.control({
'viewport > aceslist': {
itemdblclick: this.editUser
},
'acesedit button[action=save]': {
click: this.updateUser
}
});
},
updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
//this.getUsersStore().sync();
},
editUser: function(grid, record) {
var view = Ext.widget('acesedit');
view.down('form').loadRecord(record);
}*/
});
controller.js
Ext.require([
'Ext.app.*'
]);
var displayErrorGrid;
Ext.define('AM.controller.FundController', {
extend: 'Ext.app.Controller',
views : ['aces.List','aces.Edit'],
stores : ['AcesStore'],
models: ['AcesModel'],

onLaunch: function() {
List.render('grid-example');
}
/*launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'aceslist'
}
});
}*/

/*init: function() {
this.control({
'viewport > aceslist': {
itemdblclick: this.editUser
},
'acesedit button[action=save]': {
click: this.updateUser
}
});
},
updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
//this.getUsersStore().sync();
},
editUser: function(grid, record) {
var view = Ext.widget('acesedit');
view.down('form').loadRecord(record);
}*/
});
List.js
var label = 'label is displaying'
Ext.define('AM.view.aces.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.aceslist',
layout: 'absolute',
//title: 'aces List',
//renderTo: ('grid-example'),
autoHeight: true,
html: label,
height:140,
width:600 ,
store: 'AcesStore',
//frame: true,
initComponent: function() {
this.columns= [{
header: 'Fund Number',
headerPosition : 'bottom',
width: 25,
dataIndex: 'fundNumber',
flex: 1
},{
header: 'Separate Account',
width: 25,
dataIndex: 'sepAccount',
flex: 1
},{
header: 'Margin Code',
width: 25,
dataIndex: 'marginCode',
flex: 1
}
,{
header: 'Company Code',
width: 25,
dataIndex: 'compCode',
flex: 1
}
,{
header: 'Total Units',
width: 25,
dataIndex: 'totalUnits',
flex: 1
}
,{
header: 'Admin Trade',
width: 20,
dataIndex: 'adminTrade',
flex: 1
}
];

this.dockedItems= [{
xtype: 'pagingtoolbar',
store: 'AcesStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}];
this.callParent();
}
});
model.js
Ext.define('AM.model.AcesModel', {
extend: 'Ext.data.Model',
fields: ['fundNumber', 'sepAccount','marginCode','compCode','totalUnits','adminTrade']
});
store.js
Ext.define('AM.store.AcesStore',{
extend: 'Ext.data.Store',
model: 'AM.model.AcesModel',

autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
api: {
read: 'js/data/AcesJson.json',
update: 'js/data/AcesUpdateJson.json'
},
url: 'js/data/AcesJson.json',
reader: {
type: 'json',
root: 'acesJson',
successProperty: 'success'
}
}
});

width: 25,
dataIndex: 'totalUnits',
flex: 1
}
,{
header: 'Admin Trade',
width: 20,
dataIndex: 'adminTrade',
flex: 1
}
];

this.dockedItems= [{
xtype: 'pagingtoolbar',
store: 'AcesStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}];
this.callParent();
}
});

atul.sachan@capgemini.com
5 Jan 2012, 1:23 AM
You can write in this way-
launch: function() {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo:'main',
items: [
{

xtype: 'searchpanel'
}
]

});
}

neel.kamal
5 Jan 2012, 1:55 AM
great! its working fine.
I need more help- I can't use renderTo in List. is there any way to render it into div.