Results 1 to 5 of 5

Thread: execute extjs 4(MVC) application without viewport

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default execute extjs 4(MVC) application without viewport

    HI

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

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    0
      0  

    Default

    You can use a panel and render inside a div, what is a problem????
    AS

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    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();
    }
    });

  4. #4
    Ext JS Premium Member
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    0
      0  

    Default

    You can write in this way-
    launch: function() {
    Ext.create('Ext.panel.Panel', {
    layout: 'fit',
    renderTo:'main',
    items: [
    {

    xtype: 'searchpanel'
    }
    ]

    });
    }
    AS

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    great! its working fine.
    I need more help- I can't use renderTo in List. is there any way to render it into div.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •