paladinjack
5 Oct 2007, 12:07 PM
I just started to use Ext. but found it's way more complicated than Prototype/JQuery. One thing bugs me is that there are so many config options, public methods in each class in the API documentation but there are few examples. I have been reading tutorials but it's still very confusing sometimes.
Assume we have simple html div element:
<body>
<div id='parent'></div>
</body>
------------------------------------------------------------------
The first issue is create an element. In prototype 1.6 the new way is
var el = new Element("div", {id:'div1', className:'divClass'}); ...
$('parent').appendChild(el);
In Ext., i assume there must be similar chemistry, so I tried:
var el = new Ext.Element("div");
el.set({id:'div1',cls:'divClass'});
el.appendTo(Ext.Element.get('parent'));
Firebug will throw an error, telling me that Ext.Element.get('parent') has no properties.
Later I figured out I should use the DOM helper. But is there anyway to work this way to create any DOM elements?
------------------------------------------------------------------
The second issue is the Combo.box. it took me a while to get it work. Then the problem is how can i get the value of the field. Say if I have a value field pair: ['MI', 'Michigan'].
If you have a combo box:
var combo = new Ext.form.ComboBox(
{id:'combo1',
store:store,
displayField:'fullName',
valueField:'name',
mode:'local',
typeAhead:true,
selectOnFocus:true,
triggerAction:'all' //This will nullify the auto masking
});
combo.addListener(
'change',
function(){
alert(combo.getValue());
});
Nicely, you get 'MI', is what we wanted. However, in general I want to select the combo box in other scopes, and the intuitive way to do this is:(I tried both)
Ext.get('combo1').getValue();
Ext.Element.get('combo1').getValue();
They give me 'Michigan' instead of 'MI'. In the API there's a getRawValue() but i tried, firebug tells me it's not a function. Then i am stuck here. There are othercases, like the setSize() in Viewport class, seems to be not working at all.
It occurs to be in prototype, the $() returns a DOM element. However, in Ext, I don't actually understand how elements are defined. I tried Ext.get('combo1').value, which returns a undefined to me. So this 'combo1', with an id attribute, is not html element; however, there are some discrepancies in function definition, maybe some getValue() masked some other getValue() to have returned the wrong value; or i simply didn't find the right way to do it.
Some one please help me. I love this library (As pretty as Flash), but after spend 3 full days on it, read most of the APIs, fumbled through tutorials (mixed with version 1.0, 1.1 and maybe some 2.0), I still can't get some basic things done. In some cases, like the layout, you can pass options with no class definition:
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),
{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
},
....
It took me a while to guess the element in south is a panel, but from the code itself there's no way to give me the least hint, and it's not specified anywhere in API (Or I simply missed)
I guess I will get better when I get more field experiences.
Ext is a great library, but the lack of examples in documentation slows down learning. It's better to have a javadoc style method index table at the beginning of each entry for quick loacating desired information, given the amount of information listed in each entry.
Assume we have simple html div element:
<body>
<div id='parent'></div>
</body>
------------------------------------------------------------------
The first issue is create an element. In prototype 1.6 the new way is
var el = new Element("div", {id:'div1', className:'divClass'}); ...
$('parent').appendChild(el);
In Ext., i assume there must be similar chemistry, so I tried:
var el = new Ext.Element("div");
el.set({id:'div1',cls:'divClass'});
el.appendTo(Ext.Element.get('parent'));
Firebug will throw an error, telling me that Ext.Element.get('parent') has no properties.
Later I figured out I should use the DOM helper. But is there anyway to work this way to create any DOM elements?
------------------------------------------------------------------
The second issue is the Combo.box. it took me a while to get it work. Then the problem is how can i get the value of the field. Say if I have a value field pair: ['MI', 'Michigan'].
If you have a combo box:
var combo = new Ext.form.ComboBox(
{id:'combo1',
store:store,
displayField:'fullName',
valueField:'name',
mode:'local',
typeAhead:true,
selectOnFocus:true,
triggerAction:'all' //This will nullify the auto masking
});
combo.addListener(
'change',
function(){
alert(combo.getValue());
});
Nicely, you get 'MI', is what we wanted. However, in general I want to select the combo box in other scopes, and the intuitive way to do this is:(I tried both)
Ext.get('combo1').getValue();
Ext.Element.get('combo1').getValue();
They give me 'Michigan' instead of 'MI'. In the API there's a getRawValue() but i tried, firebug tells me it's not a function. Then i am stuck here. There are othercases, like the setSize() in Viewport class, seems to be not working at all.
It occurs to be in prototype, the $() returns a DOM element. However, in Ext, I don't actually understand how elements are defined. I tried Ext.get('combo1').value, which returns a undefined to me. So this 'combo1', with an id attribute, is not html element; however, there are some discrepancies in function definition, maybe some getValue() masked some other getValue() to have returned the wrong value; or i simply didn't find the right way to do it.
Some one please help me. I love this library (As pretty as Flash), but after spend 3 full days on it, read most of the APIs, fumbled through tutorials (mixed with version 1.0, 1.1 and maybe some 2.0), I still can't get some basic things done. In some cases, like the layout, you can pass options with no class definition:
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),
{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
},
....
It took me a while to guess the element in south is a panel, but from the code itself there's no way to give me the least hint, and it's not specified anywhere in API (Or I simply missed)
I guess I will get better when I get more field experiences.
Ext is a great library, but the lack of examples in documentation slows down learning. It's better to have a javadoc style method index table at the beginning of each entry for quick loacating desired information, given the amount of information listed in each entry.