PDA

View Full Version : how can i use a grid once filled with data in different .js files?



mohaskuar
9 Jul 2012, 4:55 AM
i want to do something like calling a function in other programming languages wich enable me to reuse the code i wrote once.....for example i have a .js file which have a grid panel..and i want to use that grid again in another .js file....what shall i do ot is it possible in extjs ?

sword-it
9 Jul 2012, 5:08 AM
Hi!

Yes, it is possible in Ext JS but you have to use namespacing for it
Simply create a class, extends it with grid , register it and then reuse it where ever you want

As a sample:-




Ext.ns('yourNameSpace');

Ext.define (http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-define)('yourNameSpace.YourGrid', {
extend: 'Ext.grid.Panel',
title: 'your Grid',
store: 'Your Grid Store'
...
..
});

Ext.reg('yourgridxtypename','yourNameSpace.YourGrid');




For more info on namespacing, check this:-
http://www.sencha.com/blog/use-namespaces-to-organize-your-javascript-code/

scottmartin
9 Jul 2012, 9:36 AM
In using define.. namespaces are handled automatically.
http://www.sencha.com/learn/sencha-class-system/

Scott.

mohaskuar
11 Jul 2012, 4:09 AM
Ext.ns('moha')
Ext.define('moha.fere'{
loadGrid: function(){
Ext.onReady(function(){
var ngrid=Ext.create('Ext.grid.Panel', {
.....

});
});
}
});
when i use the code below works fine....as long as it is in the same file....but when i tried it from another .js file kept on bieng difficult on me......please any idea?

var f = Ext.create('moha.fer', 'f');
f.loadGrid();

sword-it
11 Jul 2012, 5:35 AM
Hi mohaskuar,
I think you may be have spell mistake when you are creating object of you grid again in - var
f = Ext.create('moha.fer',

'f');.

but you defined you grid like -

Ext.define('

moha.fere'{

One more thing you must give comma(,) in above line like - Ext.define('moha.fere',{

I am giving you an sample code below which is in two files:
1. HTML file code:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid Example</title>
<link rel="stylesheet" type="text/css" href="/js/lib/extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/js/lib/extjs-4.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="/File1.js"></script>
<script type="text/javascript" src="/File2.js"></script>
</head>
<body>
</body>
</html>





2. First file code that contains the definition of button (File1.js): (I used button for sample.)


Ext.ns('moha');


Ext.define('moha.fer',{
loadGrid: function(){
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
}
});





3. File2.js which contains creating the instance of that button:




Ext.onReady(function () {
var f = Ext.create('moha.fer', 'f');
f.loadGrid();
});

mohaskuar
12 Jul 2012, 11:34 PM
so much greatefull for all of you....sword it it works for me.......what finally i wanted to do to finish what i have started is.....i want to call this function inside a content panel..as an item to center region.


var f = Ext.create('moha.cla', 'f');
f.loadGrid();

.....or any other way to load the grid into center region of a content panel.