Archive for the ‘ExtJs’ Category

How to use ExtJs inside React Js

by on Saturday, December 3rd, 2016

Reference: Sencha

extjsreat
Just install @extjs/reactor:

.
npm install --save @extjs/reactor
.

…add the following code to your app:
React JS

.
import { install } from '@extjs/reactor';
install();
.

…and you can start using Ext JS components like the grid in your React components. Here’s an example:

.
import { Grid } from '@extjs/reactor/modern';

function MyReactComponent(props) {
return (
<div>
<h1>An Ext JS Grid in React</h1>
 

</div>
)
}
.

To use any Ext JS component in React, simply import that component by xtype from @extjs/reactor/modern or @extjs/reactor/classic. Because React components are always upper case, @extjs/reactor automatically converts xtypes to lower case for your convenience. In other words:

.
import { Grid } from '@extjs/reactor/modern';
.

…is equivalent to:

.
import { grid as Grid } from '@extjs/reactor/modern';
.

This syntax is made possible by a babel plugin, @extjs/reactor-babel-plugin, which actually converts the above to:

.
import { reactify } from '@extjs/reactor';
const Grid = reactify('grid');
.

The reactify function creates a React component wrapper for any Ext JS class or xtype. You can use reactify on your own classes as well. For example, if you have a custom class with xtype: ‘mygrid’, you can use:

.
import { reactify } from '@extjs/reactor';
const MyGrid = reactify('mygrid');
.

Or, if you have a reference to the custom class, you pass it to reactify as well:

.
import { MyExtJSGrid } from './extComponents/MyExtJSGrid';
const MyGrid = reactify(MyExtJSGrid);
.

Once you’ve imported an Ext JS component, you can use it as you would any other React component. Configs are set using props. Any props starting with “on*” become listeners, so you can do things like:

<Grid
onSelect={(grid, record) => console.log(`${record.get(‘name’)} selected.`)}
/>
Child tags are automatically added to the items config, so Ext JS layouts work like you’d expect:
This panel is on the left.
This panel is on the right.

The @extjs/reactor package also adheres to React’s principle of minimizing changes to the dom. If you change the value of the title prop in this example:

.
function MyReactComponent({ title }) {
return (
My title may change!
);
}
.

…@extjs/reactor automatically calls the corresponding setTitle method on the Ext.Panel instance rather than tearing down and rebuilding the entire component.

Most React projects are built using webpack, so we’ve provided a plugin, @extjs/reactor-webpack-plugin, that produces a minimal build of Ext JS containing only those components that you use in your app. The plugin scans your code for import statements as well calls to Ext.create and Ext.require to determine which classes you use, then sends that information to Sencha Cmd to produce the minimized, optimized build of the framework. Here’s an example config:

.
plugins: [
new ExtJSReactorWebpackPlugin({
sdk: '/path/to/ext',
theme: 'theme-material',
toolkit: 'modern',
packages: ['charts']
})
]

.

Buy ExtJS and ReactJS books:

ExtJS 4 Loading data into form panel from store/model or via form.load

by on Tuesday, May 14th, 2013

var contactModel = component.contactDetails;
Ext.getCmp('EditContact_Form').getForm().loadRecord( contactModel );

OR

var form = this.getWebItemForm().getForm();
var data = this.getStore('WebItemsForm').getAt(0);
form.loadRecord(data);

OR

Ext.getCmp('patient-form').getForm().load({
     url:'formdata.php',
     params:{moduleId:moduleId,action:'doAction',activity:'getActivePatient'},
     success:function(form,action) {
                var res = action.result;
                Ext.getCmp('patient_count').setText(res.data.active_patient_count);
     },
    failure:function(response) {
    }
 });

Manipulating datastore data after loading

by on Wednesday, December 26th, 2012

