ExtJS 4.x support

[eric_suen]

I have uploaded a new version and a new tutorial for how to create a profile for Ext 4, you can take a look at this page.

[daddyschmack]

Eric,

That helped, but still having some issues.
When trying code assist,
After typing:
"var w = new Ext."
I do see "window" in the code assist.
But when I type:
"var b = w."
I don't see "addButton" in the suggestion list.
I do see "addTool".
Maybe I didn't download the fully updated software or possibly do I need to check anything besides the "All" checkbox after selecting the sdk.jsb3 file?

Thanks,

John

[eric_suen]

I don't think window has addButton method in version 4.x, Ext 3.x do have addButton method.

[daddyschmack]

Hi Eric,

Okay, I made the changes to the jsb3 file. getting rid of 'platform/' wherever it occured. I started going through the ext 4 tutorials and documentation. They have an example:

Code: Select all

applyTitle: function(title) {
        if (!Ext.isString(title) || title.length === 0) {
            alert('Error: Title must be a valid non-empty string');
        }
        else {
            return title;
        }
    },

So I tried testing Spket with that small function.
if I type in 'Ext.'

Should I see 'isString' in the list? Currently I only see '.isPrototype'. Maybe I have it configured wrong? I downloaded Spket last on Monday.. Also, I just did a check for updated software, and none was reported.. Is there a later version of com.spket.js_1.6.18.jar that I need to download since then?

Sorry to keep bugging you.

Thanks,

John

[eric_suen]

The problem of update should be fixed now, please try again.

The new version already handle the problem of sdk.jsb3, so you don't need change it manually, please use the original sdk.jsb3.

[daddyschmack]

Okay, that sems to have fixed the issue. I tested creating a custom class like in your example, and it worked just as you illustrated.

Thanks you so much!!!!

[liu78778]

Ext.define is no code assist
However, we now use it to replace Ext.extend
Hope it works

[eric_suen]

Ext.define is no code assist
However, we now use it to replace Ext.extend
Hope it works

Could you give more information? Ext.define seems works fine for me.

Code: Select all

Ext.define('my.MyWindow', {
  extend: 'Ext.window.Window',
  
  childFunction: function() {
    this. //code assist works here
  }
});

var w = Ext.create('my.MyWindow');

w. //code assist works here

[liu78778]

Ext.define is no code assist
However, we now use it to replace Ext.extend
Hope it works

Could you give more information? Ext.define seems works fine for me.

Code: Select all

Ext.define('my.MyWindow', {
  extend: 'Ext.window.Window',
  
  childFunction: function() {
    this. //code assist works here
  }
});

var w = Ext.create('my.MyWindow');

w. //code assist works here

yea! it works now! but Ext.Ajax or Ext.data.Connection has no code assist now...everyone else the same?

[eric_suen]

the problem is sdk.jsb3, some files are in folder "../../platform/src/", some are in folder "../../platform/", which are missing in the package, will release a new version soon to fix this problem.

[hlai]

In the EXTJS 4.1 beta and release candidate, there is no build/sdk.jsb3 file
Is there a way to create the sdk.jsb3 file, or another way to get Spket working with EXTSJS 4.1?

[eric_suen]

You can take a look at this post: viewtopic.php?f=6&t=1866&start=45#p4837

[rmxbot]

Good day!

Need help ExtJS 4.1

There is a ComboBox. There is a Grid. Grid plugged plug rowexpander.
ComboBox and Grid take data from one array.

The purpose of the script: after selecting an item in the ComboBox - open the corresponding rowexpander in the grid.
That is, The user selects in ComboBox «Alcoa Inc» and in the field of Grid row with the name of the company «Alcoa Inc» rowexplander is disclosed.

Problem: I can not turn to the records in the table and call the event expandbody / collapsebody

After selecting a ComboBox'e I get the id of the selected item, which corresponds to the id record in Grid, but also how to use it, what would appeal - I can not understand.

grid.getView (). getNode (0) - got so appeal, but it's not something that would help me.

PS So far, the variables are declared as window.grid and window.simpleCombo to simplify debugging

The script:

