PDA

View Full Version : Extjs 4 Custom build related information needed



extremed
24 Feb 2012, 3:45 AM
Hi

Is it possible to build a custom version to code like this?



<script type="text/javascript">

Ext.scopeResetCSS = true;
var BASE_URL = '<?=base_url()?>';
Ext.BLANK_IMAGE_URL = BASE_URL+'extjs/s.gif';

Ext.onReady(function(){

Ext.create('Ext.data.Store', {
fields : [
{name: 'id', type: 'int'},
{name: 'period', type: 'string'},
{name: 'length', type: 'string'},
{name: 'rooms', type: 'string'},
{name: 'price', type: 'string'},
],
storeId : 'reservationStore',
pageSize : 10,
proxy : {
type : 'ajax',
actionMethods : 'POST',
url : BASE_URL+'transaction/check_reservation',
reader: {
type : 'json',
root : 'data'
}
}
});


Ext.create('Ext.grid.Panel', {
store : Ext.getStore('reservationStore'),
columns : [
{ header: 'ID', dataIndex: 'id', flex: 1, align: 'center', menuDisabled: true, hidden: true },
{ header: 'Period', dataIndex: 'period', flex: 1, align: 'center', menuDisabled: true },
{ header: 'Length', dataIndex: 'length', flex: .5, align: 'center', menuDisabled: true },
{ header: 'Rooms', dataIndex: 'rooms', flex: .5, align: 'center', menuDisabled: true },
{ header: 'Price', dataIndex: 'price', flex: .5, align: 'right', menuDisabled: true }
],
width : 500,
height : 300,
renderTo: 'form1',
});

});
</script>


Regards

tobiu
24 Feb 2012, 5:41 AM
i really do not understand your question!

i can only recommend to not mix js with php and in case you want to reuse the grid, create a custom class with ext.define, extend the gridpanel and afterwards feel free to create as many instances as you like to.

best regards

extremed
24 Feb 2012, 5:46 AM
im mean instead of loading whole extjs library to run this piece of code, build custom extjs library that relevant to this code

is it possible?

sskow200
24 Feb 2012, 7:03 AM
You need to utilize the Sencha SDK (http://www.sencha.com/products/sdk-tools/). This will allow you to only include the relevant files needed for the components you've created.

extremed
24 Feb 2012, 7:09 AM
i tried that and jsb3 file im getting is like this


{
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": []
},
{
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
{
"path": "",
"name": "all-classes.js"
},
{
"path": "",
"name": "app.js"
}
]
}
],
"resources": []
}

its because im not using MVC or Because my code is inside onready ?

sskow200
24 Feb 2012, 7:41 AM
sencha create jsb -a http://myapplication-devsite:<port> -p <appname>.jsb3

This will look at your development site and pull down the components it needs utilizing Ext.Loader which much be enabled in your development environment. In order to do this properly you must only include the core library as Ext.Loader will only attempt to load the files it can't find.

sskow200
24 Feb 2012, 7:59 AM
In order to setup your Ext.Loader properly it needs to point to the ext source directory like so:



Ext.Loader.setConfig({
'Ext': '/var/www/extjs4/src/'
})


Now any file prepended with Ext, (ie: Ext.grid.Panel), the loader will look for the file /var/www/extjs4/src/grid/Panel.js


Like I said before, in order for your loader to actually look for these files, they must not be included already on your page. If you are including 'ext-all-debug.js' or 'ext-all.js' than those dependencies will already exist and there is no need to look for them. You need to include only core libary 'ext.js' or 'ext-dev.js'.

extremed
24 Feb 2012, 8:18 AM
Thanks a lot after including ext.js instead of ext-all.js it works.

sskow200
24 Feb 2012, 8:20 AM
you're welcome. can you please mark this question as answered?