var restaurantsStore = this.getStore();
var avg_rating;
restaurantsStore.clearFilter();
if ( restaurantsStore !== undefined )
{
restaurantsStore.load({
callback: function(records, operation, success) {
var proxy = restaurantsStore.getProxy(),
message = proxy.getReader().rawData.message;

if( success === false ){
Ext.Msg.alert('Operation Failed', message);
}
else{
var vendor = records[0].get('vendor');
Ext.getCmp('poweredByContainer').setVendor( vendor );

if( vendor === 'O' ){
for ( var index = 0; index &lt; records.length; index++)
{
var phone = records[index].get('phone');
var recordR = restaurantsStore.getAt(index);
Ext.Ajax.request({
modelInstance: recordR,
url: 'restaurants/call_yelp_api/'+phone,
success: function(response, context){
var text = Ext.decode(response.responseText);
if( text.businesses[0] !== undefined )
avg_rating = text.businesses[0].avg_rating;
context.modelInstance.set('overall_rating', (avg_rating/5)*100);

},
failure: function(response){
var textF = response.responseText;
}
});

}
}

}
},
params: params,
scope: this
});

How can i Do Checkbox state maintain In Paging Grid

by on Friday, December 7th, 2012

Ques: http://www.sencha.com/forum/showthread.php?99255-How-can-i-Do-Checkbox-state-maintain-In-Paging-Grid

Ans: http://www.sencha.com/forum/showthread.php?61282-Ext.ux.grid.RowSelectionPaging&highlight=pagingselection

set allowBlank dynamically in extjs

by on Thursday, November 8th, 2012

myField.allowBlank = true;

myField.validateValue(myField.getValue()); //force update

Extjs 4 How to create Password field ?

by on Friday, June 29th, 2012

var yourField = new Ext.form.TextField({
fieldLabel: ‘pass’,
inputType: ‘password’    //this is important .. you have to change text to password
});

ExtJs dataview refresh problem

by on Monday, February 20th, 2012

Ext.getCmp(dataview id).getStore().load({params:{}});
 or
Ext.getCmp(dataview id).getStore().reload();

By using this code your dataview automatically be refreshed.

NOTE: The response only come in the pure json format

If you will use this in PHP for fetching the data for
dataview you must declare $json_data[‘templateItems’][]= $row;
in case of no result found. Otherwise your data view not working correctly.

$result= mysql_query($query);
$json_data['templateItems'] = array();
while($row= mysql_fetch_assoc($result)){
$json_data['templateItems'][]= $row;
}
echo json_encode($json_data);exit;
Data view code
new Ext.DataView({

store: new Ext.data.JsonStore({
 url: 'connect.php',
 baseParams: {moduleId:moduleId,action:'doAction',activity:'getTemplateCats'},
 autoLoad:false,
 root: 'templatecats',
 fields: ['templatecat_name','id']
 }),
 tpl: new Ext.XTemplate(
 '',
 '
<div>{templatecat_name}</div>
',
 ''
 ),
 listeners : {
 click : function(dataView,index,node,e) {
 var record = dataView.getRecord(node);
 var cat_name =record.get("templatecat_name");
 var cat_id =record.get('id');

Ext.getCmp('cat_id_temp_s').setValue(cat_id);
 Ext.getCmp('newCardS').getLayout().setActiveItem(1);
 Ext.getCmp('s-templates-items').getStore().load(
 {params:{moduleId:moduleId,action:'doAction',
 cat_id:cat_id,templatelocation:'subjective',activity:'getTemplates'}});
 }
 },
 id:'s-templates',
 autoHeight:true,
 multiSelect: true,
 overClass:'x-view-over',
 itemSelector:'div.thumb-wrap',
 emptyText: 'No templates to display'
 })

How to decode json response in ExtJs

by on Monday, February 20th, 2012

//when json response is in this format {“success”:true,”data”:{“id”:11}}
Ext.Ajax.request({
url:’connect.php’,
params:{moduleId:moduleId, status:’insert’,activity:’save’,action:’doAction’},
success:function(res){
var response = Ext.util.JSON.decode(res.responseText);
alert(response.data.id);
}
});

EXTJS Hide Tab Panels

by on Monday, February 20th, 2012

This is for hide the tab
Ext.getCmp(tabpanel_id).hideTabStripItem(tabitem_id);

This is for show the tab again
Ext.getCmp(tabpanel_id).unhideTabStripItem(tabitem_id);

Thanks!

How i can open a tab from a grid every tab calling dynamic function for items of tab [solved]

by on Monday, February 20th, 2012

Ext.QuickTips.init();
Ext.override(Desktop.ReportsWindow, {
createProxy: {},
createWindow: function () {

var desktop = this.app.getDesktop();
var win = desktop.getWindow(this.moduleId);
var app = this.app;
var url = this.app.connection;
var moduleId = this.moduleId;

var myData = [
[‘Diagnosis registry’, ‘Search patients that have a particular diagnosis or ICD9 code.’, ‘diagnosis’],
[‘Medication report’, ‘Search patients that have been prescribed a particular medicine.’, ‘medication’]
];

var store = new Ext.data.ArrayStore({
fields: [{
name: ‘title’
},
{
name: ‘description’
},
{
name: ‘report_for’
}]
});

store.loadData(myData);

if (!win) {

var winWidth = desktop.getWinWidth() / 1.1;
var winHeight = desktop.getWinHeight() / 1.2;
win = desktop.createWindow({
id: moduleId,
title: ‘Reports’,
width: winWidth,
height: winHeight,
maximized: true,
iconCls: ‘reports-icon-cls’,
layout: ‘fit’,
items: [{
xtype: ‘tabpanel’,
activeItem: 0,
id: ‘reportsTabPanel’,
items: [{
title: ‘Reports’,
items: [{
xtype: ‘grid’,
id: ‘allReportsGrid’,
columnLines: true,
autoHeight: true,
stripeRows: true,
tbar: {
xtype: ‘toolbar’,
items: [‘->’,
{
text: ‘Run Report’,
disabled: true,
id: ‘runReportBtn’,
handler: this.addNewtab,
scope: this,
}, ‘ ‘]
},
viewConfig: {
forceFit: true,
},
selModel: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function (sel, row, rec) {
Ext.getCmp(‘runReportBtn’).enable();
},
rowdeselect: function (sel, row, rec) {
Ext.getCmp(‘runReportBtn’).disable();
}
}
}),
store: store,

columns: [{
header: ‘Title’,
dataIndex: ‘title’,
width: 100
},
{
header: ‘Description’,
dataIndex: ‘description’,
width: 200
}, ],
listeners: {
rowdblclick: this.addNewtab,
scope: this
},
}]
}]
}]
})
}
win.show();
},