Code: Select all

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../examples/ux');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel',
    'Ext.tip.QuickTipManager',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.toolbar.Paging',
    'Ext.ux.SlidingPager',
    'Ext.form.field.ComboBox',
    'Ext.form.FieldSet'
]);

Ext.onReady(function(){
    
    Ext.tip.QuickTipManager.init();

    var myData = [
        ['0','3m Co',71.72,'9/1 12:00am'],
        ['1','Alcoa Inc',29.01,'9/1 12:00am'],
        ['2','Altria Group Inc',83.81,'9/1 12:00am'],
        ['3','American Express Company',52.55,'9/1 12:00am'],
        ['4','American International Group, Inc.',64.13,'9/1 12:00am'],
        ['5','AT&T Inc.',31.61,'9/1 12:00am'],
        ['6','Boeing Co.',75.43,'9/1 12:00am'],
        ['7','Caterpillar Inc.',67.27,'9/1 12:00am'],
        ['8','Citigroup, Inc.',49.37,'9/1 12:00am']
    ];

    Ext.define('Company', {
        extend: 'Ext.data.Model',
        idProperty: 'company',
        fields: [
           {name: 'id', type: 'int'},
           {name: 'company', type: 'string'},
           {name: 'price', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]        
    });

    Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'int', name: 'id'},
        {type: 'string', name: 'name'}
    ]
});
    
    var store = Ext.create('Ext.data.Store', {
        model: 'Company',
        remoteSort: true,
        pageSize: 3,
        proxy: {
            type: 'pagingmemory',
            data: myData,
            reader: {
                type: 'array'
            }
        }
    });
    
    // create the data store for combobox
	function createStore() {
    return Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'State',
        data: myData
    });
}

    // create the Grid
    window.grid = Ext.createWidget('gridpanel', {
        title:'Sliding Pager',
        store: store,
        columns: [ {
                id:'company',
                text: 'Company',
                sortable: true,
                dataIndex: 'company',
                flex: 1
            },{
                text: 'Price',
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price',
                width: 75
            },{
                text: 'Last Updated',
                sortable: true,
                dataIndex: 'lastChange',
                width: 75
            }],
        stripeRows: true,
        height:320,
        minHeight: 160,
        width:700,
        frame:true, //+ 
        plugins: [{
            ptype: 'rowexpander',
	    id: 'atata',
            rowBodyTpl : [
                '<p>Company: <b>{company}</b></p>',
                '<p><b>$ {price}</b></p>'
            ]
        }],
        collapsible: true,
        animCollapse: false, // end +
        resizable: {
            handles: 's'  
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 3,
            store: store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.SlidingPager', {})
        })
    });

    grid.render('grid-example');

    function open_some_plus(val) {
	
	alert(grid.getView().getNode(val));

	}

	// Simple ComboBox using the data store
   window.simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: 'simpleCombo',
        displayField: 'name',
        width: 700,
        labelWidth: 400,
        store: createStore(),
        queryMode: 'local',
        typeAhead: true
    });

simpleCombo.on('select', function() {
	var v = simpleCombo.getValue();
	var record = simpleCombo.findRecord(simpleCombo.valueField || simpleCombo.displayField, v);
	var index = simpleCombo.store.indexOf(record);
	open_some_plus(index);
});
    store.load();

});

Html code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sliding Pager Extension Example</title>

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="shared/example.css" />

    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../shared/icons/fam/grid.png) !important;
        }
        .add {
            background-image:url(../shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../shared/icons/save.gif) !important;
        }
    </style>

    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="app2.js"></script>
</head>
<body>
 <div id="simpleCombo"></div>
 <div id="mydiv_id"></div>
<br/>
<div id="grid-example"></div>
</body>
</html>

Tell me the solution, the second day of the "struggling against the wall."

[eric_suen]

for question abuot ExtJS itself, you should post on http://www.sencha.com/forum/

[MadOtis]

I'm trying to get spket working with ExtJS 4.2.xx, but there is no sdk.js3 anywhere in the extjs package. I've tried using the jsb.jar trick to generate one, but the structure seems to have changed betweek ExtJS 4.1.x and 4.2.x. Do you plan, or are already working on an update/fix for ExtJS 4.2? Or, a work-around?