PDA

View Full Version : Very basic but in need



bee
26 Nov 2011, 2:09 AM
Hi Guys,

I know this is very basic question asked by me , but I really want to know how I can embed my extjs code in html.
for eg how jsp code is getting added in html.
My normal of doing this is I create a html file and extjscode.js file and then call script to call js file.Bu t I would like too extjs code directly in html file only.

tobiu
26 Nov 2011, 9:05 AM
you can create a normal html file, use Ext.onReady to create components and set the config:


renderTo: 'myDivId'


to render the components into divs you like to.
this technique is often used in the examples (like forms).

bee
26 Nov 2011, 11:02 AM
thanks sir, do you have any sample example with please ?

RoyN
29 Nov 2011, 1:22 PM
Or renderTo: document.body?

examples?

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/array-grid.html




<script type="text/javascript"> Ext.require(['Ext.data.*', 'Ext.grid.*']); Ext.define('Order', { extend: 'Ext.data.Model', fields: [] }); Ext.onReady(function(){ var store = new Ext.data.Store({ model: "Order" }); var store = Ext.create('Ext.data.JsonStore', { model: 'Order', proxy: { type: 'rest', url: 'viewapi2.php', reader: { type: 'json', root: 'data' } } }); store.load({ callback: function() { var columns=[]; var data=store.getProxy().getReader().rawData; if (data.metaData) { columns = data.metaData.columns; } var grid = Ext.create('Ext.grid.Panel', { id:'usergrid', renderTo: document.body, width: 400, height: 300, frame: true, title: 'Users', store: new Ext.data.Store({ model:"Order" }), iconCls: 'icon-user', columns: columns }); var jsonData=data.data; var i=0; for(i=0;i<jsonData.length;i++){ Ext.getCmp('usergrid').getStore().add(jsonData[i]); } } }); store.load(); }); </script>