addNewtab: function () {

var url = this.app.connection;
var moduleId = this.moduleId;

var tabpanel = Ext.getCmp(‘reportsTabPanel’);
var rec = Ext.getCmp(‘allReportsGrid’).getSelectionModel().getSelected();
var title = rec.get(‘title’).replace(/^\s+/, ”).replace(/\s+$/, ”);
var tabId = title.toLowerCase();
var tabId = tabId.replace(/ /g, ‘_’);

// varaible getting the value which function to call
var reportTab = rec.get(‘report_for’);

if (Ext.getCmp(tabId)) {
tabpanel.setActiveTab(tabId);
return;
}

var tabs = Ext.getCmp(‘reportsTabPanel’).add({
title: title,
id: tabId,
layout: ‘fit’,
closable: true,

items: this[reportTab](),
//reportTab, //calling the function according to selected record
scope: this,

});
tabpanel.setActiveTab(tabs);
},

diagnosis: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var report_item = [{
xtype: ‘panel’,
layout: ‘border’,
items: [{
xtype: ‘form’,
region: ‘north’,
autoHeight: true,
frame: true,
bodyStyle: ‘padding : 10px;’,
items: [{
xtype: ‘fieldset’,
border: false,
width: 280,
style: ‘padding:0px;margin:0px; float : left’,
labelWidth: 55,
items: [{
xtype: ‘combo’,
style: ‘float:left’,
fieldLabel: ‘Providers’,
}]
},
{
xtype: ‘button’,
text: ‘Advance Search’,
style: ‘float : left’,
handler: function () {
//Ext.getCmp(‘check’).show();
}
}]
},
{
xtype: ‘grid’,
region: ‘center’,
id: ‘center_grid’,
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: ‘Patient Name’,
dataIndex: ”
},
{
header: ‘IDC9 Code’,
dataIndex: ”
},
{
header: ‘Diagnosis’,
dataIndex: ”
},
{
header: ‘Dx Date’,
dataIndex: ”
},
{
header: ‘Last Seen’,
dataIndex: ”
},
{
header: ‘Provider’,
dataIndex: ”
}, ]
}]
}];

return report_item;

},
medication: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var medication_tab = [{
xtype: ‘panel’,
layout: ‘border’,
items: [{
xtype: ‘form’,
region: ‘north’,
autoHeight: true,
frame: true,
bodyStyle: ‘padding : 10px;’,
items: [{
xtype: ‘fieldset’,
border: false,
width: 280,
style: ‘padding:0px;margin:0px; float : left’,
labelWidth: 55,
items: [{
xtype: ‘combo’,
style: ‘float:left’,
fieldLabel: ‘Providers’,
}]
},
{
xtype: ‘button’,
text: ‘Advance Search’,
style: ‘float : left’,
handler: function () {

}
}]
},
{
xtype: ‘grid’,
region: ‘center’,
id: ‘center_grid’,
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: ‘Patient Name’,
dataIndex: ”
},
{
header: ‘Medication’,
dataIndex: ”
},
{
header: ‘Strength’,
dataIndex: ”
},
{
header: ‘Rx Start Date’,
dataIndex: ”
},
{
header: ‘Rx Stop Date’,
dataIndex: ”
},
{
header: ‘Last Seen’,
dataIndex: ”
},
{
header: ‘Provider’,
dataIndex: ”
}, ]
}]
}];

return medication_tab;
}
})

This code calling dynamic functions for the items of tab.
items: this[reportTab